[JavaScript] 정규표현식

학원에서 가르치는 내용 중에 정규표현식이라는게 있다. 특정 타입의 데이터가 들어갈 수 있음을 의미하는 식을 통해서 해당하는 값을 찾는다던가, 제한하거나 이런 행위를 하기 위해 주로 사용하는데 아무래도 생겨먹은게 귀찮게 생겼다보니 이걸 통해 해결하기보단 다른 방법을 자꾸 모색하게 된다. 근데 요즘 Vanilla JS 개발 연습하면서 도저히 안쓰고는 못배기겠다 싶은 순간이 찾아와 정리할 때가 온 것 같아 일단 정리한번 해두고 넘어가려고 한다. 

 

1. 정규표현식이란?

프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어를 말한다. 정규식이라고도 부르며, 보통 RegEx 혹은 RegExp라 많이 쓴다. - 출처 : 나무위키 -

일단 모든 언어들이 정규표현식을 사용할 수 있도록 환경이 마련되어있는데, 당연히 자바스크립트도 그렇다. 근데 유난히 자바스크립트가 외계어처럼 보이는 이유는 사용하는 방법이 '/' <= 요 슬래시를 사용해서 표현을 하다보니, 그런 것 같다. 

일반적으로 뭐 자바 같은 경우엔 "" 쌍따옴표를 사용해 문자열이라는 표시를 해주고 안에서는 그냥 패턴만 입력하는 식이고, 파이썬은 그냥 아예 바로 패턴 입력을 때려버리기 때문에, 누가봐도 오 정규표현식 ㅇㅋ~ 할 수 있지만, 자바스크립트만 꼭 '/' 이거 쓰는거 때문에 너무 가독성이 박살나서 괜히 꼴뵈기가 싫다. 이스케이프 문자(\) 도 같이 들어있으면 더 환장함.

 

2. 정규표현식 사용법

이 정규표현식 사용법이라는게 진짜 분량이 겁나 많은데 솔직히 다 외울 자신이 없다. 나도 항상 쓰는게 아니라 진짜 도저히 다른 방법으로 해결할 방법이 안보이면 사용하는 편인데, router 이런거 생각하면 도저히 안쓸 자신이 없었다. 그래서 적어도 최소한 router에서 사용하는 정도까지는 정리해보자.. 의 방향성이기 때문에, 많이는 안하고 진짜 모르면 답없다. 정도만 작성해두겠다. 

뭐 굳이 이런게 아니라도, split(), match(), find() 이런거랑 조합해서 사용하기 좋다. router도 사실상 따져보면 match() 나 find()랑 엮어서 많이 쓴다. 

 

1) 형식

const rex1 = /^www/
const rex2 = new RegExp("^www")

일단 가장 default 로 많이 사용하는 형식은 위 코드의 rex1과 같다. 슬래시(/) 두 개 사이에 패턴을 입력해주면 되는데, 참고 삼아 내가 입력한 패턴의 의미를 말하자면 www로 시작하는 문자열을 이야기하는거다.

두번째의 경우 생성자를 활용한 정규표현식 생성법인데, 뭐 이런게 있다 정도만 알아두고 실제론 전자를 진짜 훠어어어얼씬 많이 사용하니까 요정도만 기억해두면 될 것 같다. 

 

2) 중요한 패턴들

내가 일일히 작성하면 가독성 박살나고 보기 싫을 것 같아 다른 블로그에서 긁어왔다. 출처는 남김.

출처 : https://curryyou.tistory.com/234

 

(1) 문자열 패턴

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

위의 패턴을 잘 조합해서 슬래시(/) 사이에 넣어주면 패턴에 따라서 맞는 문자열들을 찾아내거나 뭐 그런 행위들을 할 수가 있다. 

<= 

역슬래시('\')의 경우 이스케이프 문자라고 해서 그냥 쉽게 말해 원래 특별한 역할을 하는 애들이 있는데(주로 특수 문자들) 그 역할에서 탈출시켜줘서 자유를 안겨준다고 생각하면 된다. 

그래서 역할에서 탈출한 문자들의 경우 일반 문자열처럼 매칭이 되는 조건으로 사용이 가능하다. 

 

(2) 검색패턴

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

제목에서 말했듯 진짜 검색을 하기 위한 패턴이다. 위에서 작성한 문자열 패턴의 경우 이 검색에 조건을 만들어내는 역할이라고 생각하면 되고, 실제 검색을 하기 위해선 이 검색패턴이랑 섞어서 사용해줘야한다. 가볍게 예를 들어보면, 아까 앞에서 /^www/ 쓴거처럼 www로 시작하는 문자열 내놔봐라. 라는 의미를 가지는 거 마냥 사용한다.

 

(3) 갯수 표현

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

이거의 경우에는 특정 문자열이 뭐 몇개 있으면, 최소 하나라도 있으면, 뭐 이런 문자열 개수에 관련한 조건을 위한거다.  더 설명할게 없긴함.. (퍼온 블로그에서 너무 정리를 잘해주셔서 감사히 사용하겠습니다..)

 

(5) 정규표현식 플래그

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

플래그는 나도 처음봤는데, 이런 옵션 설정이 가능한지 몰랐다. 난 이 정규표현식 실제로 많이 사용했던게 학원에서 파이썬 데이터 분석할 때 죽어라고 썼는데, 거기선 못봄.. 아니면 있었는데 내가 못본걸지도.. 하여튼 이 정규표현식 플래그의 경우 슬래시(/) 두개 사이의 패턴입력이 모두 끝나고 제일 뒤에 있는 슬래시바로 뒤에 입력해주면 된다. 

 

일단 이번 게시물의 경우 많은 블로그를 찾아봤는데, 딱 내 수준에 필요할 만큼만 예쁘게 잘 정리해주신 블로그가 있어서 설명 부분의 경우 거기 내용을 그대로 긁어왔다. 위에서도 남겨뒀지만 일단 여기도 출처 남겨둠.

(여기 들어가면 사용 예시도 잘 써두셨다. )

출처 : https://curryyou.tistory.com/234

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