String conversion library Display dates in Japanese Display numbers in millions

If you want to display dates in Japanese or millions of numbers, the amount of code required to process them in PHP will increase, making it difficult to maintain.
It would be neat to have these handled by JavaScript, and the load on the server would be reduced slightly.

I've been dealing with these cases individually and creating various libraries on my own, but this time I'd like to share them with the public because they are relatively neatly organized.
It has been used for personal use and will continue to be expanded.

Usage

Describes the data-strConvert attribute.

<div data-strConvert="dateJp">2020-5-15</div>

Place the source code at the end of the HTML (after the DOM is formed)

<script src="strconvert.js"></script>

Source Code

strconvert.js

/**
 * 文字列変換
 *
 * <div data-strConvert="dateJp">2020-5-15</div> --> <div data-strConvert="dateJp">2020年05月15日</div>
 * <div data-strConvert="dateJpw">2020-5-15</div> --> <div data-strConvert="dateJpw">2020年05月15日(金)</div>
 * <div data-strConvert="dateCompact">2020-5-15</div> --> <div data-strConvert="dateCompact">20.05.15</div>
 * <div data-strConvert="timeSpan">00:00-00:00</div> --> <div data-strConvert="timeSpan">未定</div>        //00:00-00:00 未定, 00:00-23:59 終日, 10:00-17:30 10:00～17:30
 * <div data-strConvert="timePad">7:9</div> --> <div data-strConvert="timePad">07:09</div>
 * <div data-strConvert="numJp">123456789</div> --> <div data-strConvert="numJp">1億2345万6789</div>
 * <div data-strConvert="numJp1000">123456</div> --> <div data-strConvert="numJp">1億2345万6000</div>
 * <div data-strConvert="numFormat">12345.678</div> --> <div data-strConvert="numFormat">12,346</div>    //小数点以下は丸め
 * <div data-strConvert="numFormatDot">12345.678</div> --> <div data-strConvert="numFormatDot">12,345.678</div>    //小数点以下はそのまま
 * <div data-strConvert="ratio2">123/456</div> --> <div data-strConvert="ratio2">26.97</div>
 * <div data-strConvert="ratio2">26.9733</div> --> <div data-strConvert="ratio2">26.97</div>
 * <div data-strConvert="ratio2p">123/456</div> --> <div data-strConvert="ratio2p">26.97%</div>
 * <div data-strConvert="ratio2p">26.9733</div> --> <div data-strConvert="ratio2p">26.97%</div>
 * <div data-strConvert="minusColor">-123</div> --> <div data-strConvert="minusColor" style="color:red;">-123</div>
 * <td><div data-strConvert="timePadParentColor">21:9</div></td> --> <td style="background-color:#fa0;"><div data-strConvert="timePad">21:09</div></td>
 *
 * @author ao-system, Inc.
 *
 */
