[JS] 정규표현식

Ch.31 정규표현식

 

🔎 정규 표현식이란?

문자열을 대상으로 패턴 매칭 기능을 제공 = 특정 패턴과 일치하는 문자열을 검색 or 추출 or 치환하는 기능

const tel = 010-1234-5678;
const regExp = /^\d{3}-\d{4}-\d{4}/;

// tel이 조건에 맞는지 테스트
regExp.test(tel);  // true

 

 

🔨사용하는 방법

1. 정규표현식 리터럴

→ 패턴과 플래그로 구성

정규표현식 리터럴

const target1 = 'Is this all there is?';
const target2 = 'Is this all?';

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

regexp.test(target1); // true
regexp.test(target2); // true

2. RegExp 생성자 함수

new RegExp(pattern[, flags])

// RegExp 생성자 함수 사용 예시
const target = 'Is this all there is?';
const regexp = new RegExp(/is/i);
regexp.test(target); // true

// 동적으로 사용 가능
const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;  // gi는 문자열 전체에서 대소문자 구분 안하고
count('Is this all there is?', 'is') // 3 -> is가 Is에 하나, this에 하나, 마지막에 하나
count('Is this all there is?', 'xx') // 0 -> xx는 없음

 

🎮RegExp의 메서드들

1. exec 메서드

인수로 전달받은 문자열에 대해 패턴을 검색해서 매칭 결과를 배열로 반환, 없으면 null 반환

모든 패턴을 검색하는 g 플래그로 해도 무조건 첫번째 매칭 결과만을 반환함!!!

const target = 'Is this all ther is?'
const regExp = /is/i
console.log(regExp.exec(target))

// 결과값
[
  0: "Is",               // 매치된 문자열 전체
  index: 0,              // 매치가 발견된 시작 인덱스 위치
  input: "Is this all ther is?",  // 검색이 수행된 원본 문자열
  groups: undefined      // 정규식에서 캡처 그룹이 있을 경우 여기에 저장됨
]

 

2. test 메서드

인수로 전달받은 문자열에 대해 패턴을 검색해서 매칭 결과를 boolean으로 반환

const target = 'Is this all ther is?'
const regExp = /is/i
console.log(regExp.test(target))  // true

 

3. match 메서드(String의 빌드인 객체 → 문자열에 붙여서 써야함)

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

const target = 'Is this all there is?'
const regexp = /is/
console.log(target.match(regexp))

// 결과값
[
  0: "is",              // 매치된 문자열
  index: 5,             // 매치가 발견된 위치 (this의 'is')
  input: "Is this all there is?",    // 원본 문자열
  groups: undefined     // 캡처 그룹 결과 (여기서는 사용하지 않음)
]

exec 메서드와 비슷하게 반환되지만, 다른점은 g 플래그를 사용하면 모든 매칭 결과를 배열로 반환함

const regexp = /is/g;  // g 플래그 추가
console.log(target.match(regexp));
// 결과: ["is", "is"]  - 'this'와 마지막 'is'의 두 개가 배열로 반환

 

 

🚩플래그

정규 표현식에서 검색 방식을 설정하기 위해 사용됨

• 필수가 아님
• 순서 상관 없이 여러개 사용 가능
• 플래그가 없다면 대소문자 구별됨 + 첫번째 매칭 대상이 검색되면 종료

 

🧩패턴

일정한 규칙을 표현하기 위해 사용됨

• /로 열고 닫으며 따옴표는 생략
• 특별한 의미를 가지는 메타문자 or 기호로 표현 가능

임의의 문자열 검색

점 하나(.) = 임의의 문자 한개

const target = 'Is this all there is?'
const regexp = /.../g
// 임의의 3개의 문자를 대소문자 구별해서 전역 검색
target.match(regexp) // ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']

 

 

반복 검색

(1) {m,n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열

• 여기서 {m, n}이런식으로 중간에 띄어쓰기하면 동작 안함
• {n} 이렇게 하나만 있으면 {n,n}과 동일
• {n,} 이렇게 뒤에가 생략되어 있으면 {1,∞}와 동일 = 최소 n번

const target = 'A AA B BB Aa Bb AAA'
const regExp = /A{1,2}/g
// A가 최소 1번, 최대 2번 반복되는 문자열 전역 검색
target.match(regExp)  // ['A', 'AA', 'A', 'AA', 'A']

 

(2) +는 앞선 패턴이 최소 한번 이상 반복되는 문자열

즉, +는 {1,}과 같다.

const target = 'A AA B BB Aa Bb AAA'
const regExp = /A+/g
// A가 최소 1번 반복되는 문자열 전역 검색
target.match(regExp)   // ['A', 'AA', 'A', 'AAA']

 

(3) ?는 최대 한번 반복되는 문자열

즉, ?는 {0,1}과 동일함

const target = 'color colour colouur'
// colo까지는 있어야하고, u는 최대 한번(없어도 됨), r이 있어야함
const regExp = /colou?r/g
target.match(regExp)  // ['color', 'colour']

 

 

OR 검색

• | 사용
• [ ] 사용

const target = 'A AA B BB Aa Bb'

// 전역에서 A 또는 B 검색
const regExp1 = /A|B/g
target.match(regExp1) // ['A', 'A', 'A', 'B', 'B', 'B', 'A', 'B']

// 분해 안하고 검색하려면 +를 함께 사용
const regExp2 = /A+|B+/g
target.match(regExp2) // ['A', 'AA', 'B', 'BB', 'A', 'B']

// 근데 2번을 []를 이용해서 이렇게도 쓸 수 있음
const regExp3 = /[AB]+/g
target.match(regExp3) // ['A', 'AA', 'B', 'BB', 'A', 'B']

// 만약 범위를 지정하고 싶으면 []안에 -를 사용
const regExp4 = /[A-Z]+/g
// 이 경우엔 대문자 알파벳 검색
target.match(regExp4)  // ['A', 'AA', 'B', 'BB', 'A', 'B']

// 대소문자 구별 안할려면 이렇게
const regExp5 = /[A-Za-z]+/g
target.match(regExp5)  // ['A', 'AA', 'B', 'BB', 'Aa', 'Bb']

// 이걸 활용해서 숫자도 가능
const newTarget = 'AA BB 12,345'
const regExp6 = /[0-9]+/g
newTarget.match(regExp6) // ['12', '345']

 

[A-Z], [0-9]이렇게 일일히 써주는 대신, \d, \w등을 이용해서 간단하게 쓸 수도 있음

const target = 'AA BB 12,345'

// \d는 숫자
const regExp1 = /[\d,]+/g    // 숫자 또는 ','가 한번 이상 반복되는 문자열
target.match(regExp1)  // ['12,345']

// \D는 숫자가 아닌 문자
const regExp2 = /[\D,]+/g
target.match(regExp2)  // ['AA BB ', ',']

// \w는 알파벳, 숫자, 언더스코어 [A-Za-z0-9_]와 같음
const regExp3 = /[\w,]+/g
target.match(regExp3)  // ['AA', 'BB', '12,345']

// \W는 \w의 반대
const regExp4 = /[\W,]+/g
target.match(regExp4)  // [' ', ' ', ',']

 

 

NOT검색

[ ] 안에서의 ^는 not을 의미함(ex. [^0-9]는 숫자를 제외한 문자)

const target = 'AA BB 12 Aa Bb'
// 숫자 제외 검색
const regExp = /[^0-9]+/g
target.match(regExp)  // ['AA BB ', ' Aa Bb']

 

 

시작 위치로 검색

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

const target = 'https://memezz.tistory.com'
const regExp = /^https/g
regExp.test(target)  // true

 

 

마지막 위치로 검색

$는 문자열의 마지막을 의미

const target = 'https://memezz.tistory.com'
const regExp = /com$/g
regExp.test(target)  // true