🎯 특정 패턴의 데이터 추출을 위해 정규표현식을 사용합니다. 짧고 압축적인 추상적 문법의 해석 방법을 알아보고 단위별로 나눠 이해하고자 합니다.

정규 표현식

/패턴(pattern)/플래그(flags)

문자열에서 특정 문자의 조합 패턴을 찾는 도구입니다. 슬래시(/)로 감싼 형태이며, 플래그(flags)는 선택 사항입니다.

표현방식

정규 표현식은 리터럴 방식과 생성자 방식으로 표현할 수 있습니다.

정규 표현식 리터럴

const re = /pattern/flags;

RegExp() 생성자

const re = new RegExp("pattern", "flags");

pattern

必 단순한 문자나 특수 문자의 조합으로 구성됩니다.

단순 패턴

정규표현식에 특수 문자가 포함되지 않은 일반 텍스트입니다.

const regex = /hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("hi world")); // false

특수 문자

정규표현식에서 특별한 의미를 가지는 문자를 말하며 어서션, 문자클래스, 그룹과 범위, 수량자, 유니코드 속성 이스케이프로 나뉩니다.

어서션(Assertions)

특정 조건이 충족되는지를 나타냅니다.

• ^ : 문자열의 시작

const regex = /^hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false

• $ : 문자열의 끝

const regex = /world$/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false

• \b : 단어 경계

const regex = /\bcat\b/;
console.log(regex.test("cat")); // true
console.log(regex.test("caterpillar"));  // false

• \B : 단어의 경계가 아닌 경우

const regex = /\Bcat\B/;
console.log(regex.test("scat")); // true
console.log(regex.test("cat")); // false

.
.
.

문자 클래스 (Character Classes)

특정 문자 집합과 매칭되는지를 나타냅니다.

• \ : 이스케이프 문자로, 특수 문자를 일반 문자로 취급

const regex = /\$/; // $를 문자로 매칭
console.log(regex.test("Price is $100")); // true

• . : 임의의 문자 (줄 바꿈 문자 \n 제외)

const regex = /h.t/;
console.log(regex.test("hat")); // true
console.log(regex.test("hit")); // true

• \d : digit 숫자 ([0-9])

const regex = /\d/;
console.log(regex.test("abc123")); // true

• \D : digit 숫자가 아닌 문자

const regex = /\D/;
console.log(regex.test("123")); // false
console.log(regex.test("abc")); // true

• \w : 단어 문자 ([a-zA-Z0-9_])

const regex = /\w/;
console.log(regex.test("hello_123")); // true

• \W : 단어 문자가 아닌 것

const regex = /\W/;
console.log(regex.test("hello123")); // false
console.log(regex.test("hello@123")); // true

• \s : 공백 문자

const regex = /\s/;
console.log(regex.test("hello world")); // true

• \S : 공백 문자가 아닌 것

const regex = /\S/;
console.log(regex.test(" ")); // false
console.log(regex.test("a")); // true

.
.
.

그룹과 범위 (Groups and Ranges)

특정 문자나 패턴의 그룹을 정의하거나, 범위를 지정합니다.

• [] : 문자 집합 중 하나라도 일치하면 매칭

const regex = /[aeiou]/; // 모음 매칭
console.log(regex.test("hello")); // true

• [^] : 제외할 문자 집합

const regex = /[^aeiou]/; // 모음을 제외한 문자
console.log(regex.test("hello")); // true (h, l 등 매칭)
console.log(regex.test("aeiou")); // false

• | : OR 조건

const regex = /cat|dog/;
console.log(regex.test("cat")); // true
console.log(regex.test("fish")); // false

• () : 그룹화

const regex = /(cat|dog)s/;
console.log(regex.test("cats")); // true

.
.
.

수량자 (Quantifiers)

특정 패턴이 몇 번 반복되는지 나타냅니다.

• ?: 0번 또는 1번 반복

const regex = /a?/;
console.log(regex.test("aaa")); // true
console.log(regex.test("b"));   // true

• * : 0번 이상(패턴이 없어도 매칭이 가능)

const regex = /ab*c/;
console.log(regex.test("ac")); // true
console.log(regex.test("abc")); // true

• + : 1번 이상(패턴이 적어도 한 번은 등장해야 매칭 가능)

const regex = /ab+c/;
console.log(regex.test("ac")); // false
console.log(regex.test("abc")); // true

• {n} : n번 반복

const regex = /a{2}/;
console.log(regex.test("a")); // false
console.log(regex.test("aa")); // true
console.log(regex.test("aaa"));  // true

• {n,m} : n번 이상, m번 이하

const regex = /a{2,4}/;
console.log(regex.test("aaa")); // true

.
.
.

유니코드 속성 이스케이프(Unicode property escapes)

특정 조건이 충족되는지를 나타냅니다.

• /\p{}/u : 특정 유니코드 속성 매칭 (플래그 u 필요)

const regex = /\p{Script=Greek}/u; // 그리스 문자
console.log(regex.test("Α")); // true

flags

패턴 매칭 범위나 조건을 유연하게 설정하는 옵션입니다.

• g (global)

기본적으로 정규표현식은 첫 번째 매칭만 반환하는데에 반해 문자열 전체에서 모든 매칭을 찾습니다.

const str = "apple apple orange";
const regex = /apple/g;
console.log(str.match(regex)); // ["apple", "apple"]

• i (ignore case)

대소문자를 구분하지 않고 매칭합니다.

const str = "Apple apple ORANGE";
const regex = /apple/i;
console.log(str.match(regex)); // ["Apple"]

• m (multiline)

기본적으로 ^와 $는 전체 문자열의 시작과 끝을 나타내는데에 반해, m 플래그를 사용하면 여러 줄에서도 각각 동작합니다.

const str = `apple
orange
banana`;
const regex = /^orange/m;
console.log(str.match(regex)); // ["orange"]

• s (dotAll)

기본적으로 .은 줄 바꿈 문자(\n) 제외 모든 문자와 매칭되지만, s 플래그를 사용하면 줄 바꿈 문자(\n)도 포함해 매칭 가능합니다.

const str = "apple\norange";
const regex = /apple.orange/s;
console.log(str.match(regex)); // ["apple\norange"]

• u (unicode)

이모지나 유니코드 문자처럼 단일 코드포인트로 표현되지 않는 문자도 매칭 가능합니다.

const str = "😀";
const regex = /\u{1F600}/u; // 유니코드 코드포인트
console.log(str.match(regex)); // ["😀"]

이모지가 단일 코드 포인트로 표현되지 않는 문자?
😀는 1개의 유니코드 문자이지만, 자바스크립트에서는 이를 두 개의 코드 포인트로 나눠서 처리합니다.

const emoji = "😀";
console.log(emoji.length); // 2 
console.log(emoji[0]); // "�" (첫 번째 코드 유닛)
console.log(emoji[1]); // "�" (두 번째 코드 유닛)

• y (sticky)

문자열에서 지정한 위치(lastIndex)부터 매칭을 시도합니다. 기본적으로 정규표현식은 문자열 어디서든 매칭을 찾으려고 하는데에 반해, y 플래그를 사용하면 매칭 시작 위치를 고정합니다.

const str = "apple orange";
const regex = /apple/y;
regex.lastIndex = 0; // 시작 위치 설정
console.log(regex.test(str)); // true
regex.lastIndex = 6; // "orange"부터 검색
console.log(regex.test(str)); // false

플래그 조합 사용

여러 플래그를 동시에 사용할 수 있습니다.

const str = "Apple apple ORANGE";
const regex = /apple/gi;
console.log(str.match(regex)); // ["Apple", "apple"]

정규표현식 연습 사이트

https://regexone.com/

레퍼런스
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode
🎥 https://www.youtube.com/watch?v=t3M6toIflyQ