🚦본론

드디어! 제가 기대하던 대망의 파트가 왔네요! 🥰
이전에는 이 파트를 그저 넘겼는데, 정규표현식을 제대로 톺아볼 수 있게 되어 행복해요!

정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어라 해요.

일반적으로, 정규표현식은 다른 언어들과 에디터들에 대체로 내장되어 있어요.
대체적으로 다음 2가지의 정규표현식 문법이 존재하는데요.

• POSIX (Standard)
• PCRE (Extends POSIX by perl)

자바스크립트는 PCRE 문법을 ES3때부터 도입하였습니다. 따라서 만약 POSIX에 익숙하신 분들은 PCRE 문법을 익히시기를 권장해요.

핵심

일단 저는 어떤 것을 이해할 때마다 항상 이 주제의 핵심과 사용 목적이 무엇인지를 명확히 하는데요!결국 제 생각에 정규표현식을 이해할 때 주목할 부분은 다음과 같습니다.

• 정규표현식의 패턴이란 무엇인지? (결국 본질이 문자열의 패턴에서 기인한 표현식이므로)
• 어떻게 유효한지를 판단하지? (주 사용 목적인 검색과 검사를 위한 방법)
• 주요 문법은 무엇인지? (실제 사용하기 위한 문법)

우리, 그러면 한 번 이 3가지를 토대로 살펴볼까요? 😉

패턴이란

패턴이라 할 때 어떤 것이 떠오르셨나요? 아마 대부분 어떤 현상에 대한 일정한 규칙을 떠올렸을 것 같아요.

이를 정규표현식의 패턴에 대입하면 어떨까요? 바로, 어떤 문자열 표현식에 대한 일정한 규칙을 특정한 문법으로 서술한 것이라 할 수 있겠죠? 🙇🏻‍♂️

이러한 패턴은 /으로 열고 닫아요. 마치 엘리먼트에서 우리가 <div></div>식으로 엘리먼트의 시작과 끝을 알리듯이 말이죠.

예컨대 다음과 같이 표기하는 겁니다.

const regExp = /Hello/;

매치

위의 패턴을 예로 들자면, 해당 패턴과 일치하는 문자가 있다면 이를 매치한다라고 말합니다.

실제로도 RegExp.prototype.test 메서드와 String.prototype.match라는 메서드를 통해 이 일치 여부를 확인할 수 있답니다.

const regExp = /Hello/;

const test = 'Hello, world!';

console.log(regExp.test(test)); // true
console.log(test.match(regExp)); 
// ['Hello', index: 0, input: 'Hello, world!', groups: undefined]

여기서 반환되는 객체는 배열 객체라고 하지만, 프로퍼티 키가 정수가 아니라는 점에서 유사배열의 특징을 강하게 지닙니다.

// 실제로 `index`, `input`과 `groups`라는 프로퍼티가 있습니다.
console.log(test.match(regExp).index); // 0
console.log(test.match(regExp).input); // 'Hello, world!'
console.log(test.match(regExp).hasOwnProperty('groups')); // true;
// '[object Array]'
Object.prototype.toString.call(test.match(regExp));

// 생성자를 확인해보아도 배열입니다.
test.match(regExp).constructor.name; // 'Array'

// length를 가집니다. 그러나 값이 정확하지 않습니다.
console.log(test.match(regExp).length); // 1

// test.match(regExp)의 반환값은 일치하는 문자열입니다.
test.match(regExp)[0]; // 'Hello'
test.match(regExp)[1]; // 'undefined'

플래그

이때, 같이 따라서 익혀야 할 친구가 하나 있습니다. 플래그라는 친구인데요.
플래그를 통해 일종의 검색 방식을 정의할 수 있어요!

다음 3가지가 있습니다.

플래그	의미	설명
i	ignore case	대소문자 구별을 무시합니다.
g	global	전역적으로 모든 일치하는 문자들을 검색합니다.
m	multi line	여러 행의 문자열 행을 여러 줄에 걸쳐 게속해서 검색합니다.

