[JS - 개념] 정규표현식

개념

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

정규 표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에이터에 내장되어 있다.

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.

(패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.)

 

 장점 

   반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크

 

  단점

    주석이나 공백을 허용하지 않고 여러 가지 기호를 혼영하여 사용하기 때문에 가독성이 좋지 않다

 

 

 

사용방법

 

   RegExp 메서드

          1) regExp.prototype.exec

                     exec() 매서드는 주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 null로 반환한다.

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

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

                   

index  : 일치가 문자열에서 위치하는 인덱스 ( 0 시작)

input : 원본문자열

 

주의 : exec 매서드는 문자열 내의 모든 패턴을 검색하는 g플래그를 지정해도 첫 번째 매칭 결과만 반환한다

 

 

    2) RegExp.prototype.test

 

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

 

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

regExp.test(target);  // true

 

3) 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]

 

match는 exec와 다르게 g플래그를 지정하면 모든 매칭 결과를 배열로 반환한다.

 

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

target.match(regExp);
// ["is", "is"]

(대문자 is는 소문자랑 대문자랑 일치하지 않기에 is 두 개만 반환)

 

플래그

 

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.

플래그는 총 6개 있다.  그중 중요한 3개의 플래그를 살펴보자

 

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m	Mutil line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

 

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

 

 

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

//target 문자열에서 is 문자열을 대소문자를 구별하여 한 번만 검색한다 
target.match(/is/);
// ["is", index: 5, input: "Is this all there is?", groups: undefined]

//target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색한다
target.match(/is/);
// ["Is", index: 0, input: "Is this all there is?", groups: undefined]

// target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색한다.
target.match(/is/g);
// ["is", "is"]

// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// ["Is", "is", "is"]

 

패턴

 

1) 문자열 검색 

    위에처럼 패턴과 플래그를 적절히 사용해주면 된다.

 

2) 임의의 문자열 검색

 

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

    ... 이렇게 3개를 연속하여 입력하면 문자의 내용과 상관없이 3자리 문자열과 매치된다.

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

// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;

target.match(regExp); 
// ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]

 

3)반복 검색

    

    {m,n}은 앞선 패턴(다음 예제의 경우 A)이 최소 m번, 최대n번 반복되는 문자열을 의미한다. 

    콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의하기 바란다.

 

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

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

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

 

 

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

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

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

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

 

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

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

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

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

 

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

즉, +는 {1,}과 같다

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

// 'A'가 최소 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /A+/g;

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

 

 

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

const target = 'color colour';

//'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고 'r'이 이어지는
//문자열 'color', 'colour'를 전역 검색한다.
const regExp = /colou?r/g;

target.match(regExp); // ["color", colour"]

 

 

4) OR 검색  (  |  )

 

  | 은 or의 의미를 갖는다. 다음 예제의 /A|B/는 'A' 또는 'B'를 의미한다.

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

// 'A' 또는 'B'를 전역 검색한다.
const regExp = /A|B/g;

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

 

 

 

분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용한다.

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

// 'A' 또는 'B' 가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[AB]+/g;

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

 

 

 

대소문자를 구별하지 않고 알파벳을 검색하는 방법은 다음과 같다

const target = 'AA BB Aa Bb 12';

// 'A' ~ 'Z' 또는 'a' ~ 'z' 가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[A-Za-z]+/g;

target.match(regExp); 
// ["AA", "BB", "Aa", "Bb"]

물론  const regExp = /[ab]+/ig 이렇게 해도 된다.

 

 

 

 

숫자를 검색하는 방법은 

const target = 'AA BB 12,345' ;

// '0' ~ '9'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[0-9]+/g;

target.match(regExp); // ["12", "345"]

위 예제의 경우 쉼표 때문에 매칭 결과가 분리되므로 쉼표를 패턴에 포함시킨다.

 

const target = 'AA BB 12,345' ;

// '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[0-9,]+/g;

target.match(regExp); // ["12,345"]

이것을 더 간단하게 하고 싶으면 \d 로 표현 하면 된다.

\d 는 [0-9]와 같다.

\D 는 \d와 반대로 동작한다.  즉, \D는 숫자가 아닌 문자를 의미한다.

 

 

 

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

\W는 \w와 반대로 동작한다. 

const target = 'Aa Bb 12,345 _$%&';

// 알파벳, 숫자, 언더스코어, ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
let regExp = /[\w,]+/g;

target.match(regExp); 
// ["Aa", "Bb", "12,345", "_"]

regExp = /[\W,]+/g;

target.match(regExp); 
// [" ", " ", ",", " $%&"]

 

 

5) NOT 검색

   [...] 내의 ^은 not의 의미를 갖는다. 예를 들어, [^0-9]는 숫자를 제외한 문자를 의미한다.

    따라서 [0-9]와 같은 의미의 /d와 반대로 동작 하는 /D는 [^0-9]와 같다

 

const target = 'AA BB 12 Aa Bb';

//숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;

target.match(regExp); 
//["AA BB Aa Bb"]

 

6) 시작 위치로 검색 

  [...] 밖의 ^은 문자열의 시작을 의미한다. 단, [...] 내의 ^은 not의 의미를 가지므로 주의하기 바란다.

const target = 'https://poiemaweb.com';

// 'https'로 시작하는지 검사한다.
const regExp = /^https/;

regExp.test(target);

// true

 

 

7) 마지막 위치로 검색

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

const target = 'https://poiemaweb.com';

// 'com'으로 끝나는지 검사한다.
const regExp = /com$/;

regExp.test(target);

// true

 

 

@부호정리

 

출처 : hamait 블로그