[Javascript] 전화번호 가운데 마스킹

Bad way👎

// 전화번호 가운데 마스킹 처리
const maskingPhone = (phone: string) => {
  return phone
    .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
    .split('-')
    .reduce((pre, cur, idx) => (idx === 1 ? pre + '****' : pre + cur), '');
};

간단하고 아주~ 쉽게 만들었는데, 정규식을 이용해 아주 맛깔나게 줄이는 법을 동료분이 제안해주셨다.

나는 멍청이~ 나나~ 뚜루뚜루

 

Better way👍

// 전화번호 가운데 마스킹 처리
const maskingPhone = (phone: string) => {
  return phone
    .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
    .split('-')
    .reduce((pre, cur, idx) => (idx === 1 ? pre + '****' : pre + cur), '');
};

 

(multiple token)로 그룹을 지어준다.

\d로 숫자(Digit)만 검색하고 {n}로 자릿수를 지정할 수 있다고 한다.

 

Capture 된 순서대로 $1, $2 번호가 부여되어 replace에서 즉시 사용이 가능하다고 한다.

이를 '캡쳐링 그룹'을 사용하면 패턴 확인과 함께 원하는 부분만 교체하는 기능을 구현할 수 있다.

 

 

참고 블로그
https://blog.rhostem.com/posts/2018-11-11-regex-capture-group

https://uznam8x.tistory.com/62