JavaScript I 정규 표현식 박살내기 💢

 

 

 

 

정규 표현식 박살내기라는 거창한 제목을 짓긴 했지만, 사실 목적은 이거 뭐였지 할 때 찾기용으로 작성했다. (ㅎㅎ)

언젠가는 너무나 자연스럽게 사용할 그날을 위해 파이팅~

 

0. 정규 표현식이란 무엇인가?

정규 표현식은 일정한 패턴을 가진 문자열 집합을 표현하기 위해 사용하는 형식 언어이다.

자바스크립트라고 제목에 붙여놓기도 했으나 사실 JS 고유 문법은 아니다. 대부분의 프로그래밍 언어, 에디터에 내장되어 있다.

문자열을 대상으로 패턴 매칭 기능을 제공하는데 이는 특정 패턴과 일치하는 문자열을 검색 / 추출 / 치환 할 수 있다는 걸 의미한다.

 알고리즘 문제를 풀 때 나도 모르게 조건문, 반복문을 통해 체크했었다. 정규식을 이용하면 한 번에 체크 가능하다는 걸 꼭 기억하자!
 하지만, 가독성이 좋지 않다는 문제가 있음을 인지하자.

 

1. 정규 표현식, 어떻게 만들까?

정규 표현식 리터럴

슬래쉬(/)로 패턴을 감싸고 마지막에 (선택)플래그를 붙여 만든다.

/정규 표현식 패턴/플래그
ex. 정규표현식을할당할변수 = /burger/i
찾을문자열.test(정규표현식을할당한변수);
(정규 표현식을 사용할 문자열에 burger(패턴)가 들어가는 지 확인한다. 이때 i는 대소문자를 구별하지 않겠다는 의미.)

RegExp 생성자 함수

❗️RegExp 생성자 함수를 사용하면 동적으로 RegExp 객체를 생성할 수 있다.

1. new RegExp(/패턴/플래그);
2. (RegExp 객체) 
const 변수 = (문자열 담을 변수, 패턴 담을 변수) = > (문자열 담은 변수.match(new RegExp(패턴 담은 변수, "플래그")) ?? [] ).length;

 

2. RegExp 메서드

RegExp.prototyoe.~

 

exec()

: 패턴 검색 후 매칭 결과를 배열로 반환.

: 매칭 결과 없을 때는 null 반환.

: g 플래그를 사용해도 첫 번째 매칭 결과만 반환.

❗️정말 말그대로 첫 번째 매칭된 패턴과 같은 문자열에 대한 정보를 반환해주는 느낌. 

 

test()

: 패턴 검색 후 매칭 결과를 불리언 값으로 반환.

 

match()

: 패턴 검색 후 매칭 결과를 배열로 반환.

: g 플래그가 지정되었을 때 모든 매칭 결과를 배열로 반환.

❗️매칭된 문자열들의 정보라기보다는 말그대로 매칭된 문자열들을 배열에 집어넣어주는 느낌이다. 

❗️몇 개나 겹칠까요? 같은 문제에 사용하기 좋을 듯.

 

그밖에도 몇 개의 String 메서드를 사용할 수 있다. ⚠️MDN 

 

3. 플래그

총 6개의 플래그가 있다.

i	대소문자 구별하지 않고 검색
g	패턴과 일치하는 모든 문자열 전역 검색
m	대상 문자열의 행이 바뀌더라도 패턴 검색을 계속한다 ❗️트위터, 인스타그램 ... 등 처럼 행이 여러개인 게시물이 올라오는 곳에서 검색 기능 만들 때 필수일듯 !!
s	개행문자(/n)가 "."와 일치함
u	유니코드 전체 지원. 패턴에 유니코드를 사용할 수 있다.
y	문자의 특정 위치에 찰싹 달라붙어서(sticky) 그곳부터 검색을 시작한다. 일명 sticky mode !

자주 사용되는 건 i, g, m이라고 한다.

 

이 플래그들은 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있다.

만약 플래그를 사용하지 않으면, 대소문자를 구별하고 + 매칭 대상이 1개 이상 존재한다고 해도 첫 번째 매칭한 대상만 검색하고 종료한다.

 

4. 패턴

반복 검색

모두 앞선 패턴을 대상으로 한다

{m,n}

최소 m번 최대 n번 반복되는 문자열을 의미.

⚠️콤마 뒤에 공백이 있으면 정상동작하지 않을 수 있으니 주의.

/A{1,2}/g -> A가 최소 1번 최대 2번 반복되는 문자열을 전역 검색
"A", "AA" 까지는 검색되지만, "AAA"부터는 x

 

