1. JavaScript의 정규표현식 기초

JavaScript에서 정규표현식은 내장 객체로 제공됩니다. 정규표현식을 생성하는 방법은 크게 두 가지가 있습니다.

1.1 정규표현식 생성 방법

1.1.1 리터럴 패턴

리터럴 패턴은 슬래시(/)로 감싸서 정규표현식을 생성하는 가장 일반적인 방법입니다. 변수로 할당하지 않고 메서드에서도 바로 사용할 수 있습니다.

const regex1 = /hello/;                        // 기본 패턴
const regex2 = /hello/g;                       // 전역 검색
const emailRegex = /[\w.-]+@[\w.-]+\.\w+/g;   // 이메일 패턴

아래와 같이 실습해 볼 수 있습니다. match는 매칭된 결과를 배열로 반환합니다.

const text = 'weniv CEO leehojun, email: paul-lab@naver.com';
// 변수 할당
const pattern = /[\w.-]+@[\w.-]+\.\w+/g;
console.log(text.match(pattern));

// 바로 사용
console.log(text.match(/[\w.-]+@[\w.-]+\.\w+/g));

1.1.2 RegExp 생성자

동적으로 패턴을 생성해야 할 때 사용합니다. 여기서 동적이라 함은 고정된 값이 아니라 변수나 함수의 반환값을 사용하는 경우를 말합니다.

const regex1 = new RegExp('hello');
const regex2 = new RegExp('hello', 'g');
const userPattern = new RegExp(`${username}`, 'g');

아래와 같이 실습해볼 수 있습니다.

const text = 'weniv CEO leehojun, email: paul-lab@naver.com'
const username = 'paul-lab';
const pattern = new RegExp(`${username}`, 'g');
console.log(text.match(pattern));

1.2 플래그의 이해

1.2.1 주요 플래그

/pattern/g    // g: 전역 검색 (모든 일치 항목 찾기)
/pattern/i    // i: 대소문자 구분 없음
/pattern/m    // m: 다중 행 모드

1.2.2 플래그 조합

/hello/gi     // 대소문자 구분 없이 전역 검색
/^hello/gm    // 모든 행의 시작에서 hello 검색

1.2.3 플래그 활용

const text = 'hello Hello HELLO';
const pattern = /hello/gi;
console.log(text.match(pattern));  // ['hello', 'Hello', 'HELLO']

2. JavaScript의 정규표현식 메서드

JavaScript에서 정규표현식을 사용하는 메서드는 크게 두 가지 객체에서 제공됩니다.

2.1 RegExp 객체 메서드

2.1.1 test 메서드

패턴이 문자열과 매칭되는지 확인하여 매칭되는 경우 true를 반환합니다. 단순히 매칭 여부만 확인할 때 유용합니다.

const text = 'hello world'
const pattern = /hello/gm

pattern.test(text) // true

2.1.2 exec 메서드

매칭된 결과를 반환합니다. 결과는 매칭된 문자열, 인덱스, 입력 문자열을 포함하는 배열입니다. 매칭된 결과가 없으면 null을 반환합니다. 아래와 같이 사용할 수 있습니다.

const text = "hello world hello";
const pattern = /\w+/g;
let result;

while ((result = pattern.exec(text)) !== null) {
    console.log(result[0]); // 'hello', 'world', 'hello' 순서로 출력
}

2.2 String 객체의 정규표현식 메서드

2.2.1 match 메서드

match는 매칭된 결과를 배열로 반환합니다. 매칭된 결과가 없으면 null을 반환합니다.

const text = "hello world hello";
text.match(/\w+/g);  // ['hello', 'world', 'hello']
text.match(/Hello/i); // ['hello']

2.2.2 replace 메서드

첫 번째 인자로 전달된 패턴을 두 번째 인자로 전달된 값으로 치환합니다. 캡처 그룹을 사용하면 $1, $2 등으로 참조할 수 있습니다.

const text = "hello world";
text.replace(/o/g, '0');           // 'hell0 w0rld'
text.replace(/(\w+)\s(\w+)/, '$2 $1'); // 'world hello'
text.replace(/(\w+)\s(\w+)/, '$2!!$2!!'); // 'world!!world!!'

replace 메서드에서 $1, $2는 캡처 그룹을 참조합니다. 이를 활용하면 문자열의 순서를 바꾸거나 형식을 변환할 수 있습니다.

2.2.3 split 메서드

문자열을 패턴에 따라 분할하여 배열로 반환합니다.

"hello,world;hi".split(/[,;]/);  // ['hello', 'world', 'hi']

3. 실습 문제

3.1 기본 실습

// 실습 1: hello 찾기
const text = "hello Hello HELLO";

// 실습 2: URL 도메인 추출
const url = "https://github.com/LiveCoronaDetector/livecod";

// 실습 3: 괄호 내용 추출
const text2 = "hello (hello world) hello";

1. 주어진 텍스트에서 모든 "hello"를 찾아 대소문자 구분 없이 출력하세요.
2. URL 주소에서 도메인 이름만 추출하세요.
3. 괄호 안의 내용만 추출하세요.

3.2 문제 풀이

// 실습 1: hello 찾기
const text = "hello Hello HELLO";
console.log(text.match(/hello/gi));

// 실습 2: URL 도메인 추출
const url = "https://github.com/LiveCoronaDetector/livecod"
console.log(url.match(/https?:\/\/[\w.-]+/)[0]);

// 실습 3: 괄호 내용 추출
const text2 = "hello (hello world) hello";
console.log(text2.match(/\(.*\)/)[0]);