웹 개발자라면 정규 표현식은 알아야지

출처: Microsoft copilot으로 제작

웹 개발에서 문자열을 처리하는 작업은 필수적입니다. 아이디를 입력할 때 입력 가능한 문자를 알파벳과 숫자로 제한하는 등, 문자열을 검사하고 처리하는 일은 쉽게 마주치는 일입니다. 이러한 검사를 수행하기 위해 문자열을 직접 다루려고 하면 코드는 금방 불어나 복잡해집니다. 대신 "정규 표현식"을 이용한다면, 더 간단하게 문자열을 처리할 수 있습니다. 정규 표현식은 구글이나 네이버같은 검색엔진, 워드 프로세서같은 텍스트 편집 소프트웨어에서도 쉽게 만날 수 있습니다. 구글과 네이버의 +, - 등 특수문자를 사용하여 검색을 필터링할 수 있는 것처럼 정규 표현식을 사용하면 문자열에 조건을 걸어줄 수 있습니다.

정규 표현식

정규 표현식은 대상 텍스트가 준수해야 하는 "패턴"을 패턴하기 위한 문법을 의미합니다. 이런 패턴의 표현을 통해 정해진 패턴과 일치하는지 검사하며, "특수 문자(혹은 메타 문자)"와 "정규 문자(리터럴 문자)"를 통해 패턴을 정의할 수 있습니다. 정규 문자는 문자 그대로를 의미하며, 해당 문자와 정확히 일치하는지를 확인합니다. 이와 달리 특수 문자는 지켜야할 규칙을 정하는 역할을 합니다. 이 특수 문자에 따라 정확한 일치부터 매우 포괄적인 의미의 일치까지 검사할 수 있습니다.

자바스크립트에서 정규 표현식 사용하기

자바스크립트에는 정규 표현식이 기본 문법에 객체로서 포함되어 있습니다. 정규 표현식의 리터럴은 다음과 같이 슬래시(/)로 표현하고자 하는 패턴을 감싸서 작성합니다. 생성사 함수로도 정규 표현식을 작성할 수 있습니다.

// 리터럴
regexp = /ab+c/

// RegExp 객체 생성자
regexp = new RegExp("ab+c");

let something = "dwa$"
regexp = new RegExp(`<${something}>`)

어떤 문법을 사용하던 위 예시에서의 regexp는 내장 클래스 RegExp의 인스턴스가 됩니다. 두 문법의 중요한 차이점은 /.../를 사용하면 문자열 템플릿 리터럴에서 ${...}를 사용했던 것처럼 중간에 표현식을 넣을 수 없다는 점입니다. 슬래시를 사용한 방법은 완전히 정적입니다. 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있습니다. 반면 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 런타임에 컴파일되는 객체 생성자를 호출하여야 합니다.

플래그 옵션

출처: 웹 프로그래밍 튜토리얼, 정규표현식(Regular Expression)

플래그는 일반적으로 정규 표현식을 이용한 검색에서 사용하며 플래그 없이 검색한다면, 여러 줄로 이루어진 문자열에서 검색 매칭 대상이 1개 이상이더라도 같은 줄의 첫번째 매칭한 대상만을 검색하고 종료합니다.

문자	설명
i	Ignore case, 대소문자를 구별하지 않음
g	Global, 문자열 내의 일치하는 모든 패턴, 해당 플래그가 없다면, 가장 처음 나오는 일치 패턴을 찾고 종료
m	Multi line, 줄바꿈 기호 \n을 하나의 새로운 시작점으로 인식

이 외에도 s, u, y의 3 가지 플래그가 더 있으나 거의 사용하지 않으므로 넘어가도록 하겠습니다. 궁금하시다면 여기를 참조하세요.

패턴 옵션

Anchors

문자	설명
^	지정된 패턴으로 시작하는 패턴
$	해당 문자열로 끝나는 패턴

 

/^Curt/ // Curt로 시작하는 패턴  "Curt write Poem"
/Poem$/ // Poem으로 끝나는 패턴  "Hi, Poem"
/^CurtPoem$/ // CurtPoem과 정확히 일치

Quantifiers

문자	설명
*	주어진 패턴이 0번 이상 반복되는 패턴
+	주어진 패턴이 1번 이상 반복되는 패턴
?	주어진 패턴이 최대 1번 반복되는 패턴 즉, 선택사항 문자
{n, m}	주어진 패턴이 n번 이상 m번 이하 반복되는 패턴, 하나의 숫자가 들어가면 해당 숫자만큼 반복되는 패턴을 의미

