본문 바로가기
코드잇 스프린트 6기/JS Q.R 스터디

[JS Q.R] RegExp

by 학습하는 청년 2024. 5. 3.

최종 수정 : 2024-05-03

31장. RegExp

1. 정규 표현식이란?

정규 표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(*formal language)다. 자바스크립트의 고유 문법은 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.

 

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

const tel1 = '010-1234-5678';
const tel2 = '010-1234-567팔';

// 리터럴로 휴대폰 전화번호의 숫자 (3)-(4)-(4) 패턴을 정의
const regEx[ = /^\d{3}-\d{4}-\d{4}$/;

regExp.test(tel1); // true
regExp.test(tel2); // false

 

정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다. 다만 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성은 좋지 않다.


2. 정규 표현식의 생성

정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 정규 표현식 리터럴은 패턴과 플래그로 구성된다.

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

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

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

 

생성자 함수를 사용하면 객체를 생성할 수도 있으며, 변수를 사용하여 동적으로 생성할 수도 있다.

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

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

regexp.test(target); // true

// 변수를 사용하여 동적으로 생성
const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;

count('Is this all there is?','is'); // 3
count('Is this all there is?','xx'); // 0

3. 플래그

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

플래그 의미 설명
i lgnore case 대소문자를 구별하지 않고 패턴을 검색
g Global 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
m Multi line 문자열의 행이 바뀌더라도 패턴 검색을 계속 수행

 

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


4. RegExp 메서드

RegExp.prototype.exec

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

 

RegExp.prototype.test

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

 

String.prototype.match

대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.
const target = 'Is this all there is?';
const regExp = /is/;

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

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

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

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


5. 패턴

패턴은 문자열의 일정한 규칙을 표현하기 위해 사용한다. /로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함하면 그것까지도 패턴에 포함되어 검색된다. 또한 패턴은 특별한 의미를 가지는 메타문자(meta character) 또는 기호로 표현할 수 있다. 

 


참고 자료

모던 자바스크립트 Deep Dive (p.578-582 + 추가 작성해야 한다.)

댓글