{n} ( = {n, n} )

패턴이 n번 반복되는 문자열을 의미.

/A{3}/g
"AAA"

 

{n,}

최소 n번 이상 반복되는 문자열을 의미.

/A{2,}/g
"AA", "AAA", "AAAA" ...

 

+ ( = {1,} )

최소 한번 이상 반복되는 문자열을 의미.

/A+/g
"A", "AA", "AAA" ...

 

? ( = {0,1} )

최대 한 번(0번 포함)이상 반복되는 문자열을 의미한다. 

문자열 = "color colour";
/colou?r/g;
"color", "colour"
colo 다음 u가 최대 한 번 이상(0번도 포함) 반복되고 r이 이어지는 문자열과 매치

 

임의 문자열 검색

.

임의의 문자 한 개를 의미하며, 문자의 내용은 무엇이든 상관없다.

.(문자1개) ..(문자2개) ...(문자3개) ..... 등
/..../g -> 임의의 4글자 문자. (공백도 포함)

 

OR 검색

| 은 or 의 의미

/A|B/g
A 혹은 B 전역 검색 (A만 나오거나 B만 나오는 게 아니라 A, B 둘 다 나온다. 따로따로 매치되는 문자열을 검색할 뿐.)
이 문자열에 A 혹은 B가 들어있나요? 라고 묻는 패턴이라고 이해하자 ... 

분해되지 않은 단어는 +를 함께 사용

/A+|B+/g
A 혹은 B가 최소 1번 이상 반복되는 문자열을 찾는다.

[] 내의 문자는 or로 동작

/A+|B+/g
를 []을 사용하여 바꾸면
/[AB]+/g
[]내의 문자는 or로 동작 A or B
그 뒤에 +를 사용하면 앞선 패턴을 한 번 이상 반복 

범위 지정은 []내에 - 사용

/[A-Z]+/g
A 부터 Z까지 각각 최소 한 번 이상 반복되는 문자열을 전역 검색

숫자 검색

/[0-9]+/g
0부터 9까지의 숫자 각각 최소 한 번 이상 반복되는 문자열 전역 검색

만약 123,456 같이 쉼표가 포함된 문자열의 경우 결과가 분리된다.
이때에는 쉼표를 패턴에 포함시켜 검색한다.

/[0-9,]+/g
0~9 또는 , 가 최소 1번 이상 포함되는 문자열을 전역 검색

숫자 검색 간단 버전!

\d 는 0-9와 같다.

➕\D는 \d의 반대. 즉 숫자가 아닌 문자를 의미한다.

/[0-9,]+/g를 간단하게 하면
/[\d,]+/g !!!!

알파벳, 숫자, 언더스코어 검색 간단 버전!

\w는 A-Za-z0-9_ 와 같다.

➕\W는 \w의 반대. 알파벳, 숫자, 언더스코어가 아닌 문자를 의미한다.

/[\w,]+/g
알파벳 이나 숫자 나 언더스코어 나 쉼표 가 최소 한 번 이상 반복되는 문자열을 전역 탐색

 

NOT 검색

not

[] 내의 ^은 not의 의미

/[^0-9]/g 는 숫자를 제외한 문자열 전역 검색
- > /[\D]/g 와 같지용~

 

시작 위치 검색

[] 밖의 ^는 문자열의 시작

/^abc/g -> abc로 시작하는 문자열 전역 검색
/^[\d]/g -> 0-9숫자로 시작하는 문자열 전역 검색

 

마지막 위치 검색

$는 문자열의 마지막

/com$/g -> com으로 끝나는 문자열 전역 검색
/[\d]$/g -> 0-9 숫자로 끝나는 문자열 전역 검색

 

 

 

 

 

 

쓰다보니 읽을 때보다 더 이해가 잘 된 느낌이다.

정규식을 보면 보통 눈이 돌아가버리는데 ... 

한 가지 팁을 습득했다면 ... 일단 슬래쉬랑 플래그 떼고 시작해서 최대한 잘게잘게 쪼개는 것이다 (당연한 거 아녀?)

후 무서워하지말고 일단 맞닥뜨리면 아주 간단한거라도 꼭 해석하고 넘어가는 습관을 들여야겠다.

 

 

 

---

 

 

 

 

도움을 받은 감사한 곳들 👇

https://ko.javascript.info/regexp-introduction

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions#플래그를_활용한_고급_탐색

모던 자바스크립트 Deep Dive (서적)