정규 표현식을 이용한 JavaScript 패턴 매칭: 종합 가이드

정규 표현식(regex)은 JavaScript에서 패턴 매칭 및 텍스트 조작을 위한 강력한 도구입니다. 개발자는 정의된 패턴을 기반으로 문자열을 검색, 유효성 검사 및 변환할 수 있습니다. 이 가이드는 JavaScript의 정규 표현식에 대한 포괄적인 개요를 제공하며 구문, 사용법 및 고급 기술을 다룹니다.

정규 표현식이란 무엇입니까?

정규 표현식은 검색 패턴을 정의하는 문자 시퀀스입니다. 이러한 패턴은 문자열을 일치시키고 조작하는 데 사용됩니다. 정규 표현식은 다음과 같은 작업에 프로그래밍에 널리 사용됩니다.

• 데이터 유효성 검사: 사용자 입력이 특정 형식(예: 이메일 주소, 전화 번호)을 준수하는지 확인합니다.
• 데이터 추출: 텍스트에서 특정 정보 검색(예: 날짜, URL 또는 가격 추출).
• 검색 및 바꾸기: 복잡한 패턴을 기반으로 텍스트를 찾고 바꿉니다.
• 텍스트 처리: 정의된 규칙에 따라 문자열을 분할, 결합 또는 변환합니다.

JavaScript에서 정규 표현식 만들기

JavaScript에서 정규 표현식은 두 가지 방법으로 만들 수 있습니다.

1. 정규 표현식 리터럴 사용: 슬래시(/) 안에 패턴을 묶습니다.
2. RegExp 생성자 사용: 패턴을 문자열로 사용하여 RegExp 객체를 만듭니다.

예:

// 정규 표현식 리터럴 사용
const regexLiteral = /hello/;

// RegExp 생성자 사용
const regexConstructor = new RegExp("hello");

두 방법 중 선택은 패턴이 컴파일 타임에 알려져 있는지 또는 동적으로 생성되는지에 따라 다릅니다. 패턴이 고정되어 미리 알려진 경우 리터럴 표기법을 사용합니다. 패턴을 프로그래밍 방식으로 빌드해야 하는 경우, 특히 변수를 통합할 때 생성자를 사용합니다.

기본 정규식 구문

정규 표현식은 일치시킬 패턴을 나타내는 문자로 구성됩니다. 다음은 몇 가지 기본 정규식 구성 요소입니다.

• 리터럴 문자: 문자 자체와 일치합니다(예: /a/는 문자 'a'와 일치).
• 메타 문자: 특별한 의미를 가집니다(예: ., ^, $, *, +, ?, [], {}, (), \, |).
• 문자 클래스: 문자 집합을 나타냅니다(예: [abc]는 'a', 'b' 또는 'c'와 일치).
• 수량자: 문자 또는 그룹이 발생해야 하는 횟수를 지정합니다(예: *, +, ?, {n}, {n,}, {n,m}).
• 앵커: 문자열의 위치와 일치합니다(예: ^는 시작 부분과 일치, $는 끝 부분과 일치).

일반적인 메타 문자:

• . (점): 줄 바꿈을 제외한 모든 단일 문자와 일치합니다.
• ^ (캐럿): 문자열의 시작 부분과 일치합니다.
• $ (달러): 문자열의 끝 부분과 일치합니다.
• * (별표): 선행 문자 또는 그룹의 0회 이상 발생과 일치합니다.
• + (더하기): 선행 문자 또는 그룹의 1회 이상 발생과 일치합니다.
• ? (물음표): 선행 문자 또는 그룹의 0회 또는 1회 발생과 일치합니다. 선택적 문자에 사용됩니다.
• [] (대괄호): 대괄호 안의 모든 단일 문자와 일치하는 문자 클래스를 정의합니다.
• {} (중괄호): 일치시킬 발생 횟수를 지정합니다. {n}은 정확히 n번 일치, {n,}은 n번 이상 일치, {n,m}은 n번과 m번 사이로 일치합니다.
• () (괄호): 문자를 함께 그룹화하고 일치하는 하위 문자열을 캡처합니다.
• \ (백슬래시): 메타 문자를 이스케이프하여 리터럴로 일치시킬 수 있습니다.
• | (파이프): "or" 연산자 역할을 하며, 앞이나 뒤의 표현식과 일치합니다.

문자 클래스:

