티스토리 뷰
반응형
javascript 정규식을 사용하여 input text box에 입력받는 숫자들을 천단위로 콤마를 찍어보자.
물론 소수점도 입력된다.
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | //문자 제거 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); } | cs |
Html
1 2 3 4 | <input type="text" id="input1" placeholder="숫자를 입력해주세요" onKeyUp="removeChar(event);inputNumberFormat(this);" onKeyDown="inputNumberFormat(this);" > <input type="button" onClick="uncomma_call();" value="콤마 풀기 버튼"> | cs |
구현 모습
숫자를 입력받으면 자동으로 3자리 단위로 소수점이 찍힌다.
콤마 풀기 버튼을 클릭하면 콤마가 찍혀있던 숫자들이 콤마가 풀린다.
반응형
'Web > JavaScript & JQuery' 카테고리의 다른 글
[JavaScript] 소수점 반올림, 올림, 내림(ceil, floor, round, trunc) (0) | 2023.05.18 |
---|---|
[JavaScript] var, let, const 차이점과 쓰는 방법 추천 (0) | 2023.05.17 |
[JQuery] Jquery로 table안에 값 변경하기, 텍스트 말줄임 (0) | 2018.11.14 |
[JavaScript] 뒤로가기 버튼 막기 (3) | 2018.05.11 |
[JavaScript]회원가입 유효성 만들기 (0) | 2018.04.06 |
댓글
공지사항