1. 전화번호 체계
대한민국의 일반적인 전화번호 형식은 다음과 같다.
1) ○○○○ - ○○○○
2) 02-○○○○-○○○○
3) 031-○○○-○○○○
4) 010-○○○○-○○○○
○○○○ - ○○○○ 형식을 제외한 나머지 형식들을 구현하고자 한다.
2. Javascript
substring 함수와 replace 함수를 사용해서 전화번호 형식을 구현할 수 있다.
2.1 substring 사용
function phoneFormat(input) {
let value = input.value.replace(/[^0-9]/g, '');
let formattedValue = '';
if (value.startsWith('02')) {
if (value.length > 10) {
value = value.slice(0, 10);
}
if (value.length < 9) {
formattedValue = value;
} else if (value.length === 9) {
formattedValue = value.substring(0, 2) + '-' + value.substring(2, 5) + '-' + value.substring(5, 9);
} else if (value.length === 10) {
formattedValue = value.substring(0, 2) + '-' + value.substring(2, 6) + '-' + value.substring(6, 10);
}
} else {
if (value.length > 11) {
value = value.slice(0, 11);
}
if (value.length < 10) {
formattedValue = value;
} else if (value.length === 10) {
formattedValue = value.substring(0, 3) + '-' + value.substring(3, 6) + '-' + value.substring(6, 10);
} else if (value.length === 11) {
formattedValue = value.substring(0, 3) + '-' + value.substring(3, 7) + '-' + value.substring(7, 11);
}
}
target.value = formattedValue;
}02로 시작할 때와 아닌 형식으로 구분했다.
1) 02로 시작할 경우
02로 시작하는지 확인하기 위해 startsWith 함수를 사용했다. 02로 시작하는 전화번호의 최대 입력값은 10이므로, 최대 입력값을 벗어나면 slice 함수로 길이를 제한했다.
입력값의 길이가 9미만이면 원래 입력값이 출력되고,
길이가 9이면 02-○○○-○○○○, 10이면 02-○○○○-○○○○ 형태가 되도록 구현했다.
2) 02로 시작하지 않을 경우
최대 입력값의 길이를 11로 제한했다. 10 미만의 입력값이 들어오면 원래 입력값이 출력된다. 길이다 10이면 031-○○○-○○○○, 11이면 010-○○○○-○○○○ 이런 형태로 하이픈이 생성된다.
2.2 replace 사용한 정규식
function phoneFormat2(input) {
let value = input.value.replace(/[^0-9]/g, '');
if (value.startsWith('02')) {
if (value.length > 10) {
value = value.slice(0, 10);
}
} else if (value.length > 11) {
value = value.slice(0, 11);
}
input.value = value.replace(/(^02|^0[0-9]{2})([0-9]{3,4})([0-9]{4})/, `$1-$2-$3`);
}정규식을 사용하면 substring 함수로 구현한 것보다 코드가 간략하다는 장점이 있다. replace 함수는 정규식을 사용하여 값을 반환할 때 사용된다. 해당 코드에서 사용한 정규식의 해석은 아래와 같다.
| 문자 | 해석 | 예 |
|---|---|---|
| / | 정규식의 시작과 끝을 표현 | |
| ^ | 문자열의 시작 | ^02 : 02로 시작하는 문자열 |
| | | 패턴 안에서 OR 연산 수행 | ^02 | ^010 : 02 또는 010 |
| [0-9] | 0부터 9까지의 숫자 중 하나를 매칭 | |
| () | 소괄호 안의 문자를 하나의 문자로 인식 | |
| {} | 반복 횟수를 지정 | [0-9]{3, 4} : 123(3자리) 또는 1234(4자리) |
위의 표를 참고하여 /(^02|^0[0-9]{2})([0-9]{3,4})([0-9]{4})/ 이 정규식을 해석하면 다음과 같다.
1. (^02|^0[0-9]{2})
02 또는 0[0-9]{2}로 시작하는 문자열로, 0[0-9]{2}는 0으로 시작하고 그 뒤에 숫자 2개가 오는 패턴으로 031, 302, 010 등 다른 지역번호를 처리한다.
2. ([0-9]{3,4})
0부터 9까지의 숫자 중 하나를 매칭하는데, 숫자가 3개 또는 4개가 연속하는 패턴이다.
3. ([0-9]{4})
0부터 9까지의 숫자 중 하나를 매칭하는데, 숫자가 4개가 연속하는 패턴이다.
소괄호로 묶은 부분을 '캡처 그룹'이라고 하는데, 캡처 그룹은 순서대로 번호가 매겨지며, 첫 번째 그룹은 $1, 두 번째 그룹은 $2, 세 번째 그룹은 $3 형식으로 참조된다.
그래서 02-○○○-○○○○, 010-○○○○-○○○○ 이런 형식이 반환된다.
3. Jquery
3.1 substring 사용
function phoneFormat(input) {
var value = $(input).val().replace(/[^0-9]/g, '');
var formattedValue = '';
if (value.startsWith('02')) {
if (value.length > 10) {
value = value.slice(0, 10);
}
if (value.length < 9) {
formattedValue = value;
} else if (value.length === 9) {
formattedValue = value.substring(0, 2) + '-' + value.substring(2, 5) + '-' + value.substring(5, 9);
} else if (value.length === 10) {
formattedValue = value.substring(0, 2) + '-' + value.substring(2, 6) + '-' + value.substring(6, 10);
}
} else {
if (value.length > 11) {
value = value.slice(0, 11);
}
if (value.length < 10) {
formattedValue = value;
} else if (value.length === 10) {
formattedValue = value.substring(0, 3) + '-' + value.substring(3, 6) + '-' + value.substring(6, 10);
} else if (value.length === 11) {
formattedValue = value.substring(0, 3) + '-' + value.substring(3, 7) + '-' + value.substring(7, 11);
}
}
$(input).val(formattedValue);
}
3.2 replace 사용한 정규식
function phoneFormat2(input) {
var value = $(input).val().replace(/[^0-9]/g, '');
if (value.startsWith('02')) {
if (value.length > 10) {
value = value.slice(0, 10);
}
} else if (value.length > 11) {
value = value.slice(0, 11);
}
var formattedValue = value.replace(/(^02|^0[0-9]{2})([0-9]{3,4})([0-9]{4})/, '$1-$2-$3');
$(input).val(formattedValue);
}
javascript 방법과 별차이가 없다. 입력값을 가져오고 포맷된 값을 다시 입력 필드에 반영하는 방법에서만 차이가 있다.
