자바스크립트 예제로 배우는 정규식(regex) 패턴

안녕하세요. 오늘은 프로그래밍에서 문자열을 처리하거나 검증할 때 정말 중요한 정규식(Regular Expression)에 대해 알아볼게요. 정규식은 간단한 표현으로 복잡한 문자열 패턴을 다룰 수 있는 도구로, 프로그래밍의 다양한 영역에서 활용되고 있죠.

이번 포스팅에서는 대부분의 프로그래밍언어에도 사용되는 일반적인 정규식 패턴을 다루지만, 자바스크립트 기반으로 예제를 통해 기본 개념을 알아보고, 사용법을 익혀볼 거예요. 그전에 자주 사용되는 정규식 패턴 예제부터 알아보고 갈게요!

자주 사용되는 정규식 패턴 예제 ​

이메일 주소 검증하기

function isValidEmail(email) {
    // 이메일 주소에 대한 정규식
    let emailRegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; 
    // 이메일 주소가 정규식에 맞는지 검증
    return emailRegExp.test(email); 
}
let email = "example@email.com";
console.log(isValidEmail(email)); // 결과: true

 

한글 이름 검증하기

function isValidKoreanName(name) {
    // 한글 이름에 대한 정규식 (2~4자)
    let koreanNameRegExp = /^[가-힣]{2,4}$/;
    // 한글 이름이 정규식에 맞는지 검증
    return koreanNameRegExp.test(name); 
}
let name = "홍길동";
console.log(isValidKoreanName(name)); // 결과: true

 

전화번호 검증하기 (하이픈 포함)

function isValidPhoneNumber(phoneNumber) {
    // 전화번호에 대한 정규식 (하이픈 포함)
    let phoneNumberRegExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/; 
    // 전화번호가 정규식에 맞는지 검증
    return phoneNumberRegExp.test(phoneNumber); 
}

let phoneNumber = "010-1234-5678";
console.log(isValidPhoneNumber(phoneNumber)); // 결과: true

 

비밀번호 검증하기 (최소 8자, 대문자, 소문자, 숫자 각 1개 이상 포함)

function isValidPassword(password) {
	// 비밀번호에 대한 정규식
    let passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
	// 비밀번호가 정규식에 맞는지 검증
	return passwordRegExp.test(password); 
}
let password = "Password1";
console.log(isValidPassword(password)); // 결과: true

 

생년월일 검증하기

function isValidBirth(idNumber) {
    // 년도: 1900년 이후, 월: 1-12, 일: 1-31
    const regex = /^(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/;
    return regex.test(idNumber);
}
console.log(isValidBirth("19990815")); // true
console.log(isValidBirth("12345678")); // false

 

영문자, 대소문자, 숫자 검증하기

// 영문자 검증
const regex1 = /^[a-zA-Z]+$/;
console.log(regex1.test("abc")); // true
console.log(regex1.test("AbC")); // true
console.log(regex1.test("123")); // false
console.log(regex1.test("abc123")); // false

// 숫자 검증
const regex2 = /^[0-9]+$/;
console.log(regex2.test("123")); // true
console.log(regex2.test("abc")); // false

// 소문자 검증
const regex3 = /^[a-z]+$/;
console.log(regex3.test("abc")); // true
console.log(regex3.test("AbC")); // false

// 대문자 검증
const regex4 = /^[A-Z]+$/;
console.log(regex4.test("ABC")); // true
console.log(regex4.test("Abc")); // false

// 숫자와 영문자 검증
const regex5 = /^[a-zA-Z0-9]+$/;
console.log(regex5.test("abc")); // true
console.log(regex5.test("123")); // true
console.log(regex5.test("AbC123")); // true
console.log(regex5.test("한글123")); // false

 


정규식 - Regular Expression

문자열에서 특정 패턴을 찾거나 검증할 때 사용되는 표현 방식이에요. 자바스크립트에서는 RegExp 객체를 사용하여 정규식을 작성하고, 문자열 메서드와 함께 사용할 수 있습니다.

기본 구조

정규식은 크게 3가지 기본 요소로 이루어져 있으며 /로 시작하고 /로 끝나요. 예) /pattern/ ​

 