/CurtPo*em/ // * 패턴은 0회 이상의 해당 문자 일치, "CurtPem", "CurtPoooooem"
/Cu+rtPoem/ // .+ 패턴은 한 번 이상의 모든 문자 일치, "CuuurtPoem"
/Curt\s?Poem/ // \s? 패턴은 공백 문자가 선택 사항(0번 혹은 1번), "CurtPoem", "Curt Poem"
/CurtPoe{1,3}m/ // {1,3} 패턴은 해당 문자가 최소 한 번 최대 3번 반복되는 것과 일치
// "CurtPoem", "CurtPoeem", "CurtPoeeem"
/Curt{2}Poem/ // {2} 패턴은 해당 문자가 2번 반복되는 것과 일치, "CurttPoem"

여기서 /CurtPoem {1,3} /은 CurtPoemmmmmmmm처럼 m이 3번 이상 들어간 문자열도 패턴과 일치한 것으로 간주됩니다. 이유는 정규 표현식이 or 연산처럼 작동하기 때문입니다.

OR operator & Bracket expressions

문자	설명
a|b	|(or)로 나누어진 패턴 중 하나와 일치하는 패턴
[...]	대괄호 내부의 패턴 중 하나와 일치하는 패턴
[a-z]	알파벳 a부터 z까지 중 하나와 일치하는 패턴
[a-zA-Z0-9]	알파벳 a부터 z, A부터 Z, 숫자 0부터 9 중 하나와 일치하는 패턴
[^...]	대괄호 내부의 패턴 모두와 일치하지 않는(Not) 패턴

/(C|P)/ // C 또는 P가 포함된 문자열
/[Curt]/ // C, u, r, t 중 포함된 들어간 문자열
/[a-c]/ // a부터 c까지 중 포함된 들어간 문자열
/[^Curt]/ // C, u, r, t 모두가 포함되지 않은 문자열

Character classes

문자	설명
\d	숫자와 일치하는 패턴, \D는 숫자를 제외한 모든 문자와 일치하는 패턴
\w	언더바(_)를 포함한 알파벳과 숫자와 일치하는 패턴, /W는 글자, 숫자 또는 밑줄이 아닌 문자
\s	공백 문자와 일치하는 패턴, \S는 공백을 제외한 모든 문자와 일치하는 패턴
\b	단어의 경계, 즉 단어 사이의 공백과 일치하는 패턴, 해당 패턴 앞 뒤에 리터럴을 붙여 사용한다.
.	\n(줄바꿈 문자)을 제외한 모든 문자와 일치하는 패턴

/\d{3}-\d{4}-\d{4}/ // 하이픈(-)으로 연결된 전화번호가 포함된 패턴
/\W\W\W/ //(대문자) 글자, 숫자, 밑줄이 아닌 문자 3개가 연속되어 포함된 패턴
/\s/ // 공백이 포함된 문자 패턴
/\bCurt\b/ // Curt라는 패턴이 (띄어쓰기로 구분되어) 단독적으로 사용되는 패턴 "1feg Curt r2rfw"
/./ // 하나의 (줄바꿈을 제외한 모든)문자를 포함한 패턴

Grouping

문자	설명
()	패턴을 묶어 하나의 큰 패턴으로 만듦

/(Curt)+/ // Curt가 한 번이상 포함된 패턴 "CurtCurt"
/(Curt|Poem)/ // Curt 또는 Poem이 포함된 패턴

정규 표현식을 이용하여 유효성 검사하기

test 메서드는 가장 먼저 나오는 일치하는 패턴을 찾아 boolean 값을 반환합니다. 주의할 점은 or 연산처럼 가장 처음 조건에 만족하는 패턴을 만나면 더 이상 검사하지 않고 true를 반환합니다. 그래서 전체 문자열 중 해당하는 패턴이 하나라도 있으면 true를 반환합니다. 다음의 코드에서처럼 정규 표현식은 /CurtPoem?/ 이므로, 마지막에 m이 여러 개있다면 false를 반환할 것 같지만  true를 반환하죠.

/CurtPoem?/.test("CurtPoemmmmmmm") // true

그래서 ^와 $를 사용하여 전체 문자열을 검사하는 것이 좋습니다.

/CurtPoem?/.test("CurtPoemmmmmmm") // true
/CurtPoem?$/.test("CurtPoemmmmmmm") // false

/CurtPoem/.test("CCCCCCurtPoemmmmmm") // true
/^CurtPoem$/.test("CCCCCCurtPoemmmmmm") // false
/^CurtPoem+$/.test("CurtPoemmmmmm") // true

/(Curt)+/.test("CurtCur") // true
/^(Curt)+$/.test("CurtCur") // false

참고 자료

위키 백과, 정규 표현식
MDN, 정규 표현식
모던 JavaScript 튜토리얼, 정규 표현식
웹 프로그래밍 튜토리얼(모던 자바스크립트 Deep Dive), 정규표현식(Regular Expression)
[정규식] 핵심만 모아놓은 Cheat Sheet