정규 표현식

정규표현식은 input 유효성 검사, 데이터 파싱 등 작업을 할때 유용하게 쓰인다.
예를 들어 이메일 폼에서 문자 '@'이 포함됐는지 검사해야한다. 물론 직접 for문을 실행시켜 '@'가 있는지 확인할 수있다. 하지만 /@/ 와 같이 정규표현식 문법을 사용하면 간결하게 유효성검사를 작성할 수 있다. 또 더 나아가 복잡한 유효성 검사를 해야할 때도 유용할 수 있다.

기본 개념

표시	의미
OR(|)	여러 항목들 중 하나라도 일치하는지 확인
?	문자의 0번 또는 1번 등장하는 것 허용
*	문자가 0번 이상 등장하는 것 허용
+	문자가 1번 이상 등장하는 것 허용
{n}	문자가 n번 등장하는 것 허용
{n,m}	문자가 n번~m번 등장하는 것 허용
{n, }	문자가 n번 이상 등장하는 것 허용

문법

문법	의미
.	1개의 문자
[]	괄호 사이의 문자 중 하나를 선택하고 “-”를 사용해 범위 지정 가능
[^ ]	뒤 따라오는 문자를 제외한 문자 셋
^	문자열의 처음
$	문자열의 끝

나열된 문법들은 일부분이고 더 상세하게 문법을 보고싶다면 이곳(정규 표현식 - 위키백과)을 참고해도좋다.

활용

Javscript에는 정규표현식을 이용해서 입력 string을 조사할 수 있는 메소드들을 제공하고있다.

test

const regex = /.{8}/;
regex.test('12345678'); // true
regex.test('1234'); // false

입력 문자열이 정규 표현식의 조건에 부합하는지 확인 후 true, false 결과를 반환한다.

search

const regex = /hello/;
'hello, my world'.search(regex); // 0
'my world, hello'.search(regex); // 10

첫 번째로 일치하는 문자열의 index를 얻을 수 있다. g flag의 설정은 무효하다.

결과는 일치하는 문자열 index 또는 -1이다. 일치하는 결과가 없다면 -1 을 반환한다.

TIP 모든 매치되는 문자열에 대한 인덱스를 확인하고싶을 때, exec 메소드를 사용을 고려할 수 있다.

match

const regex = /<div>/g;

"<div><div>hello, world</div><div>hello, world</div></div>".match(regex);
// ["<div>", "<div>", "<div>"]

일치하는 문자열을 얻을 수 있다. 결과로 Array 또는 null을 반환한다. null 은 일치하는 결과가 없음을 의미한다. 만약 모든 일치하는 문자열을 찾고자한다면 ‘g’(global)플래그를 포함하는 것을 잊지말자.

이 밖에도 matchAll, exec, replace 등의 메소드이 제공된다. 이들을 알면 쉽고 빠르게 문자열을 처리할 수 있다.