[jQuery]제이쿼리 숫자(천단위)콤마 찍기 및 제거
- 웹/JQuery
- 2020. 5. 4.
[jQuery]제이쿼리 숫자(천단위)콤마 찍기 및 제거
안녕하세요 오늘은 숫자 천단위마다 콤마 찍는 코딩을 할게요.
숫자 콤마가 필요할 경우에는 보통 금액을 표시할떄 사용을 많이 하죠.
가독성이 높이기 때문에 천단위 구분 콤마를 사용합니다.
js로 따로 만들어서 공통으로 만들어 놓는다면 유용하게 쓸수 있어요.
일단 정규식으로 천단위 콤마를 제거하는 방법입니다.
정규식으로 사용하면 정말 간단합니다.
<script type="text/javascript">
$(document).ready(function(){
var don = "123123123";
console.log(don); // 콘솔창에 123123123 찍힘
don = don.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(don); // 콘솔창에 123,123,123 찍힘
});
</script>
다음은 펑션으로 만들어서 구현해볼게요.
js에 한번 구현해놓으면 관리하기두 편하겠죠 ㅎㅎ
<script type="text/javascript">
$(document).ready(function(){
var won = "10000000";
console.log(won); // 콘솔창에 10000000 찍힘
won = addComma(won);
console.log(won); // 콘솔창에 10,000,000 찍힘
});
//천단위 콤마 펑션
function addComma(value){
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return value;
}
</script>
이번엔 콤마를 제거해볼게요.
정규식으로 구현하면 간단하게 구현가능합니다.
<script type="text/javascript">
$(document).ready(function(){
var don = "333,333,333";
console.log(don); // 콘솔창에 333,333,333 찍힘
don = str.replace(/[^\d]+/g, "");
console.log(don); // 콘솔창에 333333333 찍힘
});
</script>
다음은 펑션으로 만들어서 구현해볼게요.
js에 한번 콤마추가, 콤마제거 함수를 한번에 구현해놓는게 편합니다.
<script type="text/javascript">
$(document).ready(function(){
var won = "555,555";
console.log(won); // 콘솔창에 555,555 찍힘
won = minusComma(won);
console.log(won); // 콘솔창에 555555 찍힘
});
//천단위 콤마 펑션
function minusComma(value){
value = value.replace(/[^\d]+/g, "");
return value;
}
</script>
이번엔 input 창에 숫자입력시 자동으로 천단위 구분콤마가 생기도록 해볼게요.
인풋창에 키입력시마다 자릿수를 체크해서 리턴해주게 했어요~
<html>
<body>
<div>
<input type="text" style="width:100px;text-align:right;" id="amt" value="" onkeyup="commaCheck(this)"/>
</div>
</body>
<script type="text/javascript">
function commaCheck(value){
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return value;
}
</script>
</html>
오늘은 천단위 콤마 추가/제거 에 대해 알아보았씁니다.
다음포스팅으로 돌아올게요~
'웹 > JQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 위젯 datepicker 간단사용법 (0) | 2020.05.11 |
|---|---|
| [jQuery] 제이쿼리 셀렉트박스(selectbox)값 가져오기 해결 (0) | 2020.05.06 |
| [jQuery] 제이쿼리 each(), foreach, for반복문 예제 (0) | 2020.05.03 |
| [jQuery]제이쿼리 fadeIn, fadeOut 이펙트 효과 사용하기 (0) | 2020.05.02 |
| [jQuery] 제이쿼리 attr(), prop() 비교 및 차이점을 알아보자 (0) | 2020.05.01 |