[JavaScript] 정규 표현식(Regular Expression) 정리: 패턴 / 메서드 / 플래그 / 정규식 예제

정규 표현식이란?

문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴

 

정규식 생성 방법

1. 정규식 리터럴

슬래시(/)로 감싸는 패턴

스크립트가 불러와질 때 컴파일 (정규식이 상수일 때 사용)

var re = /ab+c/;
var re = /ab+c/g;

2. RegExp 객체

RegExp 객체의 생성자 함수 호출

정규식 실행 시점에 컴파일 (정규식 패턴이 변경될 수 있는 경우 사용)

var re = new RegExp("ab+c");
var re = new RegExp("ab+c", "g");

 

---

 

정규식 패턴

\ (역슬래시)	1. 특수문자가 아닌 문자 앞에 사용  해당 문자는 특별하고, 문자 그대로 해석되면 안됨  b: 소문자 b 패턴과 대응  \b: 어떤 문자와도 대응되지 않음  2. 특수문자 앞에 사용  다음에 나오는 문자는 특별하지 않고, 문자 그대로 해석되어야 함  /b*/: 0개 이상의 문자 'b'에 대응  /b\*/: 문자 'a*'에 대응 (*이 특별하지 않음)   * RegExp()에서 역슬래시 자체를 이스케이프 해야 함!  /a\*/ -> new RegExp('a\\*')
^	1. 입력의 시작 부분에 대응 (다중행 플래그가 true면 줄 바꿈 문자 바로 다음 부분과 대응)    /^a/: 'An a'와 대응되지 않고 'an E'와 대응 2. (예외) 문자셋 패턴([ ])의 첫 글자로 쓰이는 경우: 부정 문자셋    괄호 내부의 문자에 등장하지 않는 문자와 대응    [^abc]: [^a-c]와 동일 -> "banana"의 첫번째 'n'
$	1. 입력의 끝 부분에 대응 (다중행 플래그가 true면 줄 바꿈 문자 바로 앞 부분과 대응)    /t$/: 'eater'와 대응되지 않고 'eat'와 대응
*	1. 앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응    /bo*/: 'boooed'의 'booo'와 대응, 'bird'의 'b'와 대응
+	1. 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응    /a+/: 'candy'의 'a'에 대응
?	1. 앞의 표현식이 0 또는 1회 등장하는 부분과 대응    /e?le?/: 'angel'의 'el'에 대응, 'angle'의 'le'에 대응, 'solo'의 'l'에 대응 2. *. +, ?, {} 뒤에 사용하면 가장 적은 문자에 대응    /\d+/: '123abc'의 '123'과 대응    /\d+?/: '123abc'의 '1'과 대응 3. x(?=y)와 x(?!y) 같이 사전 검증을 위해 사용
.	1. 개행 문자를 제외한 모든 단일 문자와 대응    /.n/: 'no'와 대응되지 않고 'an'에 대응
x | y	1. 'x' 또는 'y'에 대응
{n}	1. 앞의 표현식이 n번 나타나면 대응 (양의 정수)    /a{2}/: 'candy'에 대응되지 않고 'caaandy'의 첫 두 'a'에 대응
{n, m}	1. 앞 문자가 최소 n개, 최대 m개가 나타나면 대응 (양의 정수, n <= m)    m이 생략되면 무한개로 취급    /a{1, 3}/: 'candy'에 대응, 'caaaandy'의 첫 'aaa'에 대응
[xyz]	1. 문자셋. 어떤 문자와도 대응     [abcd] = [a-d]
[^xyz]	1. 부정 문자셋. 등장하지 않는 어떤 문자와도 대응     [^abc] = [^a-c]
[\b]	1. 백스페이스와 대응
\b	1. 단어 경계에 대응 (앞이나 뒤에 문자가 등장하지 않아야 함)    /\bm/: 'moon'의 m에 대응    /oo\b/: 'moon'의 oo에 대응되지 않음 (뒤에 n이라는 문자가 있기 때문) 2. [\b]와 구분하기
\B	1. 단어 경계가 아닌 부분에 대응 (앞이나 뒤에 문자가 등장해야 함)    /\B../: 'yesterday'의 'es'와 대응
\d	1. 숫자 문자에 대응    \d = [0-9]
\D	1. 숫자 문자가 아닌 문자에 대응    \D = [^0-9]
\n	1. 줄 바꿈 문자에 대응
\s	1. 스페이스, 탭, 폼피드, 줄 바꿈 문자 등 하나의 공백 문자에 대응
\S	1. 공백 문자가 아닌 하나의 문자에 대응
\t	1. 탭 문자에 대응
\w	1. 밑줄 문자를 포함한 영숫자 문자에 대응    \w = [A-Za-z0-9_]    /\w/: 'apple'의 a에 대응, '3D'의 3에 대응
\W	1. 단어가 아닌 문자에 대응    \W = [^A-Za-z0-9_]    /\W/: '50%'의 %에 대응
\0	1. 널 문자에 대응 (뒤에 다른 숫자를 쓰면 8진수로 인식 주의)
\xhh	1. 코드가 hh(두개의 16진 숫자)인 문자에 대응
\uhhhh	1. 코드가 hhhh(네개의 16진 숫자)인 문자에 대응

 

---

 

정규식 메서드

1. RegExp 메서드

test	대응되는 문자열이 있는지 검사 -> true나 false 반환
exec	대응되는 문자열을 찾음 -> 정보를 가지고 있는 배열 반환 -> 없으면 null 반환
match	대응되는 문자열을 찾음 -> 정보를 가지고 있는 배열 반환 -> 없으면 null 반환

2. String 메서드

search	대응되는 문자열이 있는지 검사 -> 대응되는 부분의 인덱스 반환 -> 없으면 -1 반환
replace	대응되는 문자열을 찾아 다른 문자열로 치환
split	정규식이나 문자열로 대상 문자열을 나눔 -> 배열로 반환

 

---

 

플래그 설정 (고급검색)

g	전역 검색
i	대소문자 구분 없는 검색
m	다중행 검색
s	.에 개행 문자도 매칭
u	유니코드
y	sticky 검색 (문자열의 현재 위치부터 검색 수행)

 

---

 

응용 예제

📞 전화번호 정규식

// xxx-xxxx-xxxx
const pattern = /\d{3}-\d{4}-\d{4}/;
pattern.text('010-1234-5678');

// 01x-xxx-xxxx
const pattern = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
pattern.text('010-1234-5678');

📧 이메일 정규식

// xxx@xxx.com
const pattern = /[\w\-\.]+\@[\w\-\.]+/g;
pattern.test("abc@tistory.com");

☝ 숫자 정규식

// 숫자만 가능
const pattern = /^[0-9]+$/;
pattern.test("12420");

 

 

---

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-character-set

정규 표현식 - JavaScript | MDN