자바스크립트 전화번호/휴대폰번호 정규표현식, 의미 설명

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/