오늘은 어쩌면 자주 사용하실 자바스크립트를 이용하여 전화번호나 휴대폰번호에 자동으로 하이픈 넣는 방법을 정리해보고자 합니다.
방법 1: 함수를 이용해 넣기
아래 예시와 같이 autoHypenPhone 이라는 함수를 만들어 사용하는 방법입니다.
<html>
<head>
</head>
<body>
<input type="text" id="phoneNum" maxlength="13">
<script>
var autoHypenPhone = function(str){
str = str.replace(/[^0-9]/g, '');
var tmp = '';
if( str.length < 4){
return str;
}else if(str.length < 7){
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3);
return tmp;
}else if(str.length < 11){
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3, 3);
tmp += '-';
tmp += str.substr(6);
return tmp;
}else{
tmp += str.substr(0, 3);
tmp += '-';
tmp += str.substr(3, 4);
tmp += '-';
tmp += str.substr(7);
return tmp;
}
return str;
}
var phoneNum = document.getElementById('phoneNum');
phoneNum.onkeyup = function(){
console.log(this.value);
this.value = autoHypenPhone( this.value ) ;
}
</script>
</body>
</html>
방법 2: 정규 표현식 활용하기
정규 표현식을 활용하면 방법 1에 길었던 함수를 단 몇 줄로 끝낼 수 있습니다.(대박!!)
이 방법에서는 함수와는 다르게 input 태그에 oninput 속성을 사용하였습니다.
// 첫번째 코드: 00-000-0000 or 000-0000-0000
String.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
// 두번째 코드
// 000-0000-0000
String.replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3").replace(/\-{1,2}$/g, "");
// 00-000-0000
String.replace(/^(\d{0,2})(\d{0,3})(\d{0,4})$/g, "$1-$2-$3").replace(/\-{1,2}$/g, "");참고사이트: https://gurtn.tistory.com/86
반응형
'코딩 | 개념 정리 > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수 선언 방법 (0) | 2022.04.17 |
|---|---|
| [JavaScript] 에러 문구 정리(로그인, 회원가입, 기타) (0) | 2022.04.13 |
| [JavaScript] 비밀번호 정규식 (0) | 2022.04.06 |
