JavaScript 문자열 마스킹 – 패턴에 맞춰 문자열 형식화하기

JavaScript 문자열 마스킹이란?

문자열 마스킹(masking)은 전화번호나 신용카드 번호처럼 일정한 형식을 가진 데이터를 미리 정의된 패턴에 맞게 변환하는 기법입니다. 예를 들어 연속된 숫자만 있는 문자열에 공백이나 하이픈을 삽입해 사람이 읽기 쉬운 형태로 바꿀 수 있습니다.

이번 글에서는 두 개의 인자를 받는 JavaScript 함수를 작성해 보겠습니다. 첫 번째 인자는 원본 문자열, 두 번째 인자는 형식을 정의하는 패턴 문자열입니다.

문자열과 패턴이 다음과 같다고 가정해 보겠습니다.

const str = '123456789';
const pattern = '## ## ## ###';

이때 함수는 패턴의 # 위치에 문자열을 한 글자씩 채워 넣어야 하며, 최종 출력은 다음과 같아야 합니다.

const output = '12 34 56 789';

구현 예제

const str = '123456789';
const pattern = '## ## ## ###';

const maskString = (str, pattern) => {
  let i = 0;
  const padded = pattern.replace(/#/g, () => {
    return str[i++];
  });
  return padded;
};

console.log(maskString(str, pattern));

코드 동작 원리

이 코드의 핵심은 replace() 메서드와 정규표현식 /#/g의 조합입니다.

1. 패턴 탐색: 정규표현식 /#/g는 패턴 문자열 안의 모든 '#' 문자를 찾아냅니다. g 플래그가 있기 때문에 첫 번째뿐 아니라 모든 '#'이 대상이 됩니다.

2. 콜백 함수로 치환: replace()의 두 번째 인자로 전달된 콜백 함수는 '#'을 발견할 때마다 실행됩니다. 콜백은 외부 변수 i를 참조해 원본 문자열에서 현재 위치의 글자 하나를 반환하고, i를 1 증가시켜 다음 호출 시 다음 글자를 가리키도록 합니다.

3. 비교 연산자 없이 처리: '#'이 아닌 문자(공백 등)는 콜백이 실행되지 않고 그대로 유지되므로, 별도의 조건문 없이 자연스럽게 패턴 구분자가 살아남습니다.

실행 결과

콘솔에는 다음과 같이 출력됩니다.

12 34 56 789

실무 활용 사례

이러한 마스킹 기법은 실무에서 매우 유용하게 활용됩니다.

전화번호 형식화: '01012345678' 같은 숫자 문자열을 '010-1234-5678' 형태로 변환할 수 있습니다.

신용카드 번호 표시: 카드 번호를 '#### #### #### ####' 패턴으로 그룹화해 가독성을 높일 수 있습니다.

사용자 입력 자동 포맷팅: input 필드에서 사용자가 숫자만 입력해도 화면에는 자동으로 하이픈이나 공백이 삽입되도록 처리할 수 있습니다.

패턴 문자열의 '#'을 다른 기호(예: 별표 *)로 바꾸면 민감한 정보를 가리는 용도로도 확장할 수 있습니다. 필요에 따라 패턴 문자만 교체하면 되므로 재사용성이 뛰어난 접근 방식입니다.