정규 표현식

정규 표현식(Regular Expression, RegExp)은 문자열에서 패턴을 찾거나 특정 문자열을 대체하거나 추출할 때 사용하는 도구이다. JavaScript에서는 RegExp 객체를 사용하여 정규 표현식을 생성하고 이를 문자열과 매칭하거나 다양한 작업을 수행할 수 있다.

기본 구문

정규 표현식은 슬래시(/) 사이에 패턴을 적어서 정의한다. 예를 들어, /pattern/ 형태로 사용된다.

기본 패턴

단순 문자

문자 그대로 매치된다. 예를 들어, /a/는 문자열에서 a를 찾는다.

메타 문자

특수한 의미를 가지진다.

. : 어떤 문자 하나와 일치합니다.
^ : 문자열의 시작과 일치합니다.

^apple

apple pie는 매치된다.
pineapple은 매치되지 않는다.

apple[^0-9]

apple: 문자열에서 'apple'이라는 문자열과 정확히 일치해야 한다.
[^0-9]: 이 부분은 대괄호 안에 ^ 기호가 있으므로, 숫자가 아닌 문자와 일치해야 한다. 여기서는 숫자 0부터 9까지의 범위를 표현하는 [0-9]와 반대인 숫자가 아닌 문자를 의미한다.

$ : 문자열의 끝과 일치합니다.
* : 앞의 패턴이 0개 이상 나타날 때 매치됩니다.
+ : 앞의 패턴이 1개 이상 나타날 때 매치됩니다.
? : 앞의 패턴이 0개 또는 1개 일치할 때 매치됩니다.
\ : 특수 문자를 이스케이프할 때 사용합니다.
S: 공백이 아닌 한 글자(특수 문자 포함)와 일치한다. 즉, 모든 문자와 숫자, 특수 문자 중에서 하나와 매치된다.

const str = "Hello, number 7 Sonny!";
const regx = /\S/g;
console.log(str.match(regx));
// ['H', 'e', 'l', 'l', 'o', 'n', 'u', 'm', 'b', 'e', 'r', '7', ',', 'S', 'o', 'n', 'n', 'y', '!']

선택 패턴

| 문자를 이용하면 A | B 의 패턴으로 A 혹은 B에 매칭할 수 있다. 예를 들어 tomato와 potato에 모두 매칭하고 싶다면 tomato | potato 라고 쓸 수 있다.

그 외 선택 패턴으로는 대괄호 속에 넣은 문자 중 하나에 매칭하는 방법이다.

[a-z]: 소문자 중 1개
[A-Z]: 대문자 중 1개
[0-9]: 숫자 중 1개
[ㄱ-힣]: 한글 글자 중 1개

수량 한정자

동일한 글자 혹은 동일한 family가 n개 만큼 나오는 경우에 수량 한정자를 뒤에 붙일 수 있다.

+: 1개 이상 (+ 왼쪽 문자 반복 검색)

메서드

위의 정규표현식을 가지고 이메일이나 전화번호 매칭 필터링을 하기 위해서는 자바스크립트 정규식 메서드를 이용해 패턴을 검사하고, 매칭되는 문자열을 추출, 변환한다.

메서드	의미
(”문자열”).match(/정규표현식/플래그)	“문자열”에서 “정규표현식”에 매칭되는 항목들을 배열로 반환
(”문자열”).replace(/정규표현식/, “대체문자열”)	“정규표현식”에 매칭되는 항목을 “대체문자열”로 변환
(”문자열”).split(정규표현식)	“문자열”을 “정규표현식”에 매칭되는 항목으로 쪼개어 배열로 반환
(정규표현식).test(”문자열”)	“문자열”이 “정규표현식”과 매칭되면 true, 아니면 false를 반환
(정규표현식).exec(”문자열”)	match 메서드와 유사(단, 무조건 첫 번째 매칭 결과만 반환)

const regex = /apple/;
const text = "peach and apple";

regex.test("peach and apple"); // true

text.match(regex); // ['apple', index: 10, input: 'peach and apple', groups: undefined]

text.replace(regex, "watermelon"); // "peach and watermelon"

이메일 검증하기

이메일 주소의 유효성을 검증하는 것은 웹 애플리케이션에서 정말 자주 수행되는 작업 중 하나이다. 이를 정규 표현식을 사용하여 간단하게 구현할 수 있다.

function validateEmail(email) {
    // 이메일 주소 패턴을 정의한 정규 표현식
    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(email);
}

// 예시
console.log(validateEmail('example@email.com')); // true
console.log(validateEmail('invalid-email')); // false

위 예제에서 사용된 정규식 표현은 다음과 같은 패턴을 검증한다.

^[a-zA-Z0-9._%+-]+: 이메일 주소의 시작은 알파벳, 숫자, 점(.), 언더스코어(_), 퍼센트(%), 플러스(+), 또는 마이너스(-) 문자로 이루어져야 한다.
@: 이후에는 반드시 @ 기호가 나와야 한다.
[a-zA-Z0-9.-]+: @ 다음에는 알파벳, 숫자, 점(.), 또는 마이너스(-) 문자로 이루어진 도메인 이름이 나와야 한다.
\.: 도메인 이름 다음에는 반드시 점(.)이 나와야 한다.
[a-zA-Z]{2,}: 마지막으로 최소 두 개의 알파벳으로 이루어진 최상위 도메인(TLD)이 있어야 한다.

문자열에서 특정 패턴 검색하기

const sentence = 'The quick brown fox jumps over the lazy dog';
const wordToSearch = 'fox';

const regex = new RegExp(wordToSearch, 'i'); // 'i' 플래그는 대소문자 구분 없이 검색
const found = sentence.match(regex);

if (found) {
    console.log(`'${wordToSearch}' found in the sentence.`);
} else {
    console.log(`'${wordToSearch}' not found in the sentence.`);
}

위의 예제에서는 match() 메소드를 사용하여 문자열 sentence에서 wordToSearch 변수에 저장된 단어 fox를 찾는다. new RegExp(wordToSearch, 'i')는 대소문자를 구분하지 않고 fox를 찾는 정규 표현식을 생성한다.

전화 번호 형식 검증하기

전화번호를 표현하는 문자열에서 국가 코드가 있는 경우도 있고 없는 경우도 있을 수 있다.

const phoneNumber1 = '+1-555-123-4567';
const phoneNumber2 = '555-123-4567';

const regex = /^(\+\d+)?-\d{3}-\d{3}-\d{4}$/;

console.log(regex.test(phoneNumber1)); // true
console.log(regex.test(phoneNumber2)); // true

^: 문자열의 시작을 나타낸다.
(\+\d+)?: 이 부분은 선택 패턴이다. \+\d+는 + 기호와 하나 이상의 숫자로 이루어진 국가 코드를 의미한다. ( ... )로 묶인 부분에 ?를 붙여서 이 부분이 선택적임을 나타낸다. 즉, 국가 코드가 있을 수도 있고 없을 수도 있다.
-\d{3}-\d{3}-\d{4}: 여기서 -는 그대로 문자 -를 의미하고, \d{3}은 세 개의 숫자를 나타낸다. 따라서 -로 구분된 형식의 전화번호를 나타내며, 국가 코드가 선택적일 때도 매치된다.
$: 문자열의 끝을 나타낸다.

정리

정규 표현식을 잘 이해하고 활용하면 문자열 처리와 관련된 많은 문제를 간단하게 해결할 수 있다.
이해는 하지만 외우고 있지는 않아서 매번 사용할 때마다 찾는다. (^^)

👈🏻 함수

이벤트 👉🏻