FE
JavaScript 정규식(Regular Expression) 가이드
| 서론
이번 우아한테크코스 프리코스 미션을 하다가 split 메서드를 사용해서 문자열을 처리하는 것은 복잡한 단점이 있었다.
깔끔하게 자르는 과정이 필요했던 찰나, 이를 편하게 해줄 수 있는 장치로 '정규식(Regular Expression)에 대해서 공부하고 사용 방법에 익숙해보고 싶은 생각이 들었다.
그래서 오늘은 JavasScript 정규식에 대해서 알아보려고 한다.
| 1. 정규식(Regular Expression)이란?
정규식(Regular Expression, 줄여서 RegEx)은 문자열 안에서 특정 패턴을 검색, 추출, 치환하기 위한 패턴 언어이다.
예를 들어, 아래와 같은 경우에 모두 정규식을 사용하면 단 몇 줄로 해결 가능하다.
이메일 주소인지 확인하거나
전화번호 형식을 검증하거나
문자열에서 숫자만 추출할 때
| 2. 정규식 기본 문법
정규식은 슬래시(/) 사이에 패턴을 적는 형태로 표현된다.
const pattern = /abc/;: 이건 문자열 안에 'abc'라는 연속된 문자가 들어있는지를 찾는 패턴이다.
1) 예시
/abc/.test('I know abc'); // true
/abc/.test('xyz'); // false| 3. 정규식의 주요 구성 요소
정규식의 주요 구성 요소는 다양하게 존재한다. 아래의 표를 참고해서 이해해보자.
구분 | 기호 | 설명 | 예시 |
문자 클래스 | [ ] | 특정 문자 중 하나를 의미 | /[abc]/ → a, b, c 중 하나 |
부정 클래스 | [^ ] | 특정 문자를 제외한 문자 | /[^0-9]/ → 숫자가 아닌 문자 |
범위 지정 | - | 문자 범위 지정 | /[a-z]/, /[A-Z]/, /[0-9]/ |
반복 수량자 | +, *, ?, {n,m} | 패턴 반복 횟수 지정 | /a+/ → a가 1회 이상 |
특수 문자 | . | 임의의 문자 한 개 | /h.t/ → hat, hot 등 |
그룹화 | ( ) | 패턴 그룹 지정 | /(ab)+/ → ab, abab 등 |
이스케이프 | \\ | 특수문자를 문자 그대로 사용 | /\./ → 실제 점(.) 문자 |
문자열 경계 | ^, $ | 문자열 시작/끝 | /^abc$/ → 정확히 “abc”만 일치 |
| 4. 정규식 플래그 (flags)
정규식은 단순히 패턴만 정의하는 게 아니라, 플래그(flag) 를 통해 검색의 범위와 방식까지 제어할 수 있다.
같은 /hello/ 라도, 대소문자를 구분할지(i), 모든 항목을 찾을지(g), 혹은 여러 줄에 걸쳐 탐색할지(m)에 따라 결과가 달라진다.
아래는 자바스크립트에서 자주 사용하는 정규식 플래그 목록이다.
플래그 | 의미 | 설명 |
g | global | 모든 일치 항목 검색 |
i | ignore case | 대소문자 구분 안 함 |
m | multiline | 여러 줄에서 검색 가능 |
s | dotAll | .이 개행 문자(\n)도 포함 |
u | unicode | 유니코드 모드로 처리 |
1) 예시
const str = 'Hello hello HELLO';
console.log(str.match(/hello/gi)); // ['Hello', 'hello', 'HELLO']| 5. 자주 쓰이는 정규식 메서드
문자열 계산기 미션을 하다 보면 "1,2:3"처럼 다양한 구분자로 나뉜 숫자를 처리해야 하는데, 이때 단순한 split(',')으로는 한계가 있다.
하지만 정규식을 함께 쓰면 여러 구분자를 한 번에 처리할 수 있다.
아래는 그런 상황에서 자주 사용하는 정규식 메서드들이다.
메서드 | 설명 | 반환값 |
test() | 문자열이 패턴과 일치하는지 확인 | true / false |
match() | 패턴과 일치하는 모든 결과를 배열로 반환 | Array or null |
replace() | 패턴에 일치하는 부분을 새 문자열로 교체 | String |
split() | 패턴을 기준으로 문자열 분리 | Array |
1) 예시
const str = '1,2:3';
const result = str.split(/,|:/);
console.log(result); // ['1', '2', '3']| 6. 특수문자 이스케이프 처리 (RegExp.escape 패턴)
정규식에서 . * + ? 같은 문자는 의미가 있는 예약 문자이기 때문에, 이걸 문자 그대로 사용하려면 백슬래시(\)로 이스케이프해야 한다.
const delimiter = '*';
const escaped = delimiter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
console.log(escaped); // '\*'
const regex = new RegExp(escaped);
console.log('1*2*3'.split(regex)); // ['1', '2', '3']위의 예시를 살펴보면, 사용자 정의 구분자(//;\n1;2;3)가 특수문자라도 오류 없이 처리할 수 있게 한다.
| 7. 실제 예시로 보는 활용 — StringCalculator의 정규식
const customMatch = input.match(/^\/\/(.+?)\\n([\d\D]+)$/);부분 | 의미 |
^// | 문자열이 //로 시작 |
(.+?) | 커스텀 구분자 (탐욕적이지 않게 최소 1자) |
\\n | 실제 줄바꿈 문자 \n |
([\d\D]+) | 숫자(\d)와 문자(\D) 모두 포함 — 즉, 전체 문자열 |
$ | 문자열 끝 |
즉, "//;\n1;2;3" 형태의 입력을 ; 구분자와 "1;2;3" 본문으로 분리한다.
| 8. 정규식 작성 팁
정규식 작성을 어떻게 하면 더 편하게 시작할 수 있을지에 대해서 알아본 결과 아래의 네 단계의 팁이 있었다.
1) 작은 단위부터 테스트하기 → 처음부터 복잡한 정규식 만들지 말고 점진적으로 빌드
2) 항상 test()나 match()로 중간 확인하기
3) 가독성을 위해 주석을 달기 (x 플래그는 JS에서는 미지원)
4) 너무 복잡하면 정규식 대신 문자열 메서드(includes, startsWith) 사용 고려
| 결론
정규식은 초반엔 어렵지만, 패턴의 원리를 이해하고 나면 문자열 처리 속도가 압도적으로 빨라진다는 것을 체감할 수 있었다.
특히 사용자 입력을 파싱하거나 문자열을 안전하게 다루는 데 특히 강력하다는 점도 알게 되었따.