JavaScript 기초 <20. 정규표현식(Regex) 제대로 활용하기 (패턴과 실제 사용 예시)>

자바스크립트 JavaScript

20. 정규표현식(Regex) 제대로 활용하기 (패턴과 실제 사용 예시) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 정규표현식(Regex)이란?

정규표현식(Regular Expression, Regex)은 특정 패턴을 기반으로 문자열을 검색, 추출, 변경할 수 있는 강력한 도구입니다.
주로 문자열의 패턴을 정의하고, 이를 이용해 문자열에서 특정 텍스트를 찾거나, 치환하거나, 분리할 수 있습니다.

📌 정규표현식을 사용하면 문자열 처리에 효율적인 방법을 제공함!

---

 

2. 정규표현식의 기본 문법

✅ 1) 기본 문법

기호설명예시

.	임의의 한 문자	a.c -> "abc", "acc" 등
^	문자열의 시작을 의미	^a -> "apple", "a123" 등
$	문자열의 끝을 의미	t$ -> "cat", "hit" 등
*	앞 문자가 0번 이상 반복될 수 있음을 의미	a*b -> "b", "ab", "aaab" 등
+	앞 문자가 1번 이상 반복될 수 있음을 의미	a+b -> "ab", "aaab" 등
?	앞 문자가 0번 또는 1번 등장할 수 있음을 의미	colou?r -> "color", "colour"
[]	문자 클래스 (괄호 안의 문자 중 하나)	[aeiou] -> "a", "e", "i", "o", "u" 중 하나

✅ 예시: a.*b

• "ab", "aabb", "acb" 등에서 "a"와 "b" 사이에 어떤 문자가 오든지 일치합니다.

📌 정규표현식에서는 특정 문자 또는 문자 패턴을 추출하기 위해 이러한 특수 문자를 조합하여 사용함!

---

 

3. 자주 사용하는 정규표현식 패턴

✅ 1) 숫자, 알파벳, 공백 처리

• 숫자: \d (0-9)
• 알파벳: [a-zA-Z]
• 공백: \s (공백, 탭, 개행 등)

✅ 2) 전화번호, 이메일, URL 검증

• 전화번호: ^\d{3}-\d{4}-\d{4}$ (예: "010-1234-5678")
• 이메일: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
• URL: ^(http|https)://[a-zA-Z0-9.-]+$

📌 정규표현식은 문자열의 형식을 정확히 맞추는 데 유용함!

---

✅ 여기까지 정규표현식의 개념과 기본적인 패턴을 배웠습니다!
👉 "그렇다면, 정규표현식을 JavaScript에서 어떻게 활용할 수 있을까?"
✅ 2부에서 JavaScript에서 정규표현식 사용법, 메서드, 예외 처리까지 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. JavaScript에서 정규표현식 사용하기

JavaScript에서 정규표현식은 RegExp 객체를 사용하여 처리합니다.
정규표현식은 리터럴 방식 또는 RegExp 생성자를 통해 만들 수 있습니다.

✅ 1) 리터럴 방식으로 정규표현식 만들기

const regex = /abc/;

✅ 2) RegExp 생성자로 정규표현식 만들기

const regex = new RegExp("abc");

📌 리터럴 방식이 더 간편하고 일반적으로 많이 사용됨!

---

 

2. 정규표현식 메서드

✅ 1) test() – 정규표현식과 일치하는지 확인

test()는 문자열이 정규표현식과 일치하는지 확인하고, 결과를 **true 또는 false**로 반환합니다.

const regex = /apple/;
console.log(regex.test("I have an apple.")); // true
console.log(regex.test("Banana is yellow.")); // false

📌 test()는 문자열이 패턴에 맞는지 빠르게 확인할 때 유용함!

✅ 2) exec() – 일치하는 문자열을 배열로 반환

exec()는 정규표현식과 일치하는 부분을 배열로 반환합니다.

const regex = /a(b)c/;
const result = regex.exec("abc");
console.log(result); // ["abc", "b"]

📌 exec()는 일치하는 문자열을 상세하게 반환하므로, 여러 매칭을 찾을 때 유용함!

---

 

3. 문자열 메서드와 함께 정규표현식 사용하기

✅ 1) replace() – 문자열 교체

replace()는 문자열에서 정규표현식과 일치하는 부분을 찾아 다른 문자열로 교체할 수 있습니다.

const text = "I have an apple.";
const newText = text.replace(/apple/, "banana");
console.log(newText); // "I have a banana."

✅ 2) match() – 문자열에서 정규표현식과 일치하는 부분 찾기

match()는 문자열에서 정규표현식과 일치하는 부분을 배열로 반환합니다.

const text = "apple, banana, apple";
const matches = text.match(/apple/g);
console.log(matches); // ["apple", "apple"]

📌 replace()와 match()는 문자열을 변경하거나, 일치하는 부분을 쉽게 찾을 때 사용됨!

---

 

4. 정규표현식 예외 처리

정규표현식에서 예외를 처리할 때는 try/catch 구문을 사용하여 오류를 잡을 수 있습니다.

try {
    const regex = new RegExp("[a-z");
    console.log(regex);
} catch (error) {
    console.error("정규표현식 오류:", error);
}

📌 정규표현식을 동적으로 생성할 때, 문법 오류가 발생할 수 있으므로 try/catch로 처리함!

---

 

✅ 지금까지 JavaScript에서 정규표현식을 활용하는 방법과 예외 처리까지 배웠습니다!