[Javascript] 정규표현식

 

정규표현식(Regular Expression, 줄여서 RegEx)은 문자열에서 특정 패턴을 찾거나 매칭하는 데 사용되는 강력한 도구입니다. 텍스트 처리, 데이터 유효성 검사, 문자열 파싱 등 다양한 작업에 활용됩니다.

 

자바스크립트에서는 두 가지 방법으로 정규표현식을 생성할 수 있습니다.

// 리터럴 표기법
const regex = /pattern/;

// RegExp 객체 생성자
const regex = new RegExp("pattern");

 

기본 문법

---

리터럴 문자

일반 텍스트 문자로, 그대로 매칭됩니다.

const regex = /Yundogi/;
regex.test("Yundogi Dev"); // true

 

메타 문자

특별한 의미를 가진 문자들입니다.

• . : 임의의 한 문자
• ^ : 문자열의 시작
• $ : 문자열의 끝
• ** : 0회 이상 반복
• + : 1회 이상 반복
• ? : 0회 또는 1회
• \ : 이스케이프 문자

const regex = /^y.ndogi$/;
regex.test("yundogi"); // true
regex.test("yondogi"); // true
regex.test("yundogi hi"); // false

const regex2 = /^y.*i$/;
regex.test("yundogi hi"); // true

 

문자

대괄호 []로 묶어 표현합니다.

• [abc\] : a, b, c 중 하나와 매칭
• [^abc\] : a, b, c를 제외한 문자와 매칭
• [a-z\] : a부터 z까지의 소문자와 매칭
• [A-Z\] : A부터 Z까지의 대문자와 매칭
• [0-9\] : 0부터 9까지의 숫자와 매칭

const regex = /[aeiou]/;
regex.test("yundogi"); // true
regex.test("sky"); // false

 

약어 문자

자주 사용되는 문자 클래스에 대한 약어입니다.

• \d : 숫자 ([0-9]와 동일)
• \D : 숫자가 아닌 문자 ([^0-9]와 동일)
• \w : 단어 문자 ([A-Za-z0-9_]와 동일)
• \W : 단어 문자가 아닌 문자
• \s : 공백 문자 (스페이스, 탭, 줄바꿈 등)
• \S : 공백 문자가 아닌 문자

const regex = /\d{3}-\d{3}-\d{4}/;
regex.test("123-456-7890"); // true
regex.test("abc-def-ghij"); // false

 

플래그

---

정규식의 동작 방식을 수정하는 옵션입니다. 여러 플래그를 사용할 수 있으며, 이들은 정규식 리터럴의 끝이나 RegExp 객체의 생성자의 두 번째 인자로 지정할 수 있습니다.

const regex = /yundogi/gi;
// or
const regex = new RegExp('yundogi', 'gi');

순서는 중요하지 않습니다.

• g (global): 전역 검색을 수행합니다. 첫 번째 일치 후에도 계속해서 검색합니다.
• i (ignore case): 대소문자를 구분하지 않고 검색합니다.
• m (multiline): 여러 줄 모드를 활성화합니다. ^와 $가 각 줄의 시작과 끝에 매칭됩니다.
• s (dotAll): 이 개행 문자를 포함한 모든 문자와 매칭되도록 합니다.
• u (unicode): 유니코드 코드 포인트의 시퀀스로 문자열을 처리합니다.
• y (sticky): "sticky" 검색을 수행합니다. 문자열의 현재 위치에서부터만 검색합니다.

// 대소문자를 구분하지 않고 전역 검색
const regex1 = /hello/gi;
"Hello, hello, HELLO".match(regex1); // ["Hello", "hello", "HELLO"]

// 여러 줄 모드에서 각 줄의 시작 부분 검색
const regex2 = /^start/gm;
"start of line 1\nstart of line 2".match(regex2); // ["start", "start"]

// 유니코드 이모지 검색
const regex3 = /\p{Emoji}/gu;
"I love coffee ☕".match(regex3); // ["☕"]

 

자주 사용되는 패턴

---

이메일 주소

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
emailRegex.test("user@example.com"); // true

URL

const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
urlRegex.test("https://www.example.com"); // true

날짜 형식 (YYYY-MM-DD)

const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
dateRegex.test("2024-03-15"); // true

 

메소드

---

• test(): 패턴과 일치하는지 확인 (boolean 반환)
• exec(): 패턴과 일치하는 부분을 찾아 배열로 반환
• match(): 문자열 메소드, 일치하는 모든 결과를 배열로 반환
• replace(): 패턴과 일치하는 부분을 다른 문자열로 교체
• search(): 패턴과 일치하는 첫 번째 인덱스 반환

const text = "Hello, my number is 123-456-7890.";
const phoneRegex = /\d{3}-\d{3}-\d{4}/;

phoneRegex.test(text); // true
phoneRegex.exec(text); // ["123-456-7890", index: 24, input: "Hello, my number is 123-456-7890.", groups: undefined]
text.match(phoneRegex); // ["123-456-7890"]
text.replace(phoneRegex, "XXX-XXX-XXXX"); // "Hello, my number is XXX-XXX-XXXX."
text.search(phoneRegex); // 24

 

고급 기법

---

그룹과 캡처

괄호 ()를 사용하여 그룹을 만들고 캡처할 수 있습니다.

const regex = /(\d{3})-(\d{3})-(\d{4})/;
const match = regex.exec("My number is 123-456-7890");
console.log(match[1]); // "123"
console.log(match[2]); // "456"
console.log(match[3]); // "7890"

 

백레퍼런스

캡처된 그룹을 참조할 때 사용합니다.

const regex = /(\w+)\s+\1/;
regex.test("hello hello"); // true
regex.test("hello world"); // false

 

탐색

패턴을 매치하지만 결과에 포함시키지 않습니다.

• 긍정 전방탐색: (?=...)
• 부정 전방탐색: (?!...)
• 긍정 후방탐색: (?<=...)
• 부정 후방탐색: (?<!...)

const regex = /\d+(?=원)/;
console.log("5000원".match(regex)); // ["5000"]

const negativeRegex = /\d+(?!원)/;
console.log("5000달러".match(negativeRegex)); // ["5000"]

 

예제

---

비밀번호 복잡성 검증

function validatePassword(password) {
    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return regex.test(password);
}

console.log(validatePassword("Abcd1234!")); // true
console.log(validatePassword("password123")); // false

 

HTML 태그 제거

function stripHTMLTags(html) {
    return html.replace(/<[^>]*>/g, '');
}

const html = "<p>Hello <strong>World</strong>!</p>";
console.log(stripHTMLTags(html)); // "Hello World!"

 

CSV 파싱

function parseCSV(csv) {
    const rows = csv.split('\n');
    return rows.map(row => {
        return row.match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g).map(cell => {
            return cell.replace(/^"(.*)"$/, '$1');
        });
    });
}

const csv = `"Name","Age","City"
"John Doe",30,"New York"
"Jane Smith",25,"Los Angeles"`;

console.log(parseCSV(csv));