31.1 정규 표현식이란?

정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 자바스크립트는 Perl의 정규 표현식 문법을 ES3부터 도입했다.

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.

패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

/* 정규 표현식 리터럴로 휴대폰 전화번호 패턴(000-0000-0000)을 정의 */
const regExp = /^\\d{3}-\\d{4}-\\d{4}$/;

const tel = '(사용자로부터 입력받은 휴대폰 전화번호)';

regExp.[test](<https://hardy716.notion.site/31-RegExp-ea7c03728ce94f12a581393ce857cb59>)(tel); // tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트 -> true / false

<aside> <img src="/icons/chat_gray.svg" alt="/icons/chat_gray.svg" width="40px" /> 정규 표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다. 다만 정규 표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제점이 있다.

</aside>

31.2 정규 표현식의 생성

정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다.

일반적인 방법은 정규 표현식 리터럴을 사용하는 것이며 아래와 같이 표현한다.

모던 자바스크립트 Deep Dive 발췌
(p.579 그림 3-11)

모던 자바스크립트 Deep Dive 발췌 (p.579 그림 3-11)

정규 표현식 리터럴은 패턴플래그로 구성된다.

정규 표현식 리터럴이 더 짧고, 클래스 방식의 생성자를 고민하지 않아도 되기 때문에 쓰기 편하다. 정규식 자체가 이미 어렵기 때문에 조금이라도 간단하게 만드는 방법인 정규식 리터럴을 고수하는 것이 최선이다.

JavaScript Patterns(e-book), p63, 스토얀 스테파노프

RegExp 생성자 함수를 사용하여 RegExp 객체를 생성하는 방법은 아래와 같다.

/**
  * pattern: 정규 표현식의 패턴
  * flags: 정규 표현식의 플래그(g, i, m, u, y)
  */

new RegExp(pattern[, flags])

RegExp 생성자 함수를 사용하면 변수를 사용해 동적으로 RegExp 객체를 생성할 수 있다.

const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;

count('Is this all there is?', 'is');  // -> 3

31.3 RegExp 메서드

31.3.1 RegExp.prototype.exec

exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다.

매칭 결과가 없는 경우 null을 반환한다.

const target = 'Is this all there is?';
const regExp = /is/;

regExp.exec(target);  
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환하므로 주의해야 한다.

31.3.2 RegExp.prototype.test

test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.

31.3.3 String.prototype.match

String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.

const target = 'Is this all there is?';
const regExp = /is/;

target.match(regExp);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

exec 메서드는 문자열 내의 모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다.

String.prototype.match 메서드는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.

const target = 'Is this all there is?';
const regExp = /is/g;

target.match(regExp);
// -> ["is", "is"]

31.4 플래그

플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.

자바스크립트는 아래와 같이 6개의 플래그를 지원한다.

6개의 플래그 중 특히 많이 사용하는 플래그는 i, g, m이다.

플래그 의미 설명
i Ignore case 대소문자를 구별하지 않고 패턴을 검색함
g Global 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색함
m Multi line 문자열의 행이 바뀌더라도 패턴 검색을 계속함
s Dotall 개행 문자가 .과 일치함
u Unicode “unicode”, 패턴을 유니코드 코드 포인트의 시퀀스로 간주함
y Sticky “접착” 탐색, 대상 문자열의 현재 위치에서 탐색을 시작함

패턴과 플래그

플래그는 옵션이므로 선택적으로 사용할 수 있으며, 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다. 어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴을 검색한다.

문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색하고 종료한다.