정규 표현식

[모던 자바스크립트 딥다이브] 정규 표현식

참조

정규 표현식이란

정규 표현식은 일정 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 입니다.
정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공합니다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말합니다.

예로, 회원가입 화면에서 사용자로부터 입력받은 휴대폰 전화번호가 유효한 휴대폰 전화번호인지 체크하는 경우를 생각해 봅시다. 휴대폰 번호는 다음과 같은 패턴이 존재합니다.(한국 기준)
숫자 3개 + '-' + 숫자 4개 + '-' + 숫자 4개 라는 일정한 패턴이 있죠. 이 휴대폰 전화번호 패턴을 다음과 같이 정규표현식을 사용해 체크할 수 있습니다.

js
// 사용자로부터 입력받은 전화번호
const tel = '010-1234-567구'

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

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

만일 이와 같이 정규표현식을 사용하지 않는다면 반복문, 조건문을 통해 문자를 순회하여 조건을 강구해야 할 것입니다. 다만 정규표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합해 사용하기 때문에 가독성이 좋지 않다는 문제가 있습니다.

정규 표현식의 생성

정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있습니다. 일반적인 방법은 정규 표현식 리터럴을 사용하는 것입니다. 정규표현식은 다음과 같은 형태로 표현할 수 있습니다. [정규 표현식 그림 들어갈 곳]

아래는 예시 코드입니다.

js
const target = "Is this all there is?";

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

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

생성자 함수 RegExp를 이용해 RegExp객체를 생성할 수 있죠.

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

new RexExp(pattern[, flags])

다음이 예시 코드입니다.

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

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

regexp.test(target); // true

다음과 같이 변수를 사용해 동적으로 RegExp 객체를 생성할 수 있습니다. 현재로선 동적으로 사용할 수 있다는 것을 이해하고 RegExp 메서드가 무엇인지는 다음에서 설명하겠습니다.

js
// str, char 매개변수를 받는 함수를 선언하여 match메서드를 이용한다. 
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

RegExp 메서드

정규 표현식을 사용하는 메서드는 아래와 같습니다.

  • RegExp.prototype.exec
  • RegExp.prototype.test
  • RegExp.prototype.match
  • RegExp.prototype.replace
  • RegExp.prototype.search
  • RegExp.prototype.split

이중 exec, test, match 메서드에 살펴보겠습니다.

exec

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

js
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플래그를 지정하더라도 첫 번째 매칭 결과만 반환합니다.

test

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

js