String conversion library Display dates in Japanese Display numbers in millions

Category：JavaScript

Pub.date：2022-01-07

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.<br>
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.<br>
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);
	}
})();
```

Email (optional)
Contents