javascript comma and uncomma

자바스크립트에서 숫자를 표기할때 3자리마다 콤마를 찍어줘야 할 때가 있다 자주 사용하는 기능인데 매번 만들기란 여간 귀찮은게 아니다.

콤마찍기

//콤마찍기
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, '');
}

복사 붙여넣기로 사용하자!

input box에서 사용자 입력시 바로 콤마를 찍어주기 위한 함수도 추가 한다.

function inputNumberFormat(obj) {
	obj.value = comma(uncomma(obj.value));
}

//<input type="text" onkeyup="inputNumberFormat(this)" />

 

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

  • Hoyeong Kim

    안녕하세요! 좋은 글 잘 보고갑니다..
    콤마를 찍는 원리가 궁금합니다.. $1 이 숫자의 의미도 궁금하고요
    간단하게나마 설명 부탁드려도 괜찮을까요? 🙂

    • replace(/(d)(?=(?:d{3})+(?!d))/g 정규식보니깐 3자릿수 넘어가면 찍는다는거 아닌가요?

    • 정규표현식을 사용하여 특정 패턴을 찾아서 기존문자+콤마(,)로 치환 해주는 방식입니다.

      정규표현식을 사용할줄 아신다면 http://regexper.com/#%2F(%5Cd)(%3F%3D(%3F%3A%5Cd%7B3%7D)%2B(%3F!%5Cd))%2Fg 로 들어가시면 그림으로 어떤식으로 패턴을 찾는지 나옵니다.

      $1의 의미는 ()로 묶인 패턴그룹중 첫번째꺼를 의미 합니다.

      패턴이 일치 하는지만 찾는 것이 아니라 패턴을 찾아서 치환 하는 것이기 때문에 기존의 숫자를 유지한체 중간에 콤마(,)만 찍히게 하기 위해 첫번째 패턴그룹을 이어 붙여서 ,를 입력 하는 겁니다.

      자바스크립트 정규식에 대한것은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D 참고 하시면 됩니다.

      설명이 매우 잘 나와 있네요.

      • Hoyeong Kim

        오 좋은 정보 감사합니다!
        사실 정규표현식이라는걸 Copy&paste해서 사용만 했었는데,
        이 기회에 제대로 공부해보고자 합니다!
        우연히 들어온 블로그에서 많은 정보를 얻어가네요! 감사합니다:)

  • Pingback: javascript comma and uncooma2()