JS, 정규표현식(RegExp)

[ 정규표현식(regular expression) ]

정규 표현식이란 일정한 ‘패턴’을 가진 ‘문자열’의 ‘집합’을 표현하기 위해 사용하는 ‘형식 언어(formal language)’

정규 표현식은 JS의 고유 문법이 아니며, 대부분의 프로그램 언어와 코드 에디터에 내장되어 있음

JS는정규 표현식

문법

을ES3부터 도입하였음

 

▶ 정규 표현식의 역할과 단점

정규 표현식은 문자열을 대상으로 패턴 매칭 기능(검색, 추출, 치환)을 제공

문자 검색부터 유효성 검사등의 복잡한 문자 일치 기능 등을 정규 표현식 패턴으로 빠르게 수행할 수 있음

다만 정규 표현식은 주석이나 공백을 허용하지 않고 여러 기호를 혼합해 사용하기에 가독성이 좋지 않음

 

▶ 정규표현식 생성

1. 리터럴 방식

정규표현식은 /로 감싸진 패턴을 리터럴(데이터 그자체, 변수에 넣는 변하지 않는 데이터)로 사용함

 

정규 표현식 리터럴은 패턴(pettern)과 플래그(flag)로 구성됨

 

const regexp = /^abc/;   // /패턴/
const regexp2 = /^abc/gi; // /패턴/플래그

 

정규표현식 리터럴을 사용하면 정규 표현식 객체가 생성됨(메소드 이용가능)

정규 표현식 리터럴을 사용하는 것이 일반적인 방법이지만 상황에 따라 RegExg 생성자 함수를 써야만 하는 경우도 있음

 

2. RegExp 생성자 함수 방식

RegExg 생성자 함수를 호출하여 RegExp 객체를 생성

 

const regexp = new RegExp(/^abc/i);

 

3. 재할당 방식(Ree-compile)

사용중인 정규 표현식을 재할당 할 수 있음

 

let regexp = /^abc/;
regexp = /^abc/i;

 

▶ 정규 표현식 관련 JS 속성

flags

정규 표현식에서 플래그만 추출한 경우 사용. 알파벳 순서대로 값을 반환

 

new RegExp("^abc", "gi").flags;
// "gi"

/^abc/igy.flags;
// "giy"

 

source

정규 표현식에서 패턴만  추출한 경우 사용

 

new RegExp("^abc", "gi").source;
// "^abc"

/^abc/igy.source;
// "^abc"

 

말고도 여러가지 속성들이 있음

 

▶ 정규 표현식 관련 JS 메소드

RegExp.prototype.exec(문자열)

인자로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환

매칭 결과가 없는 경우 null을 반환

exec 메서드는 문자열 내의 모든 패턴을 검색하는 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]

 

RegExp.prototype.test(문자열)

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

 

const target = 'Is this all there is?';
const regExp = /is/;
regExp.test(target); // true

 

String.prototype.match(정규식)

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

매칭 결과가 없는 경우 null을 반환

const target = 'Is this all there is?';
const regExp = /is/g;
target.match(regExp); 	// ['is', 'is']

 

말고도 여러가지 메소드들이 있음

 

▶ 플래그(Flag)

정규 표현식의 옵션으로서, 검색 방식을 설정하기 위해 사용하며 원하는 문자 검색 결과를 반환하도록 할 수 있음

플래그는 옵션이므로 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있음

• g(global): 모든 문자를 검색하겠다는 의미, 모든검색 결과를 배열로 반환
• i(ignoreCase): 영어 대소문자를 구분하지 않겠다는 의미
• m(multi line): 문자열의 행이 바뀌더라도 패턴 검색을 계속한다는 의미
• y(sticky): 생성된 정규표현식 인스턴스에서는 lastIndex 속성을 사용할 수 있음
  • 인스턴스는 클래스에 의해 생성되어 메모리에 저장된 실체를 말함
  • 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 함
  • 위에 인스턴스란 리터럴 방식이든 생성자 함수 방식이든 정규 표현식을 생성한 순간 생성된 객체를 의미
• u(unicode): 유니코드 문자를 처리하기 위해 필요함. 이모티콘등을 찾을때 u를 안쓰면 잘못된 결과값이 나옴

 

▶ 패턴

/로 열고 닫으며, 문자열의 따옴표는 생략(따옴표를 포함하면 따옴표까지도 패턴에 포함되어 검색됨)

패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현 가능함

어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때 정규 표현식과 매치한다고 표현

• ^: 줄(Line)의 시작에서 일치
  • /^abc/
• $: 줄(Line)의 끝에서 일치
  • /xyz$/
• .: 임의의 한 문자와 일치
• ?: 없거나 1회 가능한 많이 일치
• ??: 없거나 1회 가능한 적게 일치(lazy)
• a|b: a 또는 b와 일치, 인덱스가 작은 것을 우선 반환
• {3}: 3(숫자)개 연속 일치
• {3,}: 3개 이상 연속 일치
• {3,5}: 3개 이상 5개 이하(3~5개) 연속 일치
• +: 1회 이상 연속으로 반복되는 문자에 가능한 많이 일치, {1,}와 동일
• [a-z]: a부터 z 사이의 문자 구간에 일치(영어 소문자)
• [A-Z]: A부터 Z 사이의 문자 구간에 일치(영어 대문자)
• [0-9]: 0부터 9 사이의 문자 구간에 일치(숫자)
• \: 이스케이프 문자, /\.\?\/\$\^/
• \b: 63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
• \d: 숫자(Digit)에 일치
• \D: 숫자가 아닌 문자에 일치
• \s: 공백(Space, Tab 등)에 일치
• \S: 공백이 아닌 문자에 일치

말고도 여러가지 패턴이 있음

 

자주쓰는 정규식

• /\D+/: 숫자가 아닌 문자들이 연속해서 나타나는 부분이 찾아짐