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
반응형
'Front-end > JavaScript' 카테고리의 다른 글
[javaScript] Optional chaining "?." 연산자 (0) | 2021.12.30 |
---|---|
[javaScript] URL정보 (window.location) (0) | 2021.12.27 |
[JavaScript] reload() 메서드 - 페이지 새로고침 (0) | 2021.11.16 |
새창을 여는 window.open() 함수 사용법 (0) | 2021.11.09 |
[JAVASCRIPT] 이미지 클릭시 새창띄우기 (base64 이미지) (0) | 2021.11.09 |
댓글