정규표현식 (RegExp)

0. Intro

• 회원가입, URI 파싱 등 웹 프로그래밍에서 정보 추출을 도와주는 정규 표현식은 무엇이며 어떻게 사용하는 걸까?

1. 정규 표현식(Regular Expressions)이란?

• 문자열에 나타나는 특정 문자를 검색(search)하고 대체(replace)하고 추출(extract)하기 위해 사용되는 패턴 (MDN)

• JS에서 정규 표현식 또한 객체이다.

2. JS의 정규 표현식 패턴

1. 정규 표현식 리터럴 방식

const regexp1 = /simply/;

const sampleString =
  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

const regexp1 = /simply/;

console.log(sampleString.match(regexp1));

// 'simply',
// index: 15,
// input: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
// groups: undefined

2. RegExp 생성자 함수 방식

const regexp1 = new RegExp('dummy');

const sampleString =
  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

const regexp1 = new RegExp('dummy');

console.log(sampleString.match(regexp1));

// 'dummy',
// index: 22,
// input: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
// groups: undefined

3. 문법

1. 메소드
   • test : 일치 여부 반환
   • match : 일치하는 문자열 반환
   • search : 일치하는 문자열의 인덱스 반환
   • replace : 대체된 문자열 반환
2. 플래그
   • g : 모든 문자 일치 (global)
   • i : 영어 대소문자 구분 X (ignore case)
   • m : 멀티라인에 대해 검색 (multi line)
3. 패턴
   • /^ab/ : 줄 시작에 있는 ab와 일치
   • /ab&/ : 줄 끝에 있는 ab와 일치
   • /./ : 임의의 한 문자와 일치
   • /a|b/: a 또는 b와 일치
   • /ab?/: b가 없거나 b와 일치
   • /{3}/: 3개 연속 일치
   • /{3,}/: 3개 이상 연속 일치
   • /{3,5}/: 3개 이상 5개 이하 연속 일치
   • /[abc]/: a 또는 b 또는 c
   • /\w/ : 대소문자 + 숫자 + _
   • /\b/ : 문자 경계
   • \d : 숫자
   • \s : 공백에 일치
   • (?=): 앞 쪽 일치 부분 검색
   • (?<=) : 뒤 쪽 일치 부분 검색

3. JS의 정규 표현식 활용

• 2021 KAKAO BLIND RECRUITMENT 신규 아이디 추천

1. 알파벳, 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자 제거하기

   Regex : /[^\w-.]/g, ''
   Input : ...!@bat#*..y.abcdefghijklm
   Output : ...bat..y.abcdefghijklm

2. 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환하기

   Regex : /\.{2,}/g, '.'
   Input : ...bat..y.abcdefghijklm
   Output : .bat.y.abcdefghijklm

3. 마침표(.)가 처음이나 끝에 위치한다면 제거하기

   Regex : /^\.|\.$/g, ''
   Input : .bat.y.abcdefghijklm
   Output : bat.y.abcdefghijklm

4. 빈 문자열에, 문자 "a"를 추가하기

   Regex : /^$/g, 'a'
   Input : ''
   Output : a

// 2. 신규 아이디 추천
// 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다.
// 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다.
// 3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다.
// 4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다.
// 5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다.
// 6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다.
//      만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다.
// 7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.
function solution(newId) {
  return newId
    .toLowerCase() // 1단계 
    .replace(/[^\w-.]/g, '') // 2단계 ; \w -> (알파벳 + 숫자 + _)
    .replace(/\.{2,}/g, '.') // 3단계
    .replace(/^\.|\.$/g, '') // 4단계
    .replace(/^$/g, 'a') // 5단계
    .slice(0, 15) // 6단계(1)
    .replace(/^\.|\.$/g, '') // 6단계(2)
    .replace(
      /^.{1,2}$/g,
      match => match + match[match.length - 1].repeat(3 - match.length) // 7단계
    );
}

4. 결론

• 특정 문자를 검색, 대체, 추출하기 위해 사용되는 정규 표현식을 활용하면 정보 식별의 효율성을 향상할 수 있다.

5. 참고

• MDN
• 2021 KAKAO BLIND RECRUITMENT 신규 아이디 추천