[JS] 전화번호 자동 하이픈(-) 정규식

 

첫 번째 코드

const phone = '01012345678';
 
phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
// '010-1234-5678'

00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다.

 

 

replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다.

 

 

const phone = "010-12345678";

phone
  .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거
  .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, "");

해당 코드는 하나의 번호 포맷만을 전용으로 하는 코드입니다. 첫 번째 replace 메서드에 존재하는 정규식의 숫자 범위를 조절하면 해당 범위 사이에 하이픈이 들어갑니다.

 

해당 코드도 숫자를 제외한 모든 문자가 제거되어야 합니다.

 

반응형

실행 코드

 

인풋 값에서 현재 적용된 특수문자(-)를 제거하고 해당 정규식을 적용하여 자동으로 하이픈을 삽입해 줍니다.

 

익스플로러 환경 구동 (정규식 X)

위 두 가지의 코드가 익스플로러 환경에서 동작하지 않는다고 합니다.

"$1-$9" 속성이 적용되지 않아서 발생하는 문제였고 해당 속성을 사용하지 않으면 정규식을 사용하는 의미가 없습니다.

 

그래서 익스플로러에서 지원하는 메서드를 최대한 활용하여 자동 하이픈을 구현해 봤습니다.

 

function phoneFormat(phoneNumber) {
  // 특수문자 제거
  const value = phoneNumber.replace(/[^0-9]/g, '');
  
  // 00 OR 000 지정
  const firstLength = value.length > 9 ? 3 : 2;

  // ({2,3}) - ({3,4}) - ({4})
  return [
    // 첫번째 구간 (00 or 000)
    value.slice(0, firstLength),
    // 두번째 구간 (000 or 0000)
    value.slice(firstLength, value.length - 4),
    // 남은 마지막 모든 숫자
    value.slice(value.length - 4),
  ].join('-');
}

phoneFormat('01012345678');
// 010-1234-5678

( {2,3} - {3,4} - {4} ) 각 구간을 slice 메서드로 문자를 잘라서 배열에 담아주었습니다. 자른 문자 배열에 join 메서드를 사용해서 하이픈을 채워주었습니다.