자바스크립트 정규식과 유효성 검사: 핵심 개념 정리

이메일 유효성 검사

웹 개발에서 입력값을 검증하는 것은 매우 중요한 작업입니다. 자바스크립트 정규식(Regular Expression, RegExp)을 활용하면 문자열에서 특정 패턴을 찾거나, 형식을 검사하는 유효성 검사를 쉽게 구현할 수 있습니다. 이번 글에서는 자바스크립트 정규식을 활용한 유효성 검사 방법을 정리해보겠습니다.

---

1. 자바스크립트 정규식이란?

자바스크립트 정규식은 문자열에서 특정 패턴을 찾거나 변경할 때 사용하는 강력한 도구입니다. 정규식은 /패턴/플래그 형태로 작성되며, RegExp 객체를 이용하여 생성할 수도 있습니다.

const regex = /hello/;  // 리터럴 방식
const regexObj = new RegExp("hello");  // 객체 생성 방식

정규식은 유효성 검사뿐만 아니라, 문자열 검색, 치환, 데이터 필터링 등 다양한 용도로 활용됩니다.

---

2. 정규식을 활용한 유효성 검사

이메일 유효성 검사

자바스크립트 정규식을 이용하면 이메일 형식이 올바른지 쉽게 확인할 수 있습니다.

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const email = "test@example.com";

console.log(emailRegex.test(email)); // true

✅ 설명

• ^와 $는 문자열의 시작과 끝을 의미
• [a-zA-Z0-9._%+-]+는 사용자 이름 부분
• @는 반드시 포함되어야 하는 문자
• [a-zA-Z0-9.-]+는 도메인 부분
• \.[a-zA-Z]{2,}$는 최종 도메인(.com, .net 등)

비밀번호 유효성 검사

안전한 비밀번호를 위해 다음 조건을 만족해야 한다고 가정해 보겠습니다.

• 8~16자 길이
• 영문 대소문자 포함
• 숫자 포함
• 특수문자 포함

이를 자바스크립트 정규식으로 표현하면 다음과 같습니다.

const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;
const password = "Abc123!@";

console.log(passwordRegex.test(password)); // true

✅ 설명

• (?=.*[A-Za-z]) → 영문 포함
• (?=.*\d) → 숫자 포함
• (?=.*[@$!%*?&]) → 특수문자 포함
• [A-Za-z\d@$!%*?&]{8,16} → 8~16자 제한

휴대폰 번호 유효성 검사

한국 휴대폰 번호 형식(010-xxxx-xxxx)을 자바스크립트 정규식으로 검사하는 방법입니다.

const phoneRegex = /^010-\d{4}-\d{4}$/;
const phoneNumber = "010-1234-5678";

console.log(phoneRegex.test(phoneNumber)); // true

✅ 설명

• ^010- → “010-“으로 시작
• \d{4}-\d{4} → 숫자 4개, 하이픈, 숫자 4개

---

3. 정규식을 활용한 문자열 검사 및 변환

특정 문자열 포함 여부 확인

정규식을 활용하면 특정 문자열이 포함되어 있는지 쉽게 검사할 수 있습니다.

const text = "자바스크립트 정규식 배우기";
const regex = /정규식/;

console.log(regex.test(text)); // true

문자열 치환

자바스크립트 정규식을 활용하면 특정 단어를 다른 단어로 치환할 수도 있습니다.

const text = "JavaScript 정규식은 강력하다!";
const replacedText = text.replace(/정규식/g, "RegExp");

console.log(replacedText); // "JavaScript RegExp은 강력하다!"

✅ 설명

• /정규식/g → “정규식”이라는 단어를 찾아 "RegExp"로 변경
• g(global) 플래그를 추가하면 모든 일치 항목을 변경

---

4. 정규식 플래그(옵션)

자바스크립트 정규식은 다양한 플래그를 사용할 수 있습니다.

플래그

• g :  전역 검색 (모든 일치 항목 찾기)
• i : 대소문자 구분 없이 검색
• m : 여러 줄 검색

const regex = /hello/gi;
const text = "Hello hello HELLO";

console.log(text.match(regex)); // ["Hello", "hello", "HELLO"]

✅ g와 i 플래그를 함께 사용하여 대소문자 구분 없이 전체 검색이 가능

---

5. 정규식 테스트 및 디버깅

정규식을 직접 테스트하고 디버깅할 수 있는 유용한 도구를 소개합니다.

• RegExr
• Regex101

이런 사이트를 활용하면 자바스크립트 정규식을 실험하고, 패턴이 올바르게 동작하는지 확인할 수 있습니다.

---

자바스크립트 정규식을 활용하면 다양한 유효성 검사를 효율적으로 수행할 수 있습니다.

• 이메일, 비밀번호, 휴대폰 번호 등의 입력값을 검증하는 데 유용
• test(), match(), replace() 등의 메서드를 사용해 문자열 검사 및 변환 가능
• g, i, m 플래그를 활용하면 더욱 강력한 검색 기능 제공

자바스크립트 정규식을 잘 활용하면 보다 효율적인 데이터 검증과 처리 작업이 가능합니다. 프로젝트에서 정규식을 적극 활용해 보세요!