• [abc]: 문자 a, b 또는 c 중 하나와 일치합니다.
• [^abc]: a, b 또는 c가 아닌 문자와 일치합니다.
• [a-z]: a에서 z까지의 모든 소문자와 일치합니다.
• [A-Z]: A에서 Z까지의 모든 대문자와 일치합니다.
• [0-9]: 0에서 9까지의 모든 숫자와 일치합니다.
• [a-zA-Z0-9]: 모든 영숫자와 일치합니다.
• \d: 모든 숫자와 일치합니다([0-9]과 동일).
• \D: 숫자가 아닌 모든 문자와 일치합니다([^0-9]과 동일).
• \w: 모든 단어 문자(영숫자 + 밑줄, [a-zA-Z0-9_]과 동일)와 일치합니다.
• \W: 단어가 아닌 모든 문자([^a-zA-Z0-9_]과 동일)와 일치합니다.
• \s: 모든 공백 문자(공백, 탭, 줄 바꿈 등)와 일치합니다.
• \S: 공백이 아닌 모든 문자와 일치합니다.

수량자:

• *: 선행 요소와 0회 이상 일치합니다. 예를 들어 a*는 "", "a", "aa", "aaa" 등과 일치합니다.
• +: 선행 요소와 1회 이상 일치합니다. 예를 들어 a+는 "a", "aa", "aaa"와 일치하지만 ""와는 일치하지 않습니다.
• ?: 선행 요소와 0회 또는 1회 일치합니다. 예를 들어 a?는 "" 또는 "a"와 일치합니다.
• {n}: 선행 요소와 정확히 n번 일치합니다. 예를 들어 a{3}는 "aaa"와 일치합니다.
• {n,}: 선행 요소와 n번 이상 일치합니다. 예를 들어 a{2,}는 "aa", "aaa", "aaaa" 등과 일치합니다.
• {n,m}: 선행 요소와 n번과 m번 사이로 일치합니다(포함). 예를 들어 a{2,4}는 "aa", "aaa" 또는 "aaaa"와 일치합니다.

앵커:

• ^: 문자열의 시작 부분과 일치합니다. 예를 들어 ^Hello는 "Hello"로 시작하는 문자열과 일치합니다.
• $: 문자열의 끝 부분과 일치합니다. 예를 들어 World$는 "World"로 끝나는 문자열과 일치합니다.
• \b: 단어 경계와 일치합니다. 이는 단어 문자(\w)와 단어가 아닌 문자(\W) 사이 또는 문자열의 시작 또는 끝 위치입니다. 예를 들어 \bword\b는 전체 단어 "word"와 일치합니다.

플래그:

정규식 플래그는 정규 표현식의 동작을 수정합니다. 정규식 리터럴의 끝에 추가하거나 RegExp 생성자에 두 번째 인수로 전달됩니다.

• g (전역): 첫 번째 일치 항목뿐만 아니라 패턴의 모든 일치 항목과 일치합니다.
• i (대소문자 무시): 대소문자를 구분하지 않는 일치를 수행합니다.
• m (여러 줄): 여러 줄 모드를 활성화합니다. 여기서 ^ 및 $는 각 줄의 시작과 끝(\n으로 구분됨)과 일치합니다.
• s (dotAll): 점(.)이 줄 바꿈 문자와도 일치하도록 허용합니다.
• u (유니코드): 전체 유니코드 지원을 활성화합니다.
• y (sticky): 정규식의 lastIndex 속성으로 표시된 인덱스에서만 일치합니다.

JavaScript 정규식 메서드

JavaScript는 정규 표현식 작업을 위한 여러 메서드를 제공합니다.

• test(): 문자열이 패턴과 일치하는지 테스트합니다. true 또는 false를 반환합니다.
• exec(): 문자열에서 일치 항목을 검색합니다. 일치하는 텍스트와 캡처된 그룹이 포함된 배열을 반환하거나, 일치하는 항목이 없으면 null을 반환합니다.
• match(): 정규 표현식에 대해 문자열을 일치시킨 결과가 포함된 배열을 반환합니다. g 플래그의 유무에 따라 다르게 동작합니다.
• search(): 문자열에서 일치 항목을 테스트합니다. 첫 번째 일치 항목의 인덱스를 반환하거나, 일치하는 항목이 없으면 -1을 반환합니다.
• replace(): 패턴의 발생을 대체 문자열 또는 대체 문자열을 반환하는 함수로 바꿉니다.
• split(): 정규 표현식을 기반으로 문자열을 하위 문자열 배열로 분할합니다.

