[tip] 가격(숫자 3자리, 천단위)에 자동 콤마 (input or div) 넣기

금액 부분을 넣을 때, 숫자 3자리마다 콤마가 없으면 가독성이 떨어지기 때문에 되도록 콤마를 넣어주는 것이 좋습니다.

금액에 자동 콤마를 넣는 경우는 여러가지가 있지만 input에 사용자가 입력한 숫자에 자동적으로 넣게 하거나, 스크립트를 통해 나온 숫자에 콤마를 붙여주는 방법을 소개하려 합니다.

새로 만든 html 파일에 아래 내용을 넣어줍니다.

 

* html

<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);" placeholder="input 숫자만" />

javascript 파일에 해당 내용을 넣어줍니다.
(아래 내용에는 input에 숫자만 넣을 수 있는 스크립트가 포함되어 있습니다.)

* javascript

function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    } 
    
    function inputNumberFormat(obj) {
        obj.value = comma(uncomma(obj.value));
    }
    
    function inputOnlyNumberFormat(obj) {
        obj.value = onlynumber(uncomma(obj.value));
    }
    
    function onlynumber(str) {
	    str = String(str);
	    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
	}

 이렇게 하면 input에 콤마를 자동적으로 넣을 수 있게 됩니다. 다음은 영역 안에 있는 숫자에 콤마를 붙여보죠.

* html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<span id="money">60000</span><span>원</span>

* javascript

var money = $('#money').text();
var money2 = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$('#money').text(money2);

id 안에 들어오는 숫자 데이터는 자동적으로 콤마가 붙여지게 됩니다.

 

 

 

* 참고사이트
https://chobopark.tistory.com/175

[정규식] input숫자만입력&콤마적용 방법!!