[TIL] JavaScript - 정규 표현식

정규 표현식이란?

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchAll() (en-US), replace(), replaceAll() (en-US), search(), split() 메서드와도 함께 사용할 수 있습니다. 
출처: mdn

 

정규표현식 사용법 정리

1. 정규표현식 형식

/패턴/플래그

- 슬래시(/) "사이"에는 매칭 시킬 "패턴"을 써준다.

- 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 써준다.

(플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이라고 보면 됩니다.)

 

 

2. 정규표현식 매칭 패턴(문자, 숫자, 기호 등)

: 아래 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있습니다.

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

 

 

3. 정규표현식 검색 패턴

: 아래 패턴들을 이용하면, AND, OR, StartWith, EndWith 등의 다양한 조합을 만들 수 있습니다.

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

 

 

4. 정규표현식 갯수(수량) 패턴

: 특정 패턴이 몇번 반복되는지도 필터링 가능합니다.

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

 

 

5. 정규표현식 플래그

: 플래그는 동시에 여러 개 사용할 수도 있습니다. 예) gi, gm 등

플래그	의미
g	Global: 모든 문자 검색(안 쓰면 매칭되는 첫 문자만 검색)
i	Ignore Case: 대소문자 구분 안함
m	Multi line: 여러 행의 문자열에 대해 검색

* 이외에 Singleline, Unicode, Sticky 옵션도 있는데, 잘 쓰진 않는 듯합니다.

 

 

6. 정규표현식 주요 메서드

: 자바스크립트 코드 상에서는 아래 메서드를 통해 패턴을 검사하고,. 매칭 되는 문자열을 추출, 변환합니다.

메서드	의미
("문자열").match(/정규표현식/플래그)	"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
("문자열").replace(/정규표현식/, "대체문자열")	"정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
("문자열").split(정규표현식)	"문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환
(정규표현식).test("문자열")	"문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
(정규표현식).exec("문자열")	match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

 

 

정규 표현식 활용 예시

"S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!"

 

1. /급/ : '급'을 '하나'만 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

2. /급/g : '급'을 '모두' 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

3. /아이폰/ : '아이폰'을 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

4. /[S폰0]/g : 'S', '폰', 0 중 하나를 모두 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

5. /[0-9]/g : '숫자 0~9'를 모두 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

6. /[a-zA-Z]/g : '영어 알파벳 소문자/대문자'를 모두 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

 

7. /[^0-9]/g : '숫자 0~9'가 아닌 것들을 모두 찾습니다.

    => S급 아이폰 급구합니다!! 010-1111-1111 Call Me~!

* 대괄호[] 안에서 앞에 ^를 쓰면, 부정의 기능을 합니다.

 

정규표현식 활용 샘플 코드

1. 웹사이트 주소 정규표현식

: http:// 나 https://로 시작하고, 알파벳, 언더스코어(_), 하이픈(-), dot(.)으로 이루어져 있습니다.

const text = `대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`;

text.match(/https?:\/\/[\w\-\.]+/g);
// ["http://dogumaster.com", "http://google.com"]

여기서 사용된 정규표현식을 해석해보겠습니다.

/https?:\/\/[\w\-\.]+/g 

1) http => 로 시작하고,

2) s? => 다음에 s는 없거나 있고,

3) : => 다음에 : 가 오고,

4) \/\/ => 다음에 특수기호 // 가 오고

5) [\w\-\.]+ => \w(영문자, 언더스코어), 하이픈, 쩜 으로 이루어진 문자열이 한개 이상(+) 있다.

6) g => 매칭 되는걸 모두 다 찾는다.(플래그)

 

 

2.  전화번호 정규표현식

: 유선번호라면 02-111-2222 형식이고, 핸드폰 번호라면 010-1111-2222 형식입니다. 숫자의 개수가 다릅니다.

const text = `http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`;

text.match(/\d{2,3}-\d{3,4}-\d{4}/g);
// [ '010-1111-2222', '02-333-7777' ]

/\d{2,3}-\d{3,4}-\d{4}/g

1) \d{2,3} => 숫자 2~3개로 시작하고,

2) \- => 다음에 하이픈(-)이 오고

3) \d{3, 4} => 다음에 숫자가 3~4개 오고,

4)  \- => 다음에 하이픈(-)이 오고,

5) \d{4} => 다음에 숫자가 4개 온다.

6) g => 매칭 되는걸 모두 다 찾는다(플래그)

 

 

3. 이메일 주소 정규표현식

: xxx@xxxx.com 등의 형식이니, 쉽게 만들 수 있겠죠?

const text = `http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`;

text.match(/[\w\-\.]+\@[\w\-\.]+/g); // [ 'curryyou@aaa.com' ]

좀 더 엄격한 검사가 필요하다면, 상황에 맞게 수정해서 사용하시면 되겠습니다.

 

 

4. 특수기호 정규표현식

1) 모든 특수기호를 나열

: 빼먹을수도 있는 단점이 있지만, 원하는 특수기호만 선택해서 검사할 수 있는 장점이 있습니다.

const regex = /\[\]\{\}\/\(\)\.\?\<\>!@#$%^&*/g

 

2) 문자와 숫자가 아닌 것을 매칭

: [^문자]  패턴으로 Not 기능을 적용했습니다.

const regex = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g

 

마치며...

 

Reference

• https://curryyou.tistory.com/234