Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- APOLLO
- 자바스크립트
- C
- 해시테이블
- 연결리스트
- 타입스크립트
- 배열
- cors
- pytorch
- 큐
- 프로그래머스
- 프로세스
- 코딩테스트
- 릿코드
- vue3
- GraphQL
- RT scheduling
- Machine Learning
- 브라우저
- 연결 리스트
- 이진탐색
- 컨테이너
- 프론트엔드
- 포인터
- 알고리즘
- 스택
- alexnet
- 웹팩
- 자료구조
- RxJS
Archives
- Today
- Total
프린세스 다이어리
자바스크립트 전화번호/휴대폰번호 정규표현식, 의미 설명 본문
728x90
1. 전체
거의 웬만한 국내 개인/업체 전화번호는 포맷팅 가능할듯. 물론 5자리 통신사 번호 같은 레어템은 안 침.
const formatPhoneNumber = (str: string) => {
if (typeof str !== 'string') return '';
str = str.replace(/[^0-9]/g, '');
if (str.indexOf('82') == 0) {
return str.replace(/(^82)(2|\d{2})(\d+)?(\d{4})$/, '+$1-$2-$3-$4'); // +82
} else if (str.indexOf('1') == 0) {
return str.replace(/(^1\d{3})(\d{4})$/, '$1-$2'); // 1588, 1566, 1677, ...
}
return str.replace(/(^02|^0504|^0505|^0\d{2})(\d+)?(\d{4})$/, '$1-$2-$3'); // 02/0504/0505/010/011/031
}
2. 설명
str.replace(/[^0-9]/g, '');
- str에서 0~9 범위의 숫자를 제외한 공백, 특수문자 등을 모두 삭제한다는 의미다.
str.replace(/(^82)(2|\d{2})(\d+)?(\d{4})$/, '+$1-$2-$3-$4');
- 괄호가 하나의 문자열 뭉치라고 보면 된다. 괄호를 각각 해석해보면 (82), (2 또는 숫자 두 자리), (숫자 한 자리 이상), (숫자 네 자리) 이렇게 4개의 문자열 뭉치를 정의한 것이다.
- $1, $2는 각각 첫 번째 문자열, 두 번째 문자열 이런 식이다.
describe('formatPhoneNumber 테스트', () => {
it('국가번호+휴대폰번호', () => {
const result = formatPhoneNumber('821000002222');
expect(result).toBe('+82-10-0000-2222');
});
it('국가번호+전화번호', () => {
const result = formatPhoneNumber('8220002222');
expect(result).toBe('+82-2-000-2222');
});
});
str.replace(/(^1\d{3})(\d{4})$/, '$1-$2');
- 마찬가지로 괄호는 하나의 뭉치이기 때문에, (1 뒤에 숫자 세 자리), (숫자 네 자리)이다.
- 각각의 문자열을 기호 '-'로 묶어준다.
describe('formatPhoneNumber 테스트', () => {
it('1588 대표번호', () => {
const result = formatPhoneNumber('15880000');
expect(result).toBe('1588-0000');
});
});
str.replace(/(^02|^0504|^0505|^0\d{2})(\d+)?(\d{4})$/, '$1-$2-$3');
- 괄호의 의미는 각각 (02 또는 0504 또는 0505 또는 0 뒤에 숫자 두 자리), (숫자 한 자리 이상), (숫자 네 자리) 이다.
- 각각의 문자열을 기호 '-'로 묶어준다.
describe('formatPhoneNumber 테스트', () => {
it('지역번호', () => {
const result = formatPhoneNumber('0212341234');
expect(result).toBe('02-1234-1234');
});
it('휴대폰번호', () => {
const result = formatPhoneNumber('01011112222');
expect(result).toBe('010-1111-2222');
});
it('구 휴대폰번호', () => {
const result = formatPhoneNumber('0113332222');
expect(result).toBe('011-333-2222');
});
});
참고로 사용자 인풋 입력과 동시에 번호 포맷팅을 하기 위해서는 위 로직에서 약간의 수정이 필요하다. 위 포맷팅 로직은 서버에서 응답으로 받은 다양한 형태의 전화번호를 포맷팅하는 용도이기 때문에 총 글자수까지 제한하지는 않는다.
더 화려하게 한줄로 줄인 정규표현식이 있을 수 있겠지만 가독성을 위해 이정도로 적당히 만족..
참고사이트: https://regex101.com/
728x90
'FE' 카테고리의 다른 글
센트리에 서버에러 제외하고 클라이언트 에러만 로그 보내는 법 (0) | 2022.01.26 |
---|---|
테스트코드 눈에 잘 들어오게 리팩토링하기 (0) | 2022.01.25 |
[Vue3] [Vue warn]: Invalid vnode type when creating vnode 해결방법 (0) | 2022.01.05 |
[Vue3] property 'reduce' does not exist on type ~ 해결방법 (0) | 2022.01.04 |
[Vue3 / Highcharts] Property does not exist on type 'never'. 해결 방법 (0) | 2022.01.04 |
Comments