리터럴(Literal) 문자

정규식에서 찾고자 하는 문자 그대로를 나타냅니다. 예를 들어, 'hello'라는 문자열을 찾고 싶으면 정규식은 /hello/가 되죠. 여기서 'h', 'e', 'l', 'l', 'o'는 모두 리터럴 문자에요.

수량자(Quantifier)

정규식에서 문자가 몇 번 반복되는지 지정하는 기호에요. 문자나 패턴이 얼마나 자주 나타나는지를 표현할 때 사용돼요. 아래는 대표적인 수량자 입니다.

? : 바로 앞의 문자가 0번 또는 1번 나타남

* : 바로 앞의 문자가 0번 이상 반복

+ : 바로 앞의 문자가 1번 이상 반복

{m, n} : 바로 앞의 문자가 m 번 이상 n 번 이하 반복

// 1. ?: 앞의 문자가 0 또는 1번 나타나는 경우 일치
const regex1 = /ab?c/;
const str1 = "ac";
console.log(regex1.test(str1)); // true

// 2. *: 앞의 문자가 0번 이상 나타나는 경우 일치
const regex2 = /a*c/;
const str2 = "c";
console.log(regex2.test(str2)); // true

// 3. +: 앞의 문자가 1번 이상 나타나는 경우 일치
const regex3 = /a+c/;
const str3 = "aaac";
console.log(regex3.test(str3)); // true

// {n}: 앞의 문자가 n번 나타나는 경우 일치
const regex4 = /a{3}/;
const str4 = "aaa";
console.log(regex4.test(str4)); // true

// {n,}: 앞의 문자가 n번 이상 나타나는 경우 일치
const regex5 = /a{2,}/;
const str5 = "aa";
console.log(regex5.test(str5)); // true

// {n,m}: 앞의 문자가 n번 이상, m번 이하 나타나는 경우 일치
const regex6 = /a{2,3}/;
const str6 = "aaa";
console.log(regex6.test(str6)); // true

 

플래그(flag)

정규식의 동작 방식을 조절하는 옵션이에요. 플래그를 사용하면 정규식의 검색 및 치환 작업에 대한 다양한 동작을 변경할 수 있죠. 자주 사용되는 플래그들은 다음과 같습니다.

i : 대소문자를 구분하지 않습니다.

g : 문자열 전체에서 모든 매칭 패턴을 찾습니다.

m : 여러 줄에서 패턴을 찾습니다.

// i 플래그: 대소문자를 구분하지 않음
const regex1 = /hello/i;
const str1 = "HeLLo";
console.log(regex1.test(str1)); // true

// g 플래그: 전역 검색을 수행
const regex2 = /a/g;
const str2 = "abacad";
const result2 = str2.match(regex2);
console.log(result2); // ["a", "a", "a"]

// m 플래그: 다중 행 모드 사용
const regex3 = /^a/m;
const str3 = "b\nc\nd\na";
console.log(regex3.test(str3)); // true

// m플래그 : 아래와 같이 여러 줄로 구성된 문자열인 경우
const multilineStr = 
`first line
second line
third line`;

const regexWithoutM = /^second/;
console.log(regexWithoutM.test(multilineStr)); // false

const regexWithM = /^second/m;
console.log(regexWithM.test(multilineStr)); // true// i 플래그: 대소문자를 구분하지 않음
const regex1 = /hello/i;
const str1 = "HeLLo";
console.log(regex1.test(str1)); // true

// g 플래그: 전역 검색을 수행
const regex2 = /a/g;
const str2 = "abacad";
const result2 = str2.match(regex2);
console.log(result2); // ["a", "a", "a"]

// m 플래그: 다중 행 모드 사용
const regex3 = /^a/m;
const str3 = "b\nc\nd\na";
console.log(regex3.test(str3)); // true

// m플래그 : 아래와 같이 여러 줄로 구성된 문자열인 경우
const multilineStr = 
`first line
second line
third line`;

const regexWithoutM = /^second/;
console.log(regexWithoutM.test(multilineStr)); // false

const regexWithM = /^second/m;
console.log(regexWithM.test(multilineStr)); // true

 

