[vanillaJs] 정규표현식을 예시와 함께 알아보자!

Regular Expression: Regex

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.

 

 

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. 정규표현식 플래그

: 플래그는 동시에 여러개 사용할 수 있다. ex) gi, gm ...

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

 

6. 메소드

메소드	기능
("문자열").exec(/정규표현식/플래그)	문자열에서 일치하는 부분을 탐색하여 처음 매칭 되는 항목을 배열로 반환한다. 일치가 없는 경우 null을 반환
("문자열").test(/정규표현식/플래그)	문자열에 일치하는 부분이 있는지 확인한다. true 또는 false를 반환
("문자열").match(/정규표현식/플래그)	"문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환한다. 일치가 없으면 null을 반환
("문자열").matchAll(/정규표현식/플래그)	"문자열"에서 "정규표현식"에 매칭되는 항목들과 함께 index, input, groups 3개의 프로퍼티를 배열로 반환한다. 일치가 없으면 null을 반환
("문자열").search(/정규표현식/플래그)	문자열에서 일치하는 부분을 탐색한다. 일치하는 부분의 인덱스, 또는 일치가 없는 경우 -1을 반환한다.
("문자열").replace(/정규표현식/플래그)	문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 변경
("문자열").replaceAll(/정규표현식/플래그)	문자열에서 일치하는 부분을 모두 탐색하고, 모두 대체 문자열로 변경
("문자열").split(/정규표현식/플래그)	정규 표현식 또는 문자열 리터럴을 사용해서 문자열을 부분 문자열의 배열로 나눈다.

 

정규 표현식 만들기

정규 표현식은 두 가지 방법으로 만들 수 있다.

1. 정규 표현식 리터럴. 다음과 같이 슬래시로 패턴을 감싸서 작성한다.

const re = /ab+c/

정규 표현식 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다.

2. RegExp 객체의 생성자 호출.

const re = new RegExp('ab+c')

 

정규표현식 활용 예시

https://regexr.com/

/Number/ :  'Number'를 '하나'만 찾는다.

 

/Number/g: 'Number'를 '모두' 찾는다

/[A2.]/g: "A", "2", . 중에 하나를 모두 찾는다. 

* 대괄호[]는 OR의 기능

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

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

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

* 대괄호[] 안에서 앞에 ^를 쓰면, 부정(Not)의 기능

 

1. 전화번호 정규 표현식

   / \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 →  매칭되는걸 모두 다 찾는다(플래그)

 

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

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

1) http → 로 시작하고,

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

3) : →다음에 : 가 오고,

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

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

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

 

3. 이메일 정규 표현식

 / [\w\-\.]+\@[\w\-\.]+ /g 

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

2) @ → 다음에 @ 가 오고,

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

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

 

4. 특수기호 정규표현식

1) 모든 특수기호를 나열

 - 원하는 특수기호만 선택하여 검사할 수 있다. 

 - 하나씩 입력해줘야하므로 특정 기호를 빼먹을 수 있다.

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

 

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

 -  [^영어^숫자^한글]  패턴 사용

 - 모든 특수기호를 검사할 수 있다.

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

 

5. 특정 단어로 끝나는지 검사

const file = 'index.js';
 
// 'js'로 끝나는지 검사
// $ : 문자열의 끝을 의미한다.
const regex = /js$/;

 

참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
https://curryyou.tistory.com/234
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC