자바스크립트 정규 표현식 마스터하기: 웹 개발 필수 기술 완벽 가이드
웹 개발에서 문자열 처리만큼 중요한 작업이 있을까요? 데이터 검증, 텍스트 추출, 패턴 매칭 등 다양한 작업에 정규 표현식이 활용됩니다. 자바스크립트에서 강력한 도구인 정규 표현식을 제대로 활용하면 개발 효율을 획기적으로 높일 수 있습니다. 이 글에서는 자바스크립트 정규 표현식의 기본 개념부터 고급 활용법까지, 웹 개발자라면 꼭 알아야 할 모든 것을 상세히 다룹니다.
1, 정규 표현식이란 무엇일까요?
정규 표현식(Regular Expression, Regex 또는 RegExp)은 문자열 내에서 특정 패턴을 찾거나, 문자열을 조작하는 데 사용되는 강력한 도구입니다. 복잡한 패턴도 간결하게 표현할 수 있어, 반복적인 문자열 처리 작업을 자동화하고 코드의 가독성을 높이는 데 큰 도움이 됩니다. 웹 개발에서 이메일 유효성 검사, 전화번호 검증, 특정 단어 검색 등 다양한 상황에 활용됩니다.
1.1 정규 표현식의 기본 구조
자바스크립트에서 정규 표현식은 /패턴/플래그 형태로 표현됩니다.
/패턴/: 찾고자 하는 문자열 패턴을 정의합니다.플래그: 정규 표현식의 동작을 수정하는 옵션입니다 (예:g– 전체 문자열 검색,i– 대소문자 구분 없이 검색).
2, 자바스크립트에서 정규 표현식 사용하기
자바스크립트에서는 RegExp 객체를 사용하여 정규 표현식을 생성하고 조작할 수 있습니다. test() 메서드는 패턴이 일치하는지 확인하고, exec() 메서드는 일치하는 부분을 반환합니다. match() 메서드는 문자열에서 패턴과 일치하는 모든 부분을 배열로 반환합니다. replace() 메서드는 패턴과 일치하는 부분을 다른 문자열로 바꿉니다.
2.1 test() 메서드 예제
javascript
const regex = /hello/;
const str = “hello world”;
const result = regex.test(str); // true
console.log(result);
2.2 exec() 메서드 예제
javascript
const regex = /hello (\w+)/;
const str = “hello world”;
const result = regex.exec(str); // [‘hello world’, ‘world’]
console.log(result);
2.3 match() 메서드 예제
javascript
const regex = /hello/g;
const str = “hello hello world”;
const result = str.match(regex); // [‘hello’, ‘hello’]
console.log(result);
2.4 replace() 메서드 예제
javascript
const regex = /hello/g;
const str = “hello hello world”;
const result = str.replace(regex, “hi”); // hi hi world
console.log(result);
3, 정규 표현식의 주요 메타 문자와 특수 문자
정규 표현식의 핵심은 메타 문자와 특수 문자를 활용하여 복잡한 패턴을 표현하는 것입니다. 다음은 자주 사용되는 메타 문자와 특수 문자들의 예시입니다.
| 메타 문자 | 설명 | 예시 |
|---|---|---|
. |
임의의 문자 하나와 매치 | a.c 는 “abc”, “a1c” 등과 매치 |
* |
이전 문자 0개 이상 반복 | a* 는 “”, “a”, “aa” 등과 매치 |
+ |
이전 문자 1개 이상 반복 | a+ 는 “a”, “aa” 등과 매치 |
? |
이전 문자 0개 또는 1개 반복 | colou?r 는 “color”, “colour” 와 매치 |
^ |
문자열의 시작과 매치 | ^hello 는 “hello world” 와 매치, “world hello” 와는 매치 안 함 |
$ |
문자열의 끝과 매치 | world$ 는 “hello world” 와 매치, “world hello” 와는 매치 안 함 |
[] |
문자 집합 중 하나와 매치 | [abc] 는 “a”, “b”, “c” 와 매치 |
[^...] |
문자 집합을 제외한 문자와 매치 | [^abc] 는 “d”, “e”, “f” 등과 매치 |
() |
그룹핑 및 캡처링 | (abc) 그룹으로 묶어 매치 및 캡처 |
| |
또는 | a|b 는 “a” 또는 “b” 와 매치 |
\d |
숫자와 매치 | \d+ 는 하나 이상의 숫자와 매치 |
\D |
숫자가 아닌 문자와 매치 | \D+ 는 하나 이상의 숫자가 아닌 문자와 매치 |
\w |
단어 문자 (알파벳, 숫자, 언더스코어)와 매치 | \w+ 는 하나 이상의 단어 문자와 매치 |
\W |
단어 문자가 아닌 문자와 매치 | \W+ 는 하나 이상의 단어 문자가 아닌 문자와 매치 |
\s |
공백 문자와 매치 | \s+ 는 하나 이상의 공백 문자와 매치 |
\S |
공백 문자가 아닌 문자와 매치 | \S+ 는 하나 이상의 공백 문자가 아닌 문자와 매치 |
4, 플래그 (Flags)
플래그는 정규 표현식의 동작을 변경하는 옵션입니다. 자주 사용되는 플래그로는 다음과 같은 것들이 있습니다.
g: 전체 문자열에서 모든 일치하는 패턴을 찾습니다.i: 대소문자를 구분하지 않고 검색합니다.m: 다중 줄 문자열에서^와$를 각 줄의 시작과 끝으로 해석합니다.
5, 고급 정규 표현식 활용: 긍정적 선행 탐색과 부정적 선행 탐색
더욱 복잡한 패턴 매칭을 위해서는 긍정적 선행 탐색과 부정적 선행 탐색을 사용할 수 있습니다.
- 긍정적 선행 탐색 (?=): 특정 패턴이 존재하는 경우에만 매치합니다. 하지만 매치 결과에는 포함되지 않습니다.
- 부정적 선행 탐색 (?!): 특정 패턴이 존재하지 않는 경우에만 매치합니다. 마찬가지로 매치 결과에는 포함되지 않습니다.
예를 들어, “apple” 이라는 단어가 있지만 “banana” 라는 단어는 없는 문자열을 찾고 싶다면 부정적 선행 탐색을 사용할 수 있습니다.
6, 실제 예시: 이메일 유효성 검사
정규 표현식을 사용하여 이메일 유효성을 검사하는 예시입니다. 다음 정규 표현식은 매우 기본적인 검사만 수행하며, 더욱 강력한 검사를 위해서는 더 복잡한 정규 표현식이 필요할 수 있습니다.
javascript
const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
const email = “test@example.com”;
if (emailRegex.test(