반응형
사용자 숫자 입력시 정규식을 이용하여 천단위 콤마를 표시해주는 함수 만들기.
사용자 입력화면(HTML)
<body>
숫자입력 : <input type="text" onkeyup="javascript:chnNum(this)" value=""/>
</body>*onkeyup : 사용자가 키보드의 키를 눌렀다가 땠을 때 실행
천단위 콤마(JAVASCRIPT - 정규식)
<script type="text/javascript">
function chnNum(a) {
let commaNumber = comma($(a).val());
$(a).val(commaNumber);
}
function comma(num){
let len, point, str;
num = num.replace(/[^0-9]/g,''); // 숫자가 아닌 문자는 전부 replace하여 숫자만 추출
num = num.replace(/(^0+)/, ""); // 0으로 시작하는 첫자리 수는 제거
//해당 숫자의 길이와 천단위 콤마를 찍을 위치값을 구해 콤마를 추가
point = num.length % 3 ;
len = num.length;
str = num.substring(0, point);
while (point < len) {
if (str != "") str += ",";
str += num.substring(point, point + 3);
point += 3;
}
//결과값을 반환
return str;
}
</script>
*정규식 표현방법
/ 패턴 / 플래그
º 슬래시(/) "사이"에는 매칭시킬 "패턴"을 사용
º 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 사용 ( 플래그 : 하나 또는 모두 다 찾을지 등을 설정하는 옵션 )
/[^0-9]/g
[ ] : 문자집합. 괄호안의 문자들 중 하나를 찾는다.
^ : 부정 또는 보완 문자 집합. 즉, 대괄호로 묶이지 않은 모든 항목과 일치. 대괄호[] 안에서 앞에 ^를 쓰면, 부정(Not)의 기능을 합니다.
[0-9] : 0~9까지의 집합
[^0-9] : 0~9를 포함하지 않는 모든 항목의 집합
g : 전역을 탐색
/(^0+)/
( ) 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
^0 : 0로 시작(괄호가 없기때문에 부정의 의미가 아닌 시작한다는 의미)
+ : 최소 한개이상을 의미
참고 : 정규식 표현식이란?
결과화면
반응형
'개발공부 > 프론트엔드' 카테고리의 다른 글
| [javascript] json-파싱데이터 정리해서 볼 수 있는 사이트 (0) | 2023.05.19 |
|---|---|
| JAVASCRIPT 변수 [ var, const, let ] 차이점 (0) | 2022.03.03 |
| 수정할 데이터 input에 값 자동세팅방법 (0) | 2022.01.06 |
| [jstl] enter, 줄바꿈 적용 (0) | 2021.09.29 |
| [javascript] location 객체 알아보기 (0) | 2021.08.27 |