[모던 자바스크립트 Deep Dive] 31장. RegExp

minji·2025년 9월 26일
post-thumbnail

"너 나랑 매칭됐어" 💘


정규표현식이란?

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

정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.
(패턴 매칭 기능: 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능)

정규표현식 사용시, 반복문과 조건문없이 패턴을 정의하고 테스트하여 문자열 체크를 할 수 있다.
(단, 주석 또는 공백은 허용되지 않으며 여러 기호를 혼합하여 사용하기때문에 가독성은 좋지 않다.)

정규표현식 생성

정규표현식 생성방법에는 두 가지 방법이 있다.

1️⃣ 정규 표현식 리터럴
2️⃣ RegExp 생성자 함수

일반적으로는 정규 표현식 리터럴을 사용한다.

정규 표현식 리터럴패턴플래그 로 구성된다.

여기서 패턴플래그가 무엇인지 궁금할텐데, 곧 나오니 일단 예제만 확인하고 넘어가자 😉

const target = 'Is this all there is?'

// 패턴: is
// 플래그: i (대소문자 구별 ❌)
const regexp = /is/i

// test 메서드: 문자열에 대해 정규 표현식 regexp 패턴을 검색하여
// 매칭결과를 불리언 값으로 반환
regexp.test(target) // true

RegExp 메서드

정규 표현식을 사용하는 메서드는 다양하게 있지만, 이번 31장 에서는 3가지만 살펴보자.

1️⃣ RegExp.prototype.exec

인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환하며, 매칭 결과가 없는 경우에는 null 을 반환한다.
(단, 문자열 내의 모든 패턴을 검색하는 g 플래그로 지정해도 첫 번째 매칭 결과만 반환한다.)

const target = 'Is this all there is?'
const regExp = /is/

regExp.exec(target)
// ["is", index: 5, input: "Is this all there is?", groups: undefined]

2️⃣ RegExp.prototype.test

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

const target = 'Is this all there is?'
const regExp = /is/

regExp.test(target) // true

3️⃣ String.prototype.match

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

✋🏻 잠깐! 그렇다면 exec 메서드와 어떤 차이점이 있을까?
exec 메서드는 모든 패턴을 검색하는 g 플래그로 지정을 해도 첫 번째 매칭 결과만 반환한다고 했다.
하지만, match 메서드는 g 플래그가 지정되면 모든 매칭 결과를 반환한다는 점이 다르다.

// g플래그 미지정
const target = 'Is this all there is?'
const regExp = /is/

target.match(regExp)
// ["is", index: 5, input: "Is this all there is?", groups: undefined]

// g플래그 지정
const target = 'Is this all there is?'
const regExp = /is/g

regExp.test(target) // ["is", "is"]

플래그

| 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.

플래그는 총 6가지가 있지만, 중요한 3가지만 살펴보자. (TOP3)

플래그의미설명
iIgnore case대소문자 구별없이 패턴을 검색한다.
gGlobal대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
mMulti line문자열의 행이 바뀌더라도 계속 패턴 검색을 한다.

이러한 플래그는 옵션 이므로 선택하여 사용할 수 있으며, 순서 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다.

아무런 플래그를 사용하지 않을 경우에는 기본적으로 대소문자를 구별하여 패턴검색을 한다.
또한, 문자열에 검색 매칭 대상이 1개 이상 존재한다고해도 첫 번째 매칭한 대상만 검색 후 종료한다.

const target = 'Is this all there is?'

target.match(/is/)
// ["is", index: 5, input: "Is this all there is?", groups: undefined]

target.match(/is/i)
// ["Is", index: 0, input: "Is this all there is?", groups: undefined]

target.match(/is/g) // ["is", "is"]

target.match(/is/ig) // ["Is", "is", "is"]

패턴

| 문자열의 일정한 규칙을 표현하기 위해 사용한다.

/ 로 열고 닫으며 문자열 따옴표 는 생략한다.
따옴표 를 생략하는 이유는 포함할 경우, 따옴표까지 패턴에 포함하여 검색하기 때문이다.

패턴은 특별한 의미를 가지는 메타문자 또는 기호 로도 표현할 수 있다.

