본문 바로가기
Front-end/JavaScript

[JavaScript] 천단위 콤마 찍기, 소수점 포함

by 꼬바리 2021. 4. 20.

javascript 정규식을 사용하여 input text box에 입력받는 숫자들을 천단위로 콤마를 찍어보자.
물론 소수점도 입력된다.


JavaScript

//문자 제거
function removeChar(event) {
    event = event || window.event;
    var keyID = (event.which) ? event.which : event.keyCode;
    if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39)
        return;
    else
        //숫자와 소수점만 입력가능
        event.target.value = event.target.value.replace(/[^-\.0-9]/g, "");
}
//콤마 찍기
    function comma(obj) {
        var regx = new RegExp(/(-?\d+)(\d{3})/);
        var bExists = obj.indexOf(".", 0);//0번째부터 .을 찾는다.
        var strArr = obj.split('.');
        while (regx.test(strArr[0])) {//문자열에 정규식 특수문자가 포함되어 있는지 체크
            //정수 부분에만 콤마 달기 
            strArr[0] = strArr[0].replace(regx, "$1,$2");//콤마추가하기
        }
        if (bExists > -1) {
            //. 소수점 문자열이 발견되지 않을 경우 -1 반환
            obj = strArr[0] + "." + strArr[1];
        } else { //정수만 있을경우 //소수점 문자열 존재하면 양수 반환 
            obj = strArr[0];
        }
        return obj;//문자열 반환
    }
//콤마 풀기
function uncomma(str) {
    str = "" + str.replace(/,/gi, ''); // 콤마 제거 
    str = str.replace(/(^\s*)|(\s*$)/g, ""); // trim()공백,문자열 제거 
    return (new Number(str));//문자열을 숫자로 반환
}
//input box 콤마달기
function inputNumberFormat(obj) {
    obj.value = comma(obj.value);
}
//input box 콤마풀기 호출
function uncomma_call(){
    var input_value = document.getElementById('input1');
    input_value.value = uncomma(input_value.value);
}




Html

<input type="text" id="input1" placeholder="숫자를 입력해주세요"
onKeyUp="removeChar(event);inputNumberFormat(this);" 
onKeyDown="inputNumberFormat(this);" >
<input type="button" onClick="uncomma_call();" value="콤마 풀기 버튼">




구현 모습

숫자를 입력받으면 자동으로 3자리 단위로 소수점이 찍힌다.





콤마 풀기 버튼을 클릭하면 콤마가 찍혀있던 숫자들이 콤마가 풀린다.




728x90
반응형

댓글