패턴(Pattern)

기호 정규식에서 특별한 의미를 가지는 기호로, 문자열의 특정 패턴을 찾을 때 사용돼요. 아래는 대표적인 패턴 기호 예제입니다.

// 1. ^: 문자열이나 행의 시작 부분에 패턴이 일치
const regex1 = /^hello/;
const str1 = "hello world";
console.log(regex1.test(str1)); // true

// 2. $: 문자열이나 행의 끝 부분에 패턴이 일치
const regex2 = /world$/;
const str2 = "hello world";
console.log(regex2.test(str2)); // true

// 3. .: 임의의 한 문자와 일치
const regex3 = /h.llo/;
const str3 = "hello";
console.log(regex3.test(str3)); // true

// 10. [...]: 대괄호 안에 있는 문자 중 하나와 일치
const regex10 = /h[ae]llo/;
const str10 = "hello";
console.log(regex10.test(str10)); // true

// 11. [^...]: 대괄호 안에 있는 문자와 일치하지 않는 문자와 일치
const regex11 = /h[^ae]llo/;
const str11 = "hullo";
console.log(regex11.test(str11)); // true

// 12. \d: 숫자와 일치
const regex12 = /\d\d/;
const str12 = "12";
console.log(regex12.test(str12)); // true

// 13. \D: 숫자가 아닌 문자와 일치
const regex13 = /\D\D/;
const str13 = "ab";
console.log(regex13.test(str13)); // true

// 14. \w: 영문자, 숫자, 밑줄(_) 중 하나와 일치
const regex14 = /\w\w/;
const str14 = "a1";
console.log(regex14.test(str14)); // true

// 15. \W: 영문자, 숫자, 밑줄(_)이 아닌 문자와 일치
const regex15 = /\W\W/;
const str15 = "!@";
console.log(regex15.test(str15)); // true

// 16. \s: 공백 문자와 일치
const regex16 = /hello\s/;
const str16 = "hello ";
console.log(regex16.test(str16)); // true

// 17. \S: 공백 문자가 아닌 문자와 일치
const regex17 = /hello\S/;
const str17 = "helloW";
console.log(regex17.test(str17)); // true

 

정규식 검사 예제

자바스크립트에서는 정규식을 검사하는데 주로 사용되는 메서드 test()와 match() 가 있어요.

test() : 정규식을 사용해서 문자열에 패턴이 존재하는지 확인해요. 패턴이 존재하면 true, 그렇지 않으면 false를 반환합니다.

match() : 정규식과 매칭되는 부분을 찾아 배열로 반환해요. 매칭되는 부분이 없으면 null을 반환합니다.

const regex = /hello/i; //대소문자를 구분하지 않고 hello 문자열이 존재하는지 확인
const str1 = "Hello, World";
const str2 = "Hi, World";

console.log(regex.test(str1)); // true
console.log(regex.test(str2)); // false

console.log(str1.match(regex)); // ["Hello"]
console.log(str2.match(regex)); // null

 

문자열 메서드 활용 예제

자바스크립트에서 자주 사용하는 문자열 메서드로 정규식을 활용해 아래와 같이 처리할 수 있어요.

const regex = /hello/i;
const str = "Hello, World";

//replace(): 정규식과 일치하는 부분을 다른 문자열로 치환
const result = str.replace(regex, "Hi");
console.log(result1); // "Hi, World"

//search() 정규식과 일치하는 문자열의 시작 인덱스를 반환(일치하는 문자열이 없으면 -1을 반환)
const result = str.search(regex);
console.log(result); // 0

//split() 정규식을 기준으로 문자열을 나누어 배열로 반환
const regex = /,\s+/; // 쉼표와 공백 문자를 기준으로 분리
const str = "apple, banana, orange";
const result = str3.split(regex2);
console.log(result3); // ["apple", "banana", "orange"]

 

 

오늘은 이렇게 정규식에 대해 알아보는 시간을 가졌는데요. 처음 접하는 분들에게는 조금 복잡해 보일 수 있지만, 익숙해지면 문자열 처리에 매우 효율적인 도구가 된답니다.  - 끝 -

정규식패턴 썸네일