전화번호 입력시 자동으로 하이픈(-) 삽입하는 자바스크립트 코드

정규식을 활용해서 전화번호 입력시에 자동으로 하이픈을 삽입하는 코드들이 많은데 실제 사용시에 내가 생각했던 순서로 하이픈이 삽입되지 않아서 간단히 작성해 보았다.

정규식을 활용한 코드

function phoneNumber(value) {
  value = value.replace(/[^0-9]/g, "");
  return value.replace(
    /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,
    "$1-$2-$3"
  );
}

위 코드로 전화번호를 입력시에 아래와 같은 순서로 하이픈이 삽입된다. 뒷 4자리에 맞춰서 하이픈이 삽입되서 약간 어색해 보인다.

010
0101
01012
010123
0101234
010-1-2345
010-12-3456
010-123-4567
010-1234-5678

새로 작성한 코드

function phoneNumber(value) {
  if (!value) {
    return "";
  }

  value = value.replace(/[^0-9]/g, "");

  let result = [];
  let restNumber = "";

  // 지역번호와 나머지 번호로 나누기
  if (value.startsWith("02")) {
    // 서울 02 지역번호
    result.push(value.substr(0, 2));
    restNumber = value.substring(2);
  } else if (value.startsWith("1")) {
    // 지역 번호가 없는 경우
    // 1xxx-yyyy
    restNumber = value;
  } else {
    // 나머지 3자리 지역번호
    // 0xx-yyyy-zzzz
    result.push(value.substr(0, 3));
    restNumber = value.substring(3);
  }

  if (restNumber.length === 7) {
    // 7자리만 남았을 때는 xxx-yyyy
    result.push(restNumber.substring(0, 3));
    result.push(restNumber.substring(3));
  } else {
    result.push(restNumber.substring(0, 4));
    result.push(restNumber.substring(4));
  }

  return result.filter((val) => val).join("-");
}

010
010-1
010-12
010-123
010-1234
010-1234-5
010-1234-56
010-123-4567
010-1234-5678

앞에서 부터 하이픈이 삽입된다.

참고

• 대한민국의 전화번호 체계(위키백과)
• 전화번호(나무위키)
• 소스코드(github)