31장 RegExp (정규표현식)

해당 포스팅은 위키북스의 모던 자바스크립트 Deep Dive라는 책을 독학하며 기록하는 글입니다.

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 포현하기 위해 사용하는 형식 언어로 문자열을 대상으로 패턴 매칭 기능을 제공한다.

예를 들어 우리의 전화번호는 '숫자3개-숫자3~4개-숫자4개'라는 일정한 패턴을 가지고 있는데, 이렇게 정형화된 패턴을 충족하는 입력이 알맞게 들어왔는지 확인할 때 정규 표현식이 사용된다.

정규 표현식의 생성(표현)

정규 표현식의 표현은 다음과 같이 이루어진다.

1. /로 시작한다.
2. 패턴을 입력한다.
3. /로 끝낸다.
4. 플래그가 있는 경우 플래그를 적는다.

예를 들어 어떤 문자열이 숫자 3자리로 시작하는지를 확인하고 싶을 때는 다음과 같은 정규 표현식을 사용한다.

const target = /^\d{3}/;

// testStr이 정규 표현식 target을 만족하면 true를 출력
if(target.test(testStr)) {
  console.log('true');
}

플래그

정규 표현식에서 사용하는 플래그는 총 6개가 있다. 여기서는 중요한 3가지를 살펴보도록 하자.

1. i
   대소문자를 구별하지 않고 패턴을 검색한다.
2. g
   대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
3. m
   문자열의 행이 바뀌더라도 패턴 거맥을 계속한다.

플래그를 명시하지 않으면 그 반대의 상황이 Defalut이다. (i를 명시하지 않으면 대소문자를 구별해서 패턴을 검색한다.) 또한 여러개의 플래그를 사용하고 싶으면 그냥 이어서 쓰면 된다. (ig, im, igm 등)

RegExp 메서드

정규 표현식에서 사용하는 메서드는 다음과 같다.

1. 정규표현식.exec(문자열)
   인자로 받은 문자열에서 정규 표현식의 패턴을 검색하여 결과로 반환한다. 없다면 null을 반환한다.
   exec메서드는 g플래그를 사용해도 첫 번째 검색결과만을 반환한다.

2. 정규표현식.test(문자열)
   인자로 받은 문자열에서 정규 표현식의 패턴을 검색하여 결과를 불리언으로 반환한다. (true, false)

3. 문자열.match(정규표현식)
   문자열에서 인수로 받은 정규 표현식의 패턴을 검색하여 결과를 반환한다. exec와는 다르게 g플래그를 사용하면 모든 매칭 결과를 반환한다.

패턴

문자열

패턴에서 어떠한 문자열을 검색하고 싶으면 해당 문자열을 그대로 사용하면 된다.

// 대소문자를 구분하지 않고 'is'를 검색하는 정규 표현식
const target = /is/i;

임의의 문자열은 .으로 표현한다. .하나당 하나의 문자를 뜻한다.

/// 대소문자를 구분하지 않고 3자리의 문자열을 검색하는 정규 표현식
const target = /.../i;

반복

{m,n}은 최소 m번, 최대 n번 반복된다는 뜻이다. m만 있을 경우 m번 반복된다는 뜻이다. m과 ,가 있면 최소 m번 반복된다는 뜻이다. 다음 예제를 통해 이해하자.

// 문자 a가 최소 1번, 최대 3번 반복되는 패턴 검색
const target = /a{1, 3}/;
// 문자 a가 2번 반복되는 패턴 검색
conat target = /a{2}/;
// 문자 a가 최소 3번 반복되는 패턴 검색
conat target = /a{3,}/;

{}사이에 공백이 있으면 정상적으로 동작하지 않음에 유의하자!

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다. 즉 + = {1,}이다.
?는 앞선 패턴이 최대 한번 이상 반복되는 문자열을 의미한다. 즉 ? = {0,1}이다.

// 문자 a가 최소 한 번 이상 반복되고 뒤에 bc가 붙어있는 패턴 검색
const target = /a+bc/;
// 문자 a가 없거나 1번 있고 뒤에 bc가 붙어있는 패턴 검색
const target = /a?bc/;

OR

|는 OR의 의미를 갖는다. 즉 다음 코드는 A또는 B를 검색한다.

const target = /A|B/;

또한 []를 사용하기도 한다. []안에 있는 모든 문자들은 OR로 동작한다. 위 코드는 다음과 같이 사용할 수도 있다.

const target = /[AB]/;

범위

범위를 나타내기 위해서는 -를 사용한다. [A-Z]는 A부터 Z까지의 알파벳중 어느 하나(OR)를 의미한다. 숫자의 경우는 [0-9]를 사용하면 0부터 9까지 아무 수 하나를 의미한다.

특별한 표현

앞서 범위를 나타내는 것을 통해 숫자나 알파벳 전체를 검색할 수 있는 패턴을 만들었다. 이를 좀 더 편리하게 하는 표현이 있다.

1. \d
[0-9]와 같은 표현이다. 아무 숫자 하나를 가리킨다.

2. \D
\d와 반대되는 표현이다. 숫자가 아닌 문자 하나를 가리킨다.

3. \w
[A-Za-z0-9_]와 같은 표현이다. 알파벳, 숫자, 언더스코어 중 아무 문자 하나를 가리킨다.

4. \W
w와 반대되는 표현이다. 알파벳, 숫자, 언더스코어가 아닌 문자 하나를 가리킨다.

5. /s
[\t\r\n\v\f]와 같은 표현으로 여러 가지 공백 문자(스페이스, 탭 등)를 의미한다.

NOT

[]안에서의 ^는 NOT을 의미한다.

// 문자 a를 제외한 아무 문자 하나를 가리킨다.
const target = /[^a]/;

시작위치와 끝위치 검색

[]밖의 ^는 문자열의 시작을 의미하고 $은 문자열의 마지막을 의미한다.

// 'This'로 시작하는 문자열인지를 검사하는 정규 표현식
const target = /^This/;
//'end'로 끝나는 문자열인지를 검사하는 정규 표현식
const target = /end$/;

자주쓰이는 정규 표현식

// 숫자로만 이루어진 문자열인지를 검사하는 정규 표현식
const target = /^\d+$/;

// 아이디로 사용 가능한지를 검사하는 정규 표현식
// 아이디의 규칙은 영문 대소문자와 숫자, 언더 스코어를 포함할 수 있으며 최소 6글자에서 10글자이다.
const target = /^\w{6,10}$/;

// 휴대폰 번호가 맞는지를 검사하는 정규 표현식
const target = /^\d{3}-\d{3,4}-\d{4}$/;

// 특수 문자를 포함하는지를 검사하는 정규 표현식
const target = /[^a-zA-Z0-9]/;