[JavaScript] 정규표현식 (Regular Expression)

1️⃣ 정규표현식이란?

• 문자열에서 특정 패턴을 찾고, 검사하고, 치환하기 위한 문법
• 보통 위 사진과 같은 형식으로 사용 /패턴(pattern)/플래그(flag)

---

2️⃣ 왜 사용하는가?

• 짧고 강력함: 긴 문자열 처리 로직을 몇 글자로 표현 가능
• 범용성: 대부분의 언어(JS, Python,Java, C#, PHP 등)에서 지원
• 유연성: 검색, 검사, 치환 등 문자열 관련 문제를 대부분 해결 가능

---

3️⃣ 어떻게 사용하는가?

🚩 플래그 (Flag)

g (global - 전역 검색)

• 패턴과 일치하는 모든 항목을 찾음
• g 없으면 첫 번째 일치만 반환

const regex = /a/g;
console.log("banana".match(regex)); // ["a", "a", "a"]

i (ignore case - 대소문자 구분 안 함)

• 대소문자 무시하고 검색

const regex = /apple/i;
console.log(regex.test("APPLE")); // true
console.log(regex.test("apple")); // true

m (multiline - 여러 줄 모드)

• ^, $가 문자열 전체가 아니라, 각 줄의 시작/끝으로 동작

const regex = /^a/m;
console.log("cat\napple\nbanana".match(regex)); 
// ["a"] → 두 번째 줄 "apple"에서 매칭됨

플래그 조합

• 플래그는 함께 쓸 수 있음

const regex = /apple/gi; 
console.log("Apple APPLE apple".match(regex));
// ["Apple", "APPLE", "apple"]

---

◼️◻️ 패턴 (Pattern)

매타 문자: 매칭 패턴

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_)
\W	/w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

메타 문자: 검색 패턴

기호	의미
[]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작(괄호 없음!)
문자열$	특정 문자열로 끝남
()	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색(분류X)
\b	단어의 처음/끝
\B	단어의 처음/끝이 아님

메타 문자: 횟수 패턴

기호	의미
?	최대 한번(없음 or 1개)
*	(없음거나 있음): 여러개 포함
+	최소 1개( 1개 or 여러개)
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

---

4️⃣ 예제

이메일 형식 검사

/^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test("test@example.com"); 
// true

• ^ : 문자열 시작
• [\w.-]+ : 영문자/숫자/밑줄(\w), 점(.), 하이픈(-)이 1회 이상 반복
  -> test 같은 아이디 부분
• @ : @ 문자
• [a-zA-Z\d.-]+ : 영문자/숫자/점/하이픈이 1회 이상 반복
  -> example 같은 도메인 이름 부분
• \. : . 문자 (리터럴 점)
• [a-zA-Z]{2,} : 영문자 2개 이상 (최소 2글자 TLD: com, kr, org 등)
• $ : 문자열 끝

=> 즉, "아이디@도메인.최소2글자영문" 형식만 true.

한국 휴대폰 번호

/^01[016789]-\d{3,4}-\d{4}$/.test("010-1234-5678"); 
// true

• ^ : 문자열 시작
• 01[016789] : "010", "011", "016", "017", "018", "019" 허용
• - : 하이픈
• \d{3,4} : 숫자 3자리 또는 4자리
• - : 하이픈
• \d{4} : 숫자 4자리
• $ : 문자열 끝

=> 즉, "01X-3~4자리-4자리" 형식만 true.

HTML 태그 추출

/<[^>]+>/g.exec("<div>hello</div>"); 
// "<div>"

< : 태그 여는 꺾쇠
[^>]+ : >가 아닌 문자 1회 이상 → 태그 안의 이름/속성 등 (div, class="x")
> : 닫는 꺾쇠
/g : 전역 검색 플래그 (모든 태그를 찾을 수 있음)

=> 즉, 첫 번째 태그 <div>를 추출.