그렇다면 패턴을 표현하는 방법에는 어떤 내용이 있는지 살펴보자.

1️⃣ 문자열 검색

패턴에 문자 또는 문자열을 지정하면 검색 대상 문자열에서 지정 문자/문자열을 검색한다.

검색 수행은 RegExp 메서드를 사용하여 검색 대상 문자열과 정규 표현식의 매칭 결과를 구할때 이루어진다.

이 때, 플래그를 생략하면 대소문자를 구별하여 매칭 진행을 한 후 첫 번째 결과만 반환하는데, 대소문자 구별없이 검색을 해야할 경우에는 i 플래그 를 사용한다. (첫 번째 결과만 반환되는 내용은 동일하게 적용됨)

2️⃣ 임의의 문자열 검색

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

즉, . 의 갯수는 문자열의 자릿수를 의미하는 것이다.

  • ... 3자리 문자열
  • .. 2자리 문자열
  • ..... 5자리 문자열

3️⃣ 반복 검색

{m,n} 은 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미하며, 콤마 뒤에 공백 이 있으면 정상 동작하지 않는다.

패턴이 {n} 인 경우에는 패턴이 n번 반복되는 문자열을 의미한다. ({n,n} 과 동일의미)
{n,} 패턴의 경우는 최소 n번 반복디는 문자열을 의미한다.

const target = 'A AA B BB Aa Bb AAA'

const regExp = /A{1,2}/g

target.match(regExp) // ["A", "AA", "A", "AA", "A"]

+ 가 붙는 경우가 있는데, 이 경우는 패턴이 최소 한 번 이상 반복되는 문자열을 의미힌다.
({1,} 와 동일한 의미이다.)

const target = 'A AA B BB Aa Bb AAA'

const regExp = /A+/g

target.match(regExp) // ["A", "AA", "A", "AAA"]

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

4️⃣ OR 검색

|or의 의미를 갖는다.

const target = 'A AA B BB Aa Bb AAA'

const regExp = /A|B/g

target.match(regExp) // ["A", "A", "A", "B", "B", "B", "A", "B"]

이 외에도 다양한 형태로 or 의 개념이 사용된다.

  • 분해되지 않은 단어로 검색하려면 + 를 같이 사용하면 된다. ⇒ /A+|B+/g
  • 범위를 지정하기를 원하면 [] 기호 내에 -를 사용하면 된다. ⇒ /[A-Z]+/g
  • 대소문자 구별없이 알파벳을 검색하고 싶을 때는 이렇게 사용하면 된다. ⇒ `/[A-Za-z]+/g``
  • 숫자를 검색하고 싶을 때는 이렇게 사용하면 된다. ⇒ /[0-9 ]+/g
  • 숫자를 검색을 하되 결과에 쉼표로 구분짓고 싶지 않으면 ,를 패턴에 포함시키면 된다. ⇒ /[0-9,]+/g

5️⃣ NOT 검색

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

  • [^0-9] 는 숫자를 제외한 문자를 의미한다.

6️⃣ 시작 위치로 검색

[...] ^ 는 문자열의 시작을 의미한다.

  • /^https/ 는 문자열이 'https' 로 시작하는지 검사한다는 의미이다.

7️⃣ 마지막 위치로 검색

$ 은 문자열의 마지막을 의미한다.

  • /com$/ 은 문자열이 'com'으로 끝나는지 검사한다는 의미이다.

자주 사용하는 정규표현식

위 패턴들을 이용하여 유독 자주 사용하는 정규표현식들이 있다.

  • 특정 단어로 시작하는지 검사
  • 특정 단어로 끝나는지 검사
  • 숫자로만 이루어진 문자열인지 검사 (^\d+$ 사용)
  • 하나 이상의 공백으로 시작하는지 검사 (\s 사용)
  • 아이디로 사용가능한지 검사 (알파벳 구분없이 + 반복 패턴 활용)
  • 메일주소 형식에 맞는지 검사
  • 핸드폰번호 형식에 맞는지 검사 (^\d{3]-\d{3,4}\d{4}$ 사용)
  • 특수문자 포함여부 검사 ([^A-Za-z0-9] 사용)
profile
FE Developer .mjs

0개의 댓글