JavaScript 정규 표현식(RegExp)

⏰ 2024.11.28 (D+36)

1. 정규 표현식(RegExp)란?

• 문자열에서 특정 패턴을 찾고, 일치하는 부분을 추출하거나 치환하는 데 매우 유용한 도구
• JavaScript에서 정규 표현식을 사용할 때 여러 방법으로 RegExp 객체를 생성
• 문자열에서 패턴을 확인하고 처리 가능

2. RegExp 객체 생성

🔔 정규 표현식 객체는 여러 방법으로 생성 가능

✅ 리터럴 표기법: /\d{2}/ (두 자리 숫자 패턴)

var regexp1 = /\d{2}/;

✅ 생성자 표기법: new RegExp("\d{2}")

var regexp2 = new RegExp("\\d{2}");

✅ RegExp 객체를 사용: new RegExp(/\d{2}/)

var regexp3 = new RegExp(/\d{2}/);

3. 패턴 일치 확인

🔔 정규 표현식의 패턴과 문자열을 비교하여 일치 여부를 확인

RegExp.test()

: 주어진 문자열에 패턴이 일치하면 true, 그렇지 않으면 false를 반환

var str = 'AB100CDE98FGHI';
var regexp1 = new RegExp(/\d{2}/);
console.log(regexp1.test(str));  // true (일치하면 true)

String.match(RegExp)

: 주어진 문자열에서 패턴과 일치하는 부분을 배열로 반환

• g 옵션을 사용하지 않으면 첫 번째 일치하는 부분만 반환하고,
• g 옵션을 사용하면 모든 일치하는 부분을 배열로 반환

var str = 'AB100CDE98FGHI';
var regexp1 = new RegExp(/\d{2}/);
console.log(regexp1.test(str));  // true (일치하면 true)

RegExp.exec()

: 패턴에 맞는 첫 번째 부분을 배열로 반환

• g 옵션에 상관없이 항상 첫 번째 일치하는 부분만 반환

console.log(regexp1.exec(str));  // ['10']

4. g 옵션 사용

• g 옵션을 사용하면 문자열 내에서 모든 일치하는 패턴을 찾고 배열로 반환

var regexp2 = new RegExp(/\d{2}/, 'g');
console.log(str.match(regexp2));  // ['10', '98']

5. 패턴 추출

• 정규 표현식에서 괄호 ()를 사용하여 그룹을 생성하면, 그 그룹을 통해 패턴을 추출

var str2 = "[17.07.11 23:29:11] [INFO ]  [eclipse.galileo-bean-thread-50618297] - ##message";
var regexp3 = /\[(\d{2}\.\d{2}\.\d{2} \d{2}:\d{2}:\d{2})\]\s\[(info)\]\s\[(.+)\]\s-\s##(.+)/i;
var result = str2.match(regexp3);
console.log(result[1]);  // '17.07.11 23:29:11' (첫 번째 그룹: 날짜)
console.log(result[2]);  // 'info' (두 번째 그룹: 로그 레벨)
console.log(result[3]);  // 'eclipse.galileo-bean-thread-50618297' (세 번째 그룹: 스레드 정보)
console.log(result[4]);  // 'message' (네 번째 그룹: 메시지)

6. 여러 행 모드 (m 플래그)

• m 플래그를 사용하면 여러 행에서 ^와 $가 각 행의 시작과 끝에서도 작동하도록 생성
• ^는 행의 시작을, $는 행의 끝을 의미

var str4 = `#국어
영어
#산수
미술
#음악`;
var regexp4 = /^\s*#[가-힣]+/gm;
console.log(str4.match(regexp4));  // ['#국어', '#산수', '#음악']

7. 이메일 검증

• 사용자가 입력한 이메일 주소가 올바른 형식인지 검사
• .com 뒤의 도메인을 추출하는 기능을 구현

function checkEmail() {
    var email = document.querySelector('[type=email]').value;
    var pattern = /\w+@(\w+)\.com/i;
    if (!pattern.test(email)) {
        alert('이메일 형식이 아닙니다');
        return;
    }
    console.log(RegExp.$1);  // '@' 뒤의 도메인 이름 출력
}