[JQuery] 숫자 3자리 콤마 입력(천단위 금액 표시)

입력란에 숫자 천 단위 표기하는 두 가지 방법이 있다.

 

1. 정규식 방법

$(".price").on("keyup", function(){    $(this).val($(this).val().replace(/\,/g, '').replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'));});

 

 

2. toLocaleString() 함수

$(".price").on("keyup", function(){    $(this).val($(this).val().toLocaleString("ko-KR"));});

 

toLocaleString() 함수를 이용하면 더 간편하게 사용할 수 있지만 각 나라별 금액 표시 방법이 다르기 때문에 해당 국가 코드로 설정을 해줘야 한다.

하지만 locale 파라미터를 설정하지 않아도 사용자 로컬 환경의 locale로 default 됨으로 자동으로 설정될 것이다.

 

 

$("input[type=number], input[type=tel]").filter(".comma").on("keyup", function(){    $(this).val($(this).val().replace(/[^0-9]/g, "").toLocaleString());});

 

위 소스와 같이 해당 타입에 "comma"라는 클래스만 추가하여 숫자만 입력되고 천단위 금액 표시까지 되도록 공통화하는 것이 좋을 것이다.