정규 표현식(regular expression) 이란?

 

정규표현식이라는 단어가 나오는데 

어떻게 사용하는지, 어디서 이용되는지 궁금해졌다.

 

🎁 오늘은 정규 표현식에 대해서 알아보도록 하자 🎁 

 

 

 

---

 

💖 정규표현식(regex)이란?

 

특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 언어.
정규표현식을 사용하면, 복잡한 조건문이 아닌 한줄로 간단히 표현할 수 있다.(가독성은 떨어지기 때문에 숙지필수!) 주로 문자열의 검색과 치환을 위한 용도로 쓰인다.

 

 

🔊 언제 사용할까? 

1. text에서 원하는 특정 pattern을 찾을 때 (전화번호/ 홈페이지 등)

2. pattern을 다른 문자열로 변환

3. 사용자가 입력한 데이터가 특정 pattern에 유효한지 유효성 검사 (이메일 / 비밀번호)

 

 

 

 

---

 

 

📑 정규 표현식 사용법

✨기본 규칙

// RegExp 객체를 이용하는 방법
const regex = new RegExp(pattern, flag);

// 객체초기화 방법
const regex = /pattern?/flag;

 

 

🔊 1. 정규표현식 형식

/패턴/플래그

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

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

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

 

 

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

 

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

 

🔊 3. 정규표현식 검색 패턴

 

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

 

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

 

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

 

🔊 5. 정규표현식 플래그

 

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

 

🔊 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. 이메일주소 정규표현식

 

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