중간 정리

자, 우리는 이제 2가지를 배웠어요.

• 정규표현식의 패턴이란 무엇인지? (결국 본질이 문자열의 패턴에서 기인한 표현식이므로)
• 어떻게 유효한지를 판단하지? (주 사용 목적인 검색과 검사를 위한 방법)

다만 해당 질문에 대해서는 아직 설명이 되지를 않았군요.

• 주요 문법은 무엇인지? (실제 사용하기 위한 문법)

💡 그렇다면, 이제 정규표현식에 대한 다양한 사용방법과 문법들을 한 번 살펴볼까요?

주요 문법

반복 검색

{m,n}을 통해 효과적으로 반복 검색을 추려낼 수 있습니다. 이때 두 인자인 m, n은

• m: 최소 m번
• n: 최대 n번

를 의미해요. 이때 n은 생략 가능합니다.

여기서 패턴은, 공백까지 체크할 수 있기에 상당히 민감해요. 입력에 공백이 없도록 유의합시다.

예제를 한 번 살펴볼게요.

const str = '0000000000000000000000000O0000000000'
console.log(str.match(/\O{1,1}/).index) // 25

주의! g 플래그를 사용하면 index 키를 활용할 수 없습니다. (전역 검색이니까요!)

문자 다음이나, []내에 여러 문자를 입력 후 +를 할 경우 1번 이상의 반복되는 문자들을 모두 검색합니다.

'000-0000-0000'.match(/0+/g) // ['000', '0000', '0000']
'000-0000-0000'.match(/[0-]+/g) // ['010-1234-1234']

OR 검색

보통 여느 문법과 마찬가지로 |을 토대로 의미를 가질 수 있네요!

const isCheckAnswerPattern = /Y|N/;
const answers = {
	requiredAgreement1: 'Y',
    requiredAgreement2: 'Y',
    optionalAgreement1: 'N',
    optionalAgreement2: 'N',
};

// true
console.log(
  Object.values(answers)
  		.every(v => isCheckAnswerPattern.test(v))
);

혹은 []안에 여러 문자를 넣는 경우, 이를 OR로 취급합니다.

const isCheckAnswerPattern = /[YN]/;
const answers = {
	requiredAgreement1: 'Y',
    requiredAgreement2: 'Y',
    optionalAgreement1: 'N',
    optionalAgreement2: 'N',
};

// true
console.log(
  Object.values(answers)
  		.every(v => isCheckAnswerPattern.test(v))
);

범위 검색

[]안에 시작범위-끝범위 형태로 입력합니다.
예컨대 다음과 같이 할 수 있습니다.

const onlyNumberPattern = /[0-9]/g
// ['0', '1', '0', '1', '2', '3', '4', '1', '2', '3', '4']
'010-1234-1234'.match(onlyNumberPattern);

\d와 \D

오직 숫자인 문자열만 검색하는 경우는 꽤나 많습니다.
이럴 때는 해당 패턴을 통해 간편하게 검색할 수 있습니다.

const onlyNumberPattern = /[\d]+/g;
'010-1234-1234'.match(onlyNumberPattern); //  ['010', '1234', '1234']

\w와 \W

알파벳, 숫자, 언더스코어를 포함할 때 해당 패턴은 유용합니다.
예컨대 다음과 같이 사용할 수 있겠군요!

const email = 'young_pallete@test.com'

// [숫자, 알파벳, 언더스코어]@[숫자, 알파벳, 언더스코어, 하이픈](1~2번의 .[알파벳])으로 이메일 문자열 유효성 검사
const emailPattern = /^([\w]+)@([\w-]+)((.([a-z]{2,3})){1,2})$/

emailPattern.test(email) // true

시작 위치 검색

이미 위에 나와 있군요!
^을 이용하면 맨 처음 시작 위치부터 일치해야 한다는 의미입니다.
이때, [^...]의 방식으로 표현하는 패턴에선 ...와 일치하지 않는 패턴인지 NOT의 의미로 해석하니 주의하세요!

