[js] input 값 숫자에 컴마 찍기 (thousands separators with commas)

 

Input 값에 숫자를 입력하면 숫자가 그대~로 컴마없이 나온다.

 

1000000 -> 1,000,000 으로 변경하기

 

해당 input id를 불러와서 매 숫자의 천의 자리마다 "," 컴마를 찍는 함수를 keyup 이벤트로 넣어주었다. 원래는 더 간편하게 html input에 바로 onkyup="comma()" 이렇게 넣어주었다가 js가 해당 함수를 찾지못하는 에러가 났다.  (랜더될 때 Js 함수가 Global이 아니라서라고 한다.) 찾아보니 global 하게 만들거나 또는 modern event handling (아래 코드 방식)으로 만드라고 해서 후자로 만들었다. 

 

html

<td class="td_right">
	<input type="text" id="input1" placeholder="10,000,000">원
</td>

javascript

    const money_input1 = document.getElementById('input1');
    money_input1.addEventListener('keyup', () => {
        money_input1.value = comma(unComma(money_input1.value));
    })

    const comma = (str) => {
        str = String(str); // 이미 Str값이지만 그냥 내비두ㅇ엇다.
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }
    const unComma = (str) => {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    }

 

 

 

실제 사용은 unComma(comma)를 한번에 아래처럼 묶어서 사용했다. 각 함수마다 기능이 다르면 위처럼 나눠서 쓰는게 좋겠지만 그냥 한번에 처리되는 걸로 로직을 압축시키고 싶었다.

    const money_input1 = document.getElementById('input1');
    money_input1.addEventListener('keyup', () => {
        money_input1.value = comma(money_input1.value);
    })
	const comma = (str) => {
        str = String(str).replace(/[^\d]+/g, '');
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

 

잘 나온닷