[Group Study, 모던 자바스크립트 Deep Dive] - 31 RegExp 정규표현식

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비나 novice인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

31.1 RegExp -  정규표현식

정규 표현식(Regular Expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 문자열을 대상으로 패턴 매칭 기능을 제공하는데, 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능이다.

반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있는 장점이 있다. 하지만, 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않고, 퍼포먼스 이슈가 종종 생긴다.

---

31.2 정규 표현식의 생성

정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 

이처럼 정규 표현식 리터럴은 패턴과 플래그로 구성된다. 

[예제 31-01]

const target = 'Is this all there is?'

// 패턴 is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp = /is/i;

regexp.test(target)


// RegExp 생성자 함수를 사용한 객체 사용

const regexp = new RegExp(/is/i)
regexp.test(target)

---

31.3 RegExp 메서드

31.3.1 RegExp.prototype.exec

exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다. (없는 경우 null)

31.3.2 RegExp.prototype.test

test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.

31.3.3 String.prototype.match

match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.

 

---

31.4 플래그

잘 사용되는 3개의 플래그이다. 플래그는 옵션이므로 선택적으로 사용할 수 있으며, 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다. 어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴을 검색한다. 그리고 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색하고 종료한다.

---

31.5 패턴

패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지도 패턴에포함되어 검색된다. 또한 패턴은 특별한 의미를 가지는 메타 문자 또는 기호로 표현할 수 있다. 어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때 '정규 표현식과 매치한다'라고 표현한다.

31.5.2 임의의 문자열 검색

.은 임의의 문자열 한 개를 의미

[예제 31-02]

const target = 'Is this all there is?';

const regExp = /.../g;

target.match(regExp)

-- output--
(7) ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']

31.5.3 반복 검색

{m, n}은 앞선 패턴이 최소 m번 최대 n번 반복되는 문자열을 의미한다.

{n}은 앞선 패턴이 n번 반복되는 문자열을 의미. 즉. {n, n}

{n, }은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미

[예제 31-03]

const target = 'A AA b BB Aa Bb AAA';

// 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{1,2}/g

target.match(regExp)

-- output--
(5) ['A', 'AA', 'A', 'AA', 'A']

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미. 즉 {1,}과 동일

?는 앞선 패턴이 최대 한 번(0번 포함)이상 반복되는 문자열을 의미. 즉 {0,1}과 동일

31.5.4 OR 검색

| 는 or의의미 

[] 내의 문자는 or로 동작한다. 그 뒤에. +를 사용하면 앞선 패턴을 한번 이상 반복한다.

[예제 31-04]

const target = 'A AA b BB Aa Bb AAA';

const regExp = /[AB]+/g;

target.match(regExp)

-- output--
(6) ['A', 'AA', 'BB', 'A', 'B', 'AAA']

범위를 지정하려면 []내에 -를 사용한다.

\d는 숫자를 의미하고 [0-9]와 같다.

\D는 문자를 의미한다. \d와 반대

\w는 알파벳, 숫자, 언더스코어를 의미. 즉, [A-Za-z0-9_]와 동일

\W는 \w와 반대

 

31.5.5 NOT 검색

[...]내의 ^는 not을 의미한다.

/[^0-9]+/g는 숫자를 제외한 문자열 패턴

31.5.6 시작 위치로 검색

 

[...]밖의 ^는 시작을 의미한다.

31.5.7 마지막 위치로 검색

$는 마지막을 의미한다.