마치막 위치 검색

이 역시 위의 예시에 나와 있어요!
$을 이용하면, 특정 문자열 패턴의 마지막이 일치하는지를 의미합니다.

핸드폰 번호 검사(국내)

const phoneNumber = '010-1234-1234';

const phoneNumberPattern = /^\d{3}-\d{3,4}-\d{4}$/;

phoneNumberPattern.test(phoneNumber) // true

특수문자 검색

다음과 같이 사용하면 특수문자 포함 여부를 검사 가능해요!

const specialCharPattern = /[^a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]/
specialCharPattern.test('안녕!') // true
specialCharPattern.test('안녕ㅎㅎ') // false

기타

그나마 책에서 유용하다 싶은 것들은 가져오거나 제 의도에 맞게 변형했는데요!
사실 이거 말고도 패턴을 위한 특수문자는 엄~청 많아요 😭

따라서, 필요한 조건들이 있다면, 이를 간편하게 처리하기 위한 방법이 있는지 해당 MDN - 정규 표현식 참고를 추천드려요 🥰

응용문제 - 다트게임

이전의 다트게임은 다음과 같이 풀었었어요!

const setValue = {
  S: (data) => data,
  D: (data) => Math.pow(data, 2),
  T: (data) => Math.pow(data, 3),
  "*": (data) => (2 * data),
  "#": (data) => (-1 * data),
  "+": (strData, nextStrData) => strData + nextStrData,
};


const getScoresArr = (dartResult) => {
  const scoresArr = [];
  let isLastDataStr = false;

  const length = dartResult.length;
  for (let i = 0; i < length; i += 1) {
    const nowData = dartResult[i];
    const isNowDataStr = Number.isNaN(parseInt(nowData));
      
          if (isNowDataStr) {
      const lastScore = scoresArr.pop();
      scoresArr.push(
        ...(nowData === "*" && scoresArr.length
          ? [setValue[nowData](scoresArr.pop()), setValue[nowData](lastScore)]
          : [setValue[nowData](lastScore)])
      );
    } else {
      scoresArr.push(
        !i || isLastDataStr ? nowData : setValue["+"](scoresArr.pop(), nowData)
      );
    }

    isLastDataStr = isNowDataStr;
  }
  return scoresArr;
};

const solution = (dartResult) => {
  return getScoresArr(dartResult).reduce(
    (acc, cur) => acc + parseInt(cur),
    0
  );
};

상당히 절차적으로 풀어서, 언뜻 보기엔 한눈에 코드가 잘 보이지 않는군요.
하지만 정규표현식 문법으로 이를 풀어내면, 선언적으로 어떤 내용으로 문제를 접근했는지를 파악하기 쉬워집니다!

const getInteger = (now, p1, p2, p3) => (p3 ?  -1 : 1) * p1 ** ['', 'S', 'D', 'T'].indexOf(p2) + 'S'

const passStarForward = (now, p1, p2, p3) => p3 + (p1 * 2) + p2

const solution = (dartResult) =>  dartResult
        .replace(/([0-9]+)(S|D|T)(\#?)/g, getInteger) // 정수로 바꿔주고!
        .replace(/([-|0-9]+)(S|D|T)(\*)/g, passStarForward) // 스타상의 경우 2배로 해준 다음 앞으로 넘겨주고!
        .replace(/([-|0-9]+)(S|D|T)(\*)/g, passStarForward) // 앞의 점수도 업데이트 해주고!
        .match(/[-|0-9]+/g) // 정수만 뽑아내서
		.reduce((acc, cur) => acc + Number(cur), 0) // 다 더해준다!

정말 재미있죠? 🥰

🎉 마치며

사실 이 파트 기대도 많이 하면서 걱정도 많이 했어요.
꽤나 제가 부족한 부분이라 생각했는데, 이번에 살펴보면서 많이 공포증을 극복했네요!
조만간 한 번 이를 이용한 문제도 풀어봐야겠어요. 🙆🏻 이상!