#031. 정규 표현식 살짝 맛보기😵‍💫

정규 표현식? 들어는 봤는데 ..

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서 정규 표현식 또한 객체로 RegExp 의 메서드인 exec(), test() 뿐만 아니라 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드도 사용할 수 있다.

 

정규 표현식 만들기

1. 리터럴 표기법

리터럴 표기법의 매개변수는 따옴표를 사용하지 않고, /pattern/flags의 순서로 작성한다.

const reg = /FE-DEV/g;

리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일한다. 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하게 되면 정규 표현식을 매번 다시 컴파일 하지 않기 때문에 정규 표현식이 바뀌지 않는 경우에는 리터럴 표기법을 사용하여 성능을 향상시킬 수 있다.

 

2. 생성자 함수

new RegExp(pattern[, flags])로 작성하며 플래그는 추가하지 않을 수도 있다.

ES5부터 생성자 표기법에 한정하여 패턴에 RegExp 객체 혹은 리터럴을 사용할 수 있다. 패턴은 정규 표현식 특수 문자를 포함할 수 있어서 다양한 범위의 값을 판별할 수 있다.

const reg = new RegExp(/FE-DEV/, "g");
const reg = new RegExp("FE-DEV", "g");

생성자 함수를 사용하면 정규 표현식은 런타임에 컴파일된다. 정규 표현식이 바뀔 가능성이 있거나, 사용자 입력과 같은 입력값을 패턴에서 사용하는 경우 생성자 함수를 사용한다.

 

위의 리터럴 표기법과 생성자 함수로 생성한 정규 표현식이 동일하게 동작하는 것을 확인할 수 있다.

const str = '나는 FE-DEV이다.';
const reg1 = /FE-DEV/g;
const reg2 = new RegExp("FE-DEV", "g");

console.log(str.replace(reg1, "CEO")); // 나는 CEO이다.
console.log(str.replace(reg2, "CEO")); // 나는 CEO이다.

 

정규 표현식의 플래그

플래그는 단독으로 사용하거나 여러 개를 지정하여 사용할 수 있다. 여러 개를 지정할 때는 순서에 상관 없이 사용할 수 있다.

• g (global, 전역 탐색) - 문자열 전체에서 지정한 패턴에 맞는 값을 모두 판별한다.
• i (ignore case, 대소문자 무시) - 대소문자를 구분하지 않고 판별한다.
• m (multiline, 여러 줄) - 여러 줄에 걸쳐 탐색한다. ^(처음), $(끝) 특수문자가 전체 문자열의 맨 처음 혹은 맨 끝에 나오는 패턴만을 찾는 것이 아닌 \n이나 \r로 구분되는 각각의 줄의 처음과 끝에 나오는 패턴도 탐색한다.
• s (dotAll) - 모든 문자를 탐색하는 . 특수 문자가 개행 문자(\n)도 탐색할 수 있게 한다.

// test(): 매개변수의 문자열이 정규 표현식을 만족하면 true, 그렇지 않다면 false를 반환한다.
console.log(/./.test('\n')); // false
console.log(/./s.test('\n')); // true

• u(unicode) - 패턴을 Unicode 코드 포인트 시퀀스로 처리한다. 이 플래그를 사용하여야 정규 표현식 패턴에서 유니코드 관련 패턴(\u, \p{...})을 판별할 수 있다.

// 예제 참고: https://a3magic3pocket.github.io/posts/js-unicode-regex/
const str = "😀😁😂🤣😃";
const regWithoutFlagU = /[\u{1F004}-\u{1F9E6}]|[\u{1F600}-\u{1F9D0}]/g;
const regFlagU =  = /[\u{1F004}-\u{1F9E6}]|[\u{1F600}-\u{1F9D0}]/gu;

console.log(regWithoutFlagU.test(str)); // SyntaxError
console.log(regFlagU.test(str)); // true

• y (sticky) - 이 플래그를 사용하면 정규 표현식의 lastIndex 속성에 명시된 인덱스에서만 판별하고, 이전/이후 인덱스에서는 판별을 시도하지 않는다.

 

정규 표현식 연습하기

아래의 사이트를 이용하면 정규 표현식을 쉽게 연습해볼 수 있다.

RegExr: Learn, Build, & Test RegEx

 

• 일반 문자열

 

• ^ - 문자열에서 처음 나오는 패턴을 탐색 / $ - 문자열에서 끝에 나오는 패턴을 탐색

 

• . - 모든 문자를 매칭한다. 기존의 e 자리에 대신에 어떤 문자가 오든 매칭할 수 있다.

 

• [] - 대괄호 안에 있는 패턴 중 하나를 선택한다. 아래의 패턴은 hello 또는 hallo를 매칭한다.

 

• - - 범위 안의 패턴을 매칭한다.

/[a-zA-Z0-9]/g		// 모든 알파벳과 숫자 중에 하나의 문자 매칭
/[^a-zA-Z0-9]/g		// 모든 알파벳과 숫자가 아닌 그 외의 문자 매칭

 

• ^(not) - 패턴의 맨 앞이 아닌 대괄호 안의 ^는 부정을 의미한다. 해당 패턴을 제외한 문자열을 매칭한다. 아래의 패턴은 hello, hallo가 아닌 hollo를 매칭한 것을 볼 수 있다.

 

• 수량자(*, +, ?, {}) - 해당 패턴의 수량에 맞는 문자를 탐색한다.

_* 또는 {0,}		// 앞에 있는 문자가 0개 ~ N개
_+ 또는 {1,}		// 앞에 있는 문자가 1개 ~ N개
_? 또는 {0,1}		// 앞에 있는 문자가 0개 ~ 1개

{2}		// 앞의 있는 문자가 2개
{3,4}	// 앞의 있는 문자가 3개 ~ 4개

0-9까지의 숫자가 3개, 대쉬(-), 0-9까지의 숫자가 4개 ~ 5개, 대쉬(-), 0-9까지의 숫자가 4개로 구성되어 있는 문자열을 탐색한다.

 

모든 알파벳 혹은 -, .이 1개 이상, at(@), 소문자 알파벳 혹은 .이 1개 이상, dot(.), 소문자 알파벳이 1개 이상 구성되어 있는 문자열을 탐색한다.

뒤에 \.[a-z]+가 없다면 하단의 gildong@naver도 같이 탐색된다.

특수 문자를 문자열 패턴으로 사용할 경우, 앞에 역 슬래시(\)를 넣어주어 정규 표현식 특수 문자와 헷갈리지 않게 구분하는 것이 좋다.

 

• 자주 사용되는 문자 클래스

/\w/g        // 모든 알파벳, 숫자, 밑줄 탐색, [a-zA-Z0-9_]와 동일
/\W/g        // 모든 알파벳, 숫자, 밑줄이 아닌 그 외를 탐색, [^a-zA-Z0-9_]와 동일
/\d/g        // 모든 숫자를 탐색, [0-9]와 동일
/\D/g        // 모든 숫자가 아닌 그 외를 탐색, [^0-9]와 동일
/\s/g        // 공백, 탭, 양식 공급(form feed) 줄 바꿈 및 기타 유니코드 공백을 탐색
/\S/g        // 공백 이외의 단일 문자를 탐색

 

Reference

정규 표현식

유니코드: 'u' 플래그와 \p{...} 클래스

문자 클래스