정규식 메서드를 사용한 예:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // 출력: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // 출력: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// 'g' 플래그가 있는 match()
const regex3 = /\d+/g; // 하나 이상의 숫자를 전역적으로 일치시킵니다.
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // 출력: ["123", "456"]

// 'g' 플래그가 없는 match()
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // 출력: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // 출력: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // 출력: hello JavaScript

// 함수가 있는 replace()
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // 출력: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // 출력: ["apple", "banana", "cherry"]

고급 정규식 기술

캡처 그룹:

괄호 ()는 정규 표현식에서 캡처 그룹을 만드는 데 사용됩니다. 캡처된 그룹을 사용하면 일치하는 텍스트의 특정 부분을 추출할 수 있습니다. exec() 및 match() 메서드는 첫 번째 요소가 전체 일치 항목이고 후속 요소가 캡처된 그룹인 배열을 반환합니다.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // 출력: 2023-10-27 (전체 일치 항목)
console.log(match[1]); // 출력: 2023 (첫 번째 캡처된 그룹 - 연도)
console.log(match[2]); // 출력: 10 (두 번째 캡처된 그룹 - 월)
console.log(match[3]); // 출력: 27 (세 번째 캡처된 그룹 - 일)

명명된 캡처 그룹:

ES2018은 (?...) 구문을 사용하여 캡처 그룹에 이름을 할당할 수 있는 명명된 캡처 그룹을 도입했습니다. 이렇게 하면 코드를 더 읽기 쉽고 유지 관리할 수 있습니다.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // 출력: 2023
console.log(match.groups.month); // 출력: 10
console.log(match.groups.day);   // 출력: 27

비캡처 그룹:

캡처하지 않고 정규식의 일부를 그룹화해야 하는 경우(예: 수량자를 그룹에 적용하기 위해) (?:...) 구문을 사용하여 비캡처 그룹을 사용할 수 있습니다. 이렇게 하면 캡처된 그룹에 대한 불필요한 메모리 할당을 피할 수 있습니다.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // URL과 일치하지만 도메인 이름만 캡처합니다.
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // 출력: www.example.com

Lookarounds:

Lookarounds는 lookbehind(앞) 또는 lookahead(뒤) 패턴을 기반으로 문자열의 위치와 일치하는 0 너비 어설션으로, 일치 자체에 lookaround 패턴을 포함하지 않습니다.

• 긍정적 Lookahead: (?=...) lookahead 내의 패턴이 현재 위치를 따르는 경우 일치합니다.
• 부정적 Lookahead: (?!...) lookahead 내의 패턴이 현재 위치를 따르지 않는 경우 일치합니다.
• 긍정적 Lookbehind: (?<=...) lookbehind 내의 패턴이 현재 위치를 앞서는 경우 일치합니다.
• 부정적 Lookbehind: (? lookbehind 내의 패턴이 현재 위치를 앞서지 않는 경우 일치합니다.

// 긍정적 Lookahead: USD가 뒤에 오는 경우에만 가격을 가져옵니다.
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // 출력: ["100"]

// 부정적 Lookahead: 숫자가 뒤에 오지 않는 경우에만 단어를 가져옵니다.
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // 출력: null, match()는 'g' 플래그 없이 첫 번째 일치 항목만 반환하기 때문에 필요한 항목이 아닙니다.
// 수정 방법:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // 출력: [ 'banana' ]

// 긍정적 Lookbehind: $가 앞에 오는 경우에만 값을 가져옵니다.
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // 출력: ["200"]

// 부정적 Lookbehind: 'not'이라는 단어가 앞에 오지 않는 경우에만 단어를 가져옵니다.
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // 출력: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // 출력: true
console.log(emailRegex.test("invalid-email"));       // 출력: false
console.log(emailRegex.test("test@sub.example.co.uk")); // 출력: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*) /g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // 출력: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //수정된 CSV 정규식
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // 출력: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // 출력: true (미국 예제)
console.log(phoneRegex.test("+44 20 7946 0500")); // 출력: true (영국 예제)
console.log(phoneRegex.test("+81 3 3224 5000"));  // 출력: true (일본 예제)
console.log(phoneRegex.test("123-456-7890"));   // 출력: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // 출력: true
console.log(passwordRegex.test("password"));       // 출력: false (대문자 또는 숫자 없음)
console.log(passwordRegex.test("Password"));       // 출력: false (숫자 없음)
console.log(passwordRegex.test("Pass123"));        // 출력: false (소문자 없음)
console.log(passwordRegex.test("P@ss1"));          // 출력: false (8자 미만)