JavaScript 정규 표현식 가이드, 문법과 예제

생각보다 많이 쓰닌깐 기억해 보자고요!

정규 표현식 생각보다 많이 씁니다!

정규 표현식(Regular Expressions)은 텍스트 데이터를 검색, 추출, 변환하는 데 강력한 도구입니다. 특히 JavaScript에서 정규 표현식은 문자열 처리 작업을 간소화하고 효율성을 높이는 데 중요한 역할을 합니다. 하지만 복잡한 문법과 다양한 기능 때문에 처음 접하는 사람들에게는 어렵게 느껴질 수 있습니다.

JavaScript 정규 표현식의 기본 문법부터 실전에서 자주 사용되는 예제까지 체계적으로 정리해 보겠습니다.

이를 통해 정규 표현식을 활용한 예제도 보시죠!

목차

 

자바스크립트 정규식

기본 구조

정규 표현식은 /패턴/플래그 형태로 작성됩니다.

const regex = /odinbox/; // odinbox라는 것을 찾는다

 

패턴(Pattern): 찾고자 하는 문자열의 규칙

플래그(Flags): 검색의 동작 방식을 제어

- g : 전체(global) 검색

- i : 대소문자 구분 없음(insensitive)

- m : 여러 줄(multiline) 모드

- u : 유니코드(unicode) 전체 지원

- y : 문자 내 특정 위치에서 검색을 진행하는 sticky모드 활성화

주요 메타 문자

메타 문자	설명	예시
.	임의의 한 문자	/a.c/
^	문자열의 시작	/^hello/
$	문자열의 끝	/world$/
*	0회 이상 반복	/ab*c/
+	1회 이상 반복	/ab+c/
?	0회 또는 1회	/ab?c/
{n,m}	n회부터 m회까지 반복	/a{2, 4}/
[]	문자 클래스	/[aeiou]/
`	`	OR 연산자
()	그룹화	/{abc}+/

예제

이메일 유효성 검사

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("helpodinbox@gmail.com")); // 결과는 true로 나온다.

전화번호 유효성 검사

const phoneRegex = /^\d{3}-\d{3,4}-\d{4}$/;
console.log(phoneRegex.test("010-1234-5678")); // 전화번호 형식이 맞으니 true로 나온다.

HTML 태그 제거 유효성 검사

const htmlRegex = /<[^>]*>/g;
const html = "<p>OdinBOX</p>";
console.log(html.replace(htmlRegex, "")); // 'OdinBOX'라고 나옴

공백제거 유효성 검사

const spaceRegex = /\s+/g;
console.log("Odin    BOX".replace(spaceRegex, " ")); // 'OdinBOX'

특정단어 포함 여부 유효성 검사

const regex = /\bOdinBOX\b/;
console.log(regex.test("Welcome OdinBOX")); // true
console.log(regex.test("Odin")); // false

숫자만 포함 여부 유효성 검사

const regex = /^\d+$/;
console.log(regex.test("12345")); // true
console.log(regex.test("123a45")); // false

특정 형식의 날짜 유효성 검사

const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
console.log(dateRegex.test("2025-01-19")); // true
console.log(dateRegex.test("19-01-2025")); // false

URL 유효성 검사

const urlRegex = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(:\d+)?(\/.*)?$/;
console.log(urlRegex.test("https://www.odinbox.com")); // true
console.log(urlRegex.test("ftp://odinbox.com")); // false

영어 소문자만 포함 유효성 검사

const regex = /^[a-z]+$/;
console.log(regex.test("hello")); // true
console.log(regex.test("Hello")); // false

비밀번호 강도 유효성 검사

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
console.log(passwordRegex.test("OdinboX@ss1")); // true
console.log(passwordRegex.test("pass")); // false

마무리

JavaScript 정규 표현식은 처음에는 복잡하게 느껴질 수 있지만, 기본 문법과 활용법을 익히면 문자열 처리에서 강력한 도구가 됩니다. 문법과 예제를 바탕으로 정규 표현식을 연습해 보세요. 실제 프로젝트에서 유용하게 활용할 수 있을 것입니다.