(() => {
    const _attribute = 'data-strConvert';
    const _strConvertElms = document.querySelectorAll('[' + _attribute + ']');
    //
    init();
    function init() {
        for (let i = 0; i < _strConvertElms.length; i++) {
            const innerStr = String(_strConvertElms[i].innerHTML.replace(/^[ 　\t\r\n]+|[ 　\t\r\n]+$/g,''));    //前後のスペースを取り除いたinnerHTML
            const attr = _strConvertElms[i].getAttribute(_attribute);
            const attrs = attr.split(',');
            for (let j = 0; j < attrs.length; j++) {
                if (attrs[j] == 'dateJp') {
                    strConvertDateJp(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'dateJpw') {
                    strConvertDateJpw(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'dateCompact') {
                    strConvertDateCompact(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'timeSpan') {
                    strConvertTimeSpan(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'timePad') {
                    strConvertTimePad(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'timePadParentColor') {
                    strConvertTimePadParentColor(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'numJp') {
                    strConvertNumJp(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'numJp1000') {
                    strConvertNumJp1000(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'numFormat') {
                    strConvertNumFormat(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'numFormatDot') {
                    strConvertNumFormatDot(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'ratio1') {
                    strConvertRatio1(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'ratio2') {
                    strConvertRatio2(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'ratio1p') {
                    strConvertRatio1p(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'ratio2p') {
                    strConvertRatio2p(_strConvertElms[i],innerStr);
                } else if (attrs[j] == 'minusColor') {
                    strConvertMinusColor(_strConvertElms[i],innerStr);
                }
            }
        }
    }
    //dateJp
    function strConvertDateJp(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const ary = ymdToYmdAry(innerStr);
        if (ary[0] == '') {
            return;
        }
        const result = ary[0] + '年' + strPad2(ary[1]) + '月' + strPad2(ary[2]) + '日';
        elm.innerHTML = result;
    }
    //dateJpw
    function strConvertDateJpw(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const ary = ymdToYmdAry(innerStr);
        if (ary[0] == '') {
            return;
        }
        const date = new Date(parseInt(ary[0],10),parseInt(ary[1],10) - 1,parseInt(ary[2],10));
        const week = date.getDay();
        const result = ary[0] + '年' + strPad2(ary[1]) + '月' + strPad2(ary[2]) + '日(' + ['日','月','火','水','木','金','土'][week] + ')';
        elm.innerHTML = result;
    }
    //dateCompact
    function strConvertDateCompact(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const ary = ymdToYmdAry(innerStr);
        if (ary[0] == '') {
            return;
        }
        const result = ary[0].slice(-2) + '.' + strPad2(ary[1]) + '.' + strPad2(ary[2]);
        elm.innerHTML = result;
    }
    //timeSpan
    function strConvertTimeSpan(elm,innerStr) {
        if (innerStr.length != 11) {
            return;
        }
        const ary = (innerStr + '-').split('-');
        if (ary[0].length != 5 || ary[1].length != 5) {
            return;
        }
        let result = '';
        if (ary[0] == '00:00' && ary[1] == '00:00') {
            result = '未定';
        } else if (ary[0] == '00:00' && ary[1] == '23:59') {
            result = '終日';
        } else {
            result = ary[0] + '～' + ary[1];
        }
        elm.innerHTML = result;
    }
    //timePad
    function strConvertTimePad(elm,innerStr) {
        if (innerStr.indexOf(':') == -1) {
            return;
        }
        const ary = innerStr.split(':');
        elm.innerHTML = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
    }
    //timePadParentColor
    function strConvertTimePadParentColor(elm,innerStr) {
        if (innerStr.indexOf(':') == -1) {
            return;
        }
        const ary = innerStr.split(':');
        elm.innerHTML = ('0' + ary[0]).slice(-2) + ':' + ('0' + ary[1]).slice(-2);
        if (ary[0] >= 20) {
            elm.parentNode.style.backgroundColor = '#fc9';
        }
    }
    //numJp
    function strConvertNumJp(elm,innerStr) {
        String.prototype.lastFourNum = function() {
            return this.substr(strNum.length - 4).replace(/^0+/,'');
        }
        String.prototype.withoutLastFour = function() {
            return this.substr(0,this.length - 4);
        }
        //
        if (innerStr == '') {
            return;
        }
        const num = Math.round(innerStr);
        if (isNaN(num)) {
            return;
        }
        let strNum = String(num);
        let minusFlag = false;
        if (strNum.substr(0,1) == '-') {
            minusFlag = true;
            strNum = strNum.substr(1);
        }
        let ichi = '';
        if (strNum.length > 4) {
            ich = strNum.lastFourNum();
            strNum = strNum.withoutLastFour();
        } else {
            ich = strNum;
            strNum = '';
        }
        let man = '';
        if (strNum.length > 4) {
            man = strNum.lastFourNum();
            strNum = strNum.withoutLastFour();
        } else {
            man = strNum;
            strNum = '';
        }
        let oku = '';
        if (strNum.length > 4) {
            oku = strNum.lastFourNum();
            strNum = strNum.withoutLastFour();
        } else {
            oku = strNum;
            strNum = '';
        }
        let cho = '';
        if (strNum.length > 4) {
            cyo = strNum.lastFourNum();
            strNum = strNum.withoutLastFour();
        } else {
            cyo = strNum;
            strNum = '';
        }
        let result = '';
        if (cyo != '') {
            result += cyo + '兆';
        }
        if (oku != '') {
            result += oku + '億';
        }
        if (man != '') {
            result += man + '万';
        }
        if (ich != '') {
            result += ich;
        }
        elm.innerHTML = (minusFlag ? '-':'') + result;
    }
    //numJp1000
    function strConvertNumJp1000(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const num = parseInt(innerStr + '000');
        if (isNaN(num)) {
            return;
        }
        strConvertNumJp(elm,String(num));
    }
    //numFormat
    function strConvertNumFormat(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const num = Math.round(innerStr);
        if (isNaN(num)) {
            return;
        }
        const str = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        elm.innerHTML = str;
    }
    //numFormatDot
    function strConvertNumFormatDot(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        const ary = innerStr.split('.');
        let str = String(ary[0]).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        if (ary.length > 1) {
            str += '.' + ary[1];
        }
        elm.innerHTML = str;
    }
    //ratio1
    function strConvertRatio1(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        if (innerStr.indexOf('/') != -1) {
            const ary = innerStr.split('/');
            const num1 = parseInt(ary[0]);
            const num2 = parseInt(ary[1]);
            if (isNaN(num1) || isNaN(num2) || num2 == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = (num1 / num2 * 100).toFixed(1);
            elm.innerHTML = ratio;
        } else {
            const num = parseFloat(innerStr);
            if (isNaN(num) || num == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = num.toFixed(1);
            elm.innerHTML = ratio;
        }
    }
    //ratio2
    function strConvertRatio2(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        if (innerStr.indexOf('/') != -1) {
            const ary = innerStr.split('/');
            const num1 = parseInt(ary[0]);
            const num2 = parseInt(ary[1]);
            if (isNaN(num1) || isNaN(num2) || num2 == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = (num1 / num2 * 100).toFixed(2);
            elm.innerHTML = ratio;
        } else {
            const num = parseFloat(innerStr);
            if (isNaN(num) || num == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = num.toFixed(2);
            elm.innerHTML = ratio;
        }
    }
    //ratio1p
    function strConvertRatio1p(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        if (innerStr.indexOf('/') != -1) {
            const ary = innerStr.split('/');
            const num1 = parseInt(ary[0]);
            const num2 = parseInt(ary[1]);
            if (isNaN(num1) || isNaN(num2) || num2 == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = (num1 / num2 * 100).toFixed(1);
            elm.innerHTML = ratio + '%';
        } else {
            const num = parseFloat(innerStr);
            if (isNaN(num) || num == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = num.toFixed(1);
            elm.innerHTML = ratio + '%';
        }
    }
    //ratio2p
    function strConvertRatio2p(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        if (innerStr.indexOf('/') != -1) {
            const ary = innerStr.split('/');
            const num1 = parseInt(ary[0]);
            const num2 = parseInt(ary[1]);
            if (isNaN(num1) || isNaN(num2) || num2 == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = (num1 / num2 * 100).toFixed(2);
            elm.innerHTML = ratio + '%';
        } else {
            const num = parseFloat(innerStr);
            if (isNaN(num) || num == 0) {
                elm.innerHTML = '';
                return;
            }
            const ratio = num.toFixed(2);
            elm.innerHTML = ratio + '%';
        }
    }
    //minusColor
    function strConvertMinusColor(elm,innerStr) {
        if (innerStr == '') {
            return;
        }
        if (innerStr.substr(0,1) != '-') {
            return;
        }
        elm.style.color = '#c00';
    }

    //------common-------------------------------------

    //日付文字列を年月日の配列で返す
    //'2020-5-12' または '2020/5/12' または '20200512' を [2020,5,12] で返す
    function ymdToYmdAry(str) {
        str = str.replace(/\//g,'-');
        if (str.indexOf('-') == -1 && str.length == 8) {
            str = str.substr(0,4) + '-' + str.substr(4,2) + '-' + str.substr(6,2);
        }
        const ary = (str + '--').split('-');
        const y = parseInt(ary[0]);
        if (isNaN(y) || y < 1900 || y > 3000) {
            return ['','',''];
        }
        return ary;
    }
    //左を'0'で埋めた2桁を返す
    function strPad2(str) {
        return ('00' + str).slice(-2);
    }
})();