[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코드)

# 정규표현식이란?(Regular Expression: Regex)

정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다.

(이런걸 형식 언어, formal languange라고 합니다.)

 

정규표현식을 이용하면, 특정 패턴에 매칭되는 문자열을 쉽게(?) 찾아낼 수 있습니다.

 

예를 들어 010-1111-2222 라는 전호번호는

"숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있는데,

 

정규표현식으로 아래와 같이 패턴을 만들어주면,

특정 문자열이 해당 패턴에 맞는지 체크할 수 있습니다.

const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)

regex.test('010-1111-2222') // true;
regex.test('01-11-22') // false;

 

물론 수많은 문자들 중에서 전화번호만 발라낼 수도 있습니다.

const text = "안녕하세요 제 번호는 010-1111-2222 입니다. call me~!";
text.match(/\d{3}-\d{4}-\d{4}/); // 010-1111-2222

 

수많은 데이터를 다루고, 원하는 정보만 발라내야할 때 아주아주 유용하기 때문에,

기본적인 사용법을 알아두면 큰 도움이 됩니다.

 

지금부터 아주 쉽게, 그리고 상세하게 정규표현식의 기초를 정리해보겠습니다.

---

#. 정규표현식 활용 예시

먼저 아래 문장을 정규표현식으로 주물러 보겠습니다.

"대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!"

 

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

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

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

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

* g(global) 플래그를 뒤에 붙인걸 기억하세요.

 

/대나무 빨대/: '대나무 빨대'를 찾는다.

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

/[대a0]/g: "대", "a", 0 중에 하나를 모두 찾는다. 

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

* 대괄호[]는 OR의 기능을 합니다.

 

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

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

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

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

 

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

=> 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~!

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

 

 

어떠신가요? 생각보다 쉽죠?

 

그럼 이제 본격적으로 정규표현식의 형식과 패턴, 플래그, 메서드를 정리해보겠습니다.

---

# 정규표현식 사용법 정리

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메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

 

갑자기 많은 양이 나와서 놀라실 수도 있는데, 

실제 사용하는 자바스크립트 코드를 보시면, 훨씬 이해가 쉬우실 겁니다.

---

# 정규표현식 활용 샘플 코드

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://dogumaster.com 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://dogumaster.com 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

---

이것으로 정규표현식 기초 정리를 마치겠습니다.

 

참고로, 정규표현식은 자바스크립트의 전유물이 아니라, 대부분의 프로그래밍 언어에서 지원되는 형식 언어입니다.

하지만 사용방식은 조금씩 상이할 수 있으니 유의하시기 바랍니다.

 

그럼 도움이 되시길 바라겠습니다.