JavaScript - 정규표현식(Regular Expression) 맛보기

 

오늘의 주제는 ✨정규표현식✨.

다른 사람들이 자유자재로 사용하는 것을 보니 정말 정말 유용해보였다.... 언제 한 번 날 잡고 정규표현식 구문을 학습해보려고 했는데 방학 첫 날을 맞이한 오늘이 그 날인가 보다! 정규표현식을 맛보기로 익혀보자.

 

정규표현식이란?

정규표현식(Regular Expression)은 문자열의 패턴을 편리하게 다룰 수 있도록 도와주는 '형식 언어'라고 한다. 여러 텍스트 편집기와 프로그래밍 언어에서 정규표현식을 지원한다. regexr.com/ 이 사이트에서 편하게 테스트해볼 수 있다.

JavaScript는 ES3부터 정규표현식을 지원하고 있다. 정규표현식은 문자열의 특정 패턴을 찾아 추출하거나 치환할 수 있도록 도와주기 때문에, 잘 활용하면 코드를 더 깔끔하게 작성할 수 있다. 적재적소에서 정규표현식을 활용하기 위해, 어떤 패턴과 플래그가 있는지 알아보자.

 

 

정규표현식 패턴

패턴은 /pattern/ 과 같이 '/'기호를 열고 닫아서 작성한다. 만약 기호 안에 /"pattern"/과 같이 따옴표를 함께 넣게 된다면 따옴표도 패턴의 일부가 되는 것에 주의하자. 테이블에 예시로 작성한 '적용패턴'에 공백은 가독성을 위해 추가한 것이고 실제 사용할 때는 추가하면 안된다.

패턴- 문자집합(Character classes)

패턴	대체패턴	설명	예시 문자열	적용패턴	매칭결과
.	-	아무 문자를 찾는다.	"my day"	/ ..y /	"day"
\d	[0-9]	숫자를 찾는다.	"365kim"	/ \d /	"3"
\D	[^0-9]	숫자가 아닌 것을 찾는다.	"365kim"	/ \D /	"k"
\w	[A-Za-z0-9_]	숫자, 알파벳, 언더바를 찾는다.	"$5.28"	/ \w /	5
\W	[^A-Za-z0-9_]	숫자, 알파벳, 언더바가 아닌 것을 찾는다.	"50%"	/ \W /	%
\s	-	화이트스페이스를 찾는다.	"foo bar"	/ \s\w* /	" bar"
\S	-	화이트스페이스가 아닌 것을 찾는다.	"foo bar"	/ \S\w* /	"foo"
\n	-	linefeed 를 찾는다.	-	-	-
\0	-	NUL 문자를 찾는다.	-	-	-
\	-	뒤에 오는 문자가 escape된다.	"a."	/ a\. /	"a."

패턴- 단정 (Assertions)

패턴	설명	예시 문자열	적용패턴	매칭결과
^	뒤에 오는 문자로 시작하는 것을 찾는다.	"an A"	/ ^A /	-
$	앞에 오는 문자로 끝나는 것을 찾는다.	"eater"	/ t$ /	"eat"
\b	단어의 경계인 것을 찾는다.	"between twins"	/ \btw /	between "tw"ins
\B	단어의 경계가 아닌 것을 찾는다.	"between twins"	/ \Btw /	be"tw"een twins
x(?=y)	y랑 일치하는 영역부터 제외한다.	"1,000 dollars"	/ .+(?= dollar) /	1,000
x(?!y)	y랑 일치하지 않는 영역부터 제외한다.	"12.345"	/ \d+(?!\.) /	345
(?<=y)x	y랑 일치하는 영역까지 제외한다.	"$ 1,000"	/ (?<=$ ).+ /	1,000
(?<!y)x	y랑 일치하지 않는 영역까지 제외한다.	"12.345"	/ (?!\.)\d+ /	12

패턴- 그룹과 범위(Groups and ranges)

패턴	설명	예시 문자열	적용패턴	매칭결과
x|y	x 또는 y와 일치하는 것을 찾는다.	"green apple"	/ green|red /	"green"
[xyz]	x, y, z 중 하나를 찾는다.	"green apple"	/ [az] /	"a"
[a-c]	a 부터 c 사이의 값 중 하나를 찾는다.	"green apple"	/ [a-z] /	"g"
[^xyz]	x, y, z가 아닌 것을 찾는다.	"green apple"	/ [^az] /	"g"

패턴- 수량자(Quantifiers)

패턴	설명	예시 문자열	적용패턴	매칭결과
x*	* 앞의 아이템 x가 아예 없거나, 하나 이상 일치하는 것을 찾는다.	"bird"	/ bo* /	"b"
x+	+ 앞의 아이템 x가 하나 이상 일치하는 것을 찾는다.	"bird"	/ bo+ /	-
x?	* 앞의 아이템 x가 아예 없거나, 하나 있는 것을 찾는다.	"angel"	/ e?le? /	"el"
x{n}	{} 앞의 아이템 x의 갯수가 정확히 n개인 것을 찾는다.	"candy"	/ a{0} /	-
x{n,}	{} 앞의 아이템 x의 갯수가 n개 이상인 것을 찾는다.	"candy"	/ a{0,} /	"a"
x{n,m}	{} 앞의 아이템 x의 갯수가 n개 이상, m개 이하인 것을 찾는다.	"candy"	/ a{2,3} /	-

 

정규표현식 플래그

플래그는 /pattern/flag 과 같이 '/'기호 뒤에 작성한다. /pattern/gi 처럼 여러 플래그를 사용할 수도 있다.

플래그	설명
g	모든 문자열에 대해서 검색한다.
i	대소문자를 구별하지 않는다.
m	모든 행에 대해서 검색한다.
s	'.'이 개행(\n)을 포함하도록 한다.
u	유니코드를 지원한다.
y	sticky mode로 문자 내 특정 위치를 검색한다.

 

 

간단한 활용예시 🚀

파일 확장자 검사

const regExp = /\.js$/

regExp.test("index.js");
// true
regExp.test("index.html");
// false

HTTP 스킴 검사

const regExp = /^(http:https):\/\//

regExp.test("https://www.nave.com");
// true
regExp.test("ftp://my-memory/folder");
// false

핸드폰 형식 검사

const regExp = /^\d{3}-\d{3,4}-\d{4}$/

regExp.test("010-1234-5678");
// true
regExp.test("010-01234-5678");
// false
regExp.test("010-a234-5678");
// false

 

 

참고자료

MDN 정규표현식 - Character_Classes

MDN 정규표현식 - Assertions

MDN 정규표현식 - Groups_and_Ranges

MDN 정규표현식 - Quantifiers