RegExp

<aside> 💡

정규 표현식: 문자열 대상으로 패턴 매칭 기능 제공

</aside>

1. 정규 표현식 생성

/regexp/i

1. /: 정규식 시작
2. regexp: 패턴, 패턴 문자열과 일치하는지 검색
3. /: 정규식 끝
4. i: 플래그, 옵션 제공

const regexp = /is/i;
// const regexp = new RegExp(/is/i)

1. 리터럴 생성법으로 생성 가능
2. new RegExp 생성자를 통해 생성 가능

2. RegExp 매서드

RegExp.prototype.exec

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

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

매칭된 문자열, 매칭 위치 정보

RegExp.prototype.test

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

regExp.test(target); // -> true

매칭 되었는지 true, false 반환

String.prototype.match

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

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

exec 함수와 동일한 결과

RegExp.prototype.exec vs String.prototype.match

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

console.log(regExp.exec(target)); // [ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]
console.log(target.match(regExp)); // [ 'is', 'is' ]

1. match: RegExp 프로토타입 함수, exec: String 프로토타입 함수
2. match: g 옵션으로 여럿 검색 가능, exec: 앞서 하나만 검색 가능

3. 플래그

4. 패턴

문자열 검색

console.log('Is this all there is?'.match(/is/ig)); // [ 'Is', 'is', 'is' ]

is와 겹치는 문자열 검색

임의의 문자열 검색

console.log('Is this all there is?'.match(/.../g));
console.log('Is this all there is?'.match(/../g));
`
[
  'Is ', 'thi',
  's a', 'll ',
  'the', 're ',
  'is?'
]
[
  'Is', ' t', 'hi',
  's ', 'al', 'l ',
  'th', 'er', 'e ',
  'is'
]
`

. 하나 당 임의의 문자 한 개를 의미

반복 검색

console.log('A AA B BB Aa Bb AAA'.match(/A{1,2}/g)); // [ 'A', 'AA', 'A', 'AA', 'A' ]

{m,n}으로 A의 반복이 최소 1번 최대 2번 반복되는 문자열 검색

console.log('A AA B BB Aa Bb AAA'.match(/A+/g)); // [ 'A', 'AA', 'A', 'AAA' ]

+기호를 사용하여 ‘A’가 한 번 이상 반복되는 문자열 ‘A’, ‘AA’, ‘AAA’, … 검색

or 검색

console.log('A AA B BB Aa Bb AAA'.match(/[A-Z]+/g));
`
[
  'A',   'AA',
  'B',   'BB',
  'A',   'B',
  'AAA'
]
`

[]괄호에 -를 사용하여 범위로 검색 가능

\d, \w

console.log('A AA 12,345'.match(/[\\d]+/g)); // [ '12', '345' ]
console.log('A AA 12,345'.match(/[0-9]+/g)); // [ '12', '345' ]

\d를 사용하여 [0-9] 표현 가능

console.log('A AA 12,345'.match(/[\\D]+/g)); // [ 'A AA ', ',' ]

\D는 [0-9] 이외의 것을 의미

console.log('A AA 12,345'.match(/[\\w]+/g)); // [ 'A', 'AA', '12', '345' ]

\w는 [A-Za-z0-9_]를 의미

console.log('A AA 12,345'.match(/[\\W]+/g)); // [ ' ', ' ', ',' ]

\W는 [A-Za-z0-9_]의 반대를 의미

NOT 검색

console.log('A AA 12 Aa Bb'.match(/[^0-9]+/g)); // [ 'A AA ', ' Aa Bb' ]

[^…]: not을 의미, [0-9] 제외하고 검색과 동일하다.

시작 및 끝 검색

console.log('<https://github.com/>'.match(/^https/g)); // ['https']

[]로 둘러싸여있지 않으면 ^는 시작을 의미한다.

console.log('<https://github.com/>'.match(/com\\/$/g)); // [ 'com/' ]

$는 마지막 문자열을 의미

5. 실제 사용 예제

아이디 검사

console.log(/^[A-Za-z0-9]{4,10}$/g.test('abc123')); // true

영어 문자와 숫자, 4~10글자로 되어 있어야함을 검사

핸드폰 번호 형식 검사

console.log(/^\\d{2,3}-\\d{3,4}-\\d{4}$/g.test('010-1234-5678')); // true

Quiz

#1. 다음의 출력 결과는?

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

console.log(regExp.exec(target));
console.log(target.match(regExp));

#2. 다음의 출력 결과는?

console.log('A AA 12,3_45'.match(/[\\W]+/g));