javascript replace 이용한 치환 정규식

정규식 한땀한땀 이해하기


들어가며

현재 진행하는 프로젝트에서 키패드로 입력을 받아 정해진 규칙대로 화면에 표기하는 작업을 할 때 정규식을 이용합니다.

정규 표현식과 자바스크립트 replace 메서드를 이용하여 문자열 치환에 대해 소개하고자 합니다.

정규 표현식(Regular expression)

일정 패턴을 가진 문자열의 집합을 표현하기 위한 언어

문자열을 대상으로 패턴 매칭 기능을 제공하는데, 특정패턴과 일치하는 문자열을 검색/추출/치환이 가능하다. 정규 표현식은 문자열을 새로운 규칙에 따라 편집이 필요할 경우 조건식이나 반복문 없이 라인 한줄로 간단하게 처리를 할 수 있지만, 주석, 공백을 허용하지 않고 기호들로만 표현하기 때문에 가독성이 떨어진다.

replace 함수

어떤 패턴에 일치하는 일부 혹은 전체를 교체된 새로운 문자열로 반환

String.replace(‘찾을 문자열 혹은 정규식’, ‘교체될 문자열’) 규칙으로 사용된다.

자주쓰는 치환 정규식

1. 주민번호 마스킹 처리하기

// 1-1 주민번호 하이픈 추가하기
// 예) 9911112111111 -> 991111-2111111
String(value).replace(/([\d|*]{6})([\d|*]+)/, '$1-$2');

// 1-2 주민번호 마스킹 추가하기
// 예) 9911112111111 -> 991111-2******
let addValue = String(value).replace(/([\d|*]{6})([\d|*]+)/, '$1-$2');
addValue.replace(
  addValue,
  addValue.replace(/(-?)([1-4]{1})([0-9]{6})\b/gi, '$1$2******'),
);

() 는 하나의 그룹을 의미

\d : 숫자 [0-9]를 의미

1-1-1) ([\d|*]{6})

* : 0개 이상을 검색

즉, 숫자를 6개를 검색

1-1-2) ([\d|*]+)

+ 1개 이상을 의미. 즉, 숫자 1개 이상을 검색

1-2-1) (-?)

’-’ 이 0개 또는 1개가 있음 검색(있어도 없어도 무방)

1-2-2) ([1-4]{1})

1~4까지 범위의 숫자 1자리를 검색

1-2-3) ([0-9]{6})

0~9까지 범위의 숫자 6자리를 검색

1-2-4) \b

\b : 단어의 경계. 공백, 탭, 콤마, 대시

정규식 확인해보기


2. 전화번호 표기하기

// 2-1 전화번호 유형별 하이픈 추가하기
// 예) 02-999-9999 / 010-9999-9999 / 0505-9999-9999
String(value).replace(
  /(^02.{0}|^01.{1}|^0505.{0}|[0-9]{3})([0-9]+)([0-9]{4})/,
  '$1-$2-$3',
);

2-1-1) (^02.{0}|^01.{1}|^0505.{0}|[0-9]{3})

| 는 or 연산자, {n} 는 n자리수, ^ 는 문자열의 시작을 의미(선택 패턴 내에 있을 경우 not을 의미)

^02.{0} : 02로 시작하고 끝나는 경우

^01.{1} : 01로 시작하고 1자리 문자열을 가지는 경우

^0505.{0} : 0505(평생번호)로 시작하고 끝나는 경우

[0-9]{3} : 0~9까지의 범위의 숫자 3자리수를 검색

2-1-2) ([0-9]+)

+ 1개 이상을 의미

0~9까지 범위의 숫자들이 1개 이상 반복, 구성되는 값

2-1-3) ([0-9]{4})

0~9까지 범위의 숫자 4자리수 검색

정규식 확인해보기


3. 날짜 표기

// 3-1 YYYY년 MM월 DD일
value.replace(/(\d{4})(\d{2})(\d{2})/, `$1년 $2월 $3일`);

// 3-2 YYYY-MM-DD
value.replace(/(\d{4})(\d{2})(\d{2})/, `$1${delimiter}$2${delimiter}$3`);

3-1-1) (\d{4})

4자리의 숫자를 검색

3-1-2), 3-1-3) (\d{2})

2자리의 숫자를 검색

정규식 확인해보기


4. 숫자 자리수 표기

// 4-1 자리수 표현하기
Number(value)
  .toString()
  .replace(/\B(?=(\d{3})+(?!\d))/g, ',');

// 4-2 자리수 제거하기
value.replace(/,/gi, '');

// 4-3 첫번째 자리 0, 문자 제한하기
value.replace(/^[0]|[^0-9]/g, '');

4-1-1) \B

\b의 반대. 단어의 경계가 아닌 경우

(\b : 단어의 경계. 공백, 탭, 컴마, 대시)

즉, ’,’ 표기를 넣을 때 첫글자에 문자열이 앞에 있는지 검색

4-1-2) (?=)

x(?=y) 는 오직 y가 뒤따라오는 x에만 대응

숫자 3자리가 뒤에 따라오는 단어의 경계가 아닐 경우만 대응

즉, 4자리 숫자부터 검색

4-1-3) (\d{3})

3자리의 숫자를 검색

4-1-4) +(?!\d))

+는 4-1-3) 표현식을 1회 이상 반복해서 검색

x(?!y)는 x(\d{3}을 의미) 뒤에 y(숫자)가 없는 경우 ‘x’에 일치

즉, 뒤에는 세글자만 올 수 있다는 것을 의미

4-2) /,/

,를 검색

4-3-1) ^[0]

첫번째가 ‘0’인 경우

4-3-2) 0-9

첫번째가 숫자가 아닌 경우

정규식 확인해보기


마치며

사실 정규 표현식은 유효성 검증에 더 많이 사용되지만 현재 프로젝트의 특성상 문자열 치환을 중점으로 기록을 해보았는데요. 기본적인 표현을 이해하는 과정을 통해 앞으로 정규식을 정의하고 다른 사람의 코드를 사용함에 있어 더 많이 활용할 수 있지 않을까 싶어요.

읽어주셔서 감사합니다.

참고문서