참조: developer.mozilla.org 문서 노트 작성

정규표현식

정규식 만들기

1. 정규식 리터럴

var re = /ab+c/;

정규식 리터럴은 스크립트가 불러와질 때 컴파일됨. 정규식이 상수라면 이게 성능에서 나음

2. RegExp 사용

var re = new RegExp("ab+c");

RegExp생성자를 사용하면 정규식이 실행 되는 시점에 컴파일. 패턴이 상수가 아니라면 이 생성자를 이용하기.

정규식 패턴 작성하기

1. 단순패턴 사용하기

2. 특수 문자 사용하기

\

• 특수문자를 있는 그대로 사용하고 싶은 경우 특수문자 앞에 붙여서 이스케이프 시킴.
• 일반문자 앞에 사용하는 경우 해당 문자를 있는 그대로 해석하면 안됨.

^

• 입력의 시작 부분에 대응

$

• 입력의 끝 부분에 대응. 예를들어 /\.js$/ 는 .js로 끝나는 파일을 받아올때 사용함.

*

• 앞의 표현식이 0회이상 연속으로 반복되는 부분과 대응. 주의할 점은 0회 이상! 그래서 예를 들어 /bo*/ 란 표현식은 "bird"의 b에 대응함.

+

• 앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응.

.

• 개행 문자를 제외한 모든 단일 문자와 대응됩니다. 말이 어려운데, 쉽게 이해하면 .n 패턴을 가진 것과 대응. 예를들어 "This is"에서 /.i/ 와 대응하는 것은 "hi", " i" 가 있겠다.

(x)

• x에 대응하고, x패턴을 기억함. 이상하다. 헷갈리는데, 아래 예제를 통해 이해해보자..
  이해가 잘 안된다 ㅠ.ㅠ

const sampleText = 'foo bar foo bar';
let regexpCoordinates = /foo bar foo bar/;
console.log(sampleText.match(regexpCoordinates)); 
//result: Array ["foo bar foo bar"]
regexpCoordinates = /(foo) (bar) (foo) (bar)/;
console.log(sampleText.match(regexpCoordinates)); 
//result: Array ["foo bar foo bar", "foo", "bar", "foo", "bar"]
regexpCoordinates = /(foo) bar \1 (bar)/;
console.log(sampleText.match(regexpCoordinates)); 
//result: Array ["foo bar foo bar", "foo", "bar"]
regexpCoordinates = /(foo) bar \1 bar/;
console.log(sampleText.match(regexpCoordinates)); 
//result: Array ["foo bar foo bar", "foo"]
const sampleText2 = 'a a';
regexpCoordinates = /a/;
console.log(sampleText2.match(regexpCoordinates));
//result: Array ["a"];
regexpCoordinates = /(a)/;
console.log(sampleText2.match(regexpCoordinates));
//result: Array ["a", "a"];
//이게 a가 두번 반환되는 이유는 /a/로 한번 반환되고, 기억된 (a)가 한번 더 호출(?)되는 것 같다.

x|y

• 'x'또는'y'에 대응

{n}

• 앞 표현식이 n번 나타나는 부분에 대응됨. n은 양의 정수여야 함.

{n,m}

• n, m모두 양의 정수. n<=m이어야 함. 앞의 표현식이 n~m번 나타나는 것에 대응

[xyz]

• 문자셋(Character set)임. 괄호 안의 어떤 문자와도 대응. 점(.)이나 별표(*)같은 특수문자는 문자셋 내부에서 특수 문자가 아님. 하이픈(-)을 이용하여 범위 지정 가능. ex) [0-9], [a-z]

!주의할 점
비교 문자열의 앞에서 부터 차례대로 비교하는 듯 하다.

const moods = 'zyx';
const regexp = /[xyz]/;
console.log(moods.match(regexp));
//result: Array["z"]
//여기서 결과값이 x가 아니라 z가 나옴.

[^xyz]

• 부정 문자셋(negated character set). 여집함이라 생각하면 된다.

[\b]

• 백스페이스(U+0008)에 대응.

\b

• 단어경계에 대응.
  예제:
  /\bm/는 "moon"의 'm'에 대응됩니다;
  /oo\b/ 는 "moon"의 'oo' 부분에 대응되지 않는데, 왜냐하면 'oo'를 뒤따라오는 'n'이 단어 문자이기 때문입니다;
  /oon\b/는 "moon"의 'oon'에 대응됩니다. 왜냐하면, 'oon'은 문자열의 끝이라서, 뒤따라오는 단어 문자가 없기 때문입니다 ;

const str = 'mooné';
const regexp = /oon\b/;
console.log(str.match(regexp));
//Result: Array ["oon"]
//str을 보면 oon다음에 é가 나오는데, 이것은 word break로 여겨짐.

\B

• 단어 경계가 아닌것에 대응. Boundary의 B같다.

\d

• 숫자 문자에 대응. [0-9]와 동일. digit의 d같다.

\D

• 숫자 문자가 아닌것에 대응. [^0-9]와 동일.

\s

• 공백에 대응. 많이 쓸듯. space 의 s같다.

\w

• 밑줄 문자를 포함한 영숫자 문자에 대응. 즉, 단어 문자에 대응. [A-Za-z0-9_]와 동일함.
  많이 쓸것같다. whole의 w이려나

\W

• 단어 문자가 아닌 문자에 대응. [^A-Za-z0-9_]와 동일

자주 쓸것같은 치환 함수

function escapeRegExp(string){
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); 
  // $&는 일치한 전체 문자열을 의미합니다.
}

정규식 사용하기

RegExp, test, exec, String, match, replace, search, split메소드 사용하기

var myRe = /d(b+)d/g;
var myArray = myRe.exec("cdbbdbsbz");

var myArray = /d(b+)d/g.exec("cdbbdbsbz");

var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");

플래그 사용하기

g
전역검색
i
대소문자 구분 없는 검색
m
다중행 검색
s
.에 개행 문자도 매칭(ES2018)
u
유니코드; 패턴을 유니코드 포인트의 나열로 취급
y
"sticky"검색을 수행. 문자열의 현재 위치부터 검색을 수행함.

플래그를 RegExp로 사용하려면 다음과 같이 사용

var re = new RegExp("pattern", "flags");