[Deep Dive] 31. RegExp

1. 정규 표현식이란?

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. JS 뿐만 아니라 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.

 

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공하며, 이는 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

// 사용자로부터 입력받은 휴대폰 전화번호
const tel = '010-1234-567팔';

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

// tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다.
regExp.test(tel); // -> false

 

정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있지만 정규표현식은 가독성이 좋지 않다는 문제가 있다.

 

2. 정규 표현식의 생성

정규 표현식 객체를 생성하는 방법은 정규 표현식 리터럴과 RegExp 생성자 함수를 사용한 두 가지 방법으로 생성할 수 있다.

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

// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp = /is/i;

// test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
regexp.test(target); // -> true

 

RegExp 생성자 함수를 사용해 RegExp 객체를 생성할 수 있다.

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

const regexp = new RegExp(/is/i); // ES6
// const regexp = new RegExp(/is/, 'i');
// const regexp = new RegExp('is', 'i');

regexp.test(target); // -> true

 

3. RegExp 메서드

RegExp.prototype.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]

 

모든 패턴을 검색하는 g 플래그를 지정해도 첫 번째 매칭 결과만 반환한다.

 

RegExp.prototype.test

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

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

regExp.test(target); // -> true

 

String.prototype.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 플래그를 사용하면 모든 매칭 결과를 반환한다.

 

4. 플래그

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

플래그	의미	설명
i	Ignore case	대소문자 구분하지 않고 패턴 검색
g	Global	패턴과 일치하는 모든 문자열을 전역 검색
m	Multi line	문자열의 행이 바뀌어도 패턴 검색을 계속

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

// target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색한다.
target.match(/is/);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색한다.
target.match(/is/i);
// -> ["Is", index: 0, input: "Is this all there is?", groups: undefined]

// target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색한다.
target.match(/is/g);
// -> ["is", "is"]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// -> ["Is", "is", "is"]

 

5. 패턴

문자열을 일정한 규칙을 표현하기 위해 사용하며, 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다.

 

문자열 검색

문자 또는 문자열을 지정하면 검색 대상 문자열에서 패턴으로 지정한 문자 또는 문자열을 검색한다.

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

// 'is' 문자열과 매치하는 패턴. 플래그가 생략되었으므로 대소문자를 구별한다.
const regExp = /is/;

// target과 정규 표현식이 매치하는지 테스트한다.
regExp.test(target); // -> true

// target과 정규 표현식의 매칭 결과를 구한다.
target.match(regExp);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

 

대소문자를 구별하지 않고 검색하려면 i 플래그를 사용한다.

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

// 'is' 문자열과 매치하는 패턴. 플래그 i를 추가하면 대소문자를 구별하지 않는다.
const regExp = /is/i;

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

 

패턴과 매치하는 모든 문자열을 전역 검색하려면 g 플래그를 사용한다.

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

// 'is' 문자열과 매치하는 패턴.
// 플래그 g를 추가하면 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
const regExp = /is/ig;

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

 

임의의 문자열 검색

. 은 임의의 문자 한 개를 의미한다.

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

// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;

target.match(regExp); // -> ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]

 

반복 검색

{m, n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. 콤마 뒤에 공백이 있으면 정상 동작하지 않는다.

const target = 'A AA B BB Aa Bb AAA';

// 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{1,2}/g;

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

 

{n}은 {n, n}과 동일하다.

const target = 'A AA B BB Aa Bb AAA';

// 'A'가 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{2}/g;

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

 

{n, }은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미한다.

const target = 'A AA B BB Aa Bb AAA';

// 'A'가 최소 2번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /A{2,}/g;

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

 

OR 검색

| 은 or의 의미를 갖는다.

const target = 'A AA B BB Aa Bb';

// 'A' 또는 'B'를 전역 검색한다.
const regExp = /A|B/g;

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

 

분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용한다.

const target = 'A AA B BB Aa Bb';

// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
const regExp = /A+|B+/g;

target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]

 

[] 내의 문자는 or로 동작하며 뒤에 +를 사용하면 앞선 패턴을 한 번 이상 반복한다.

const target = 'A AA B BB Aa Bb';

// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
const regExp = /[AB]+/g;

target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]

 

범위를 지정하려면 [] 애네 -를 사용한다.

const target = 'A ZZ B BB Aa Bb';

// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
const regExp = /[A-Z]+/g;

target.match(regExp); // -> ["A", "ZZ", "B", "BB", "A", "B"]

 

NOT 검색

[ ... ] 밖의 ^은 not의 의미를 갖는다.

const target = 'AA BB 12 Aa Bb';

// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;

target.match(regExp); // -> ["AA BB ", " Aa Bb"]

 

시작 위치로 검색

[ ... ] 밖의 ^은 문자열의 시작을 의미한다.

const target = 'https://poiemaweb.com';

// 'https'로 시작하는지 검사한다.
const regExp = /^https/;

regExp.test(target); // -> true

 

마지막 위치로 검색

$은 문자열의 마지막을 의미한다.

const target = 'https://poiemaweb.com';

// 'com'으로 끝나는지 검사한다.
const regExp = /com$/;

regExp.test(target); // -> true

 

 

참고 링크

정규 표현식 - JavaScript | MDN

📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제