RegEX 정규 표현식(Regular Expression)

자바스크립트 정규식 생성

// 리터럴 방식
const regex = /abc/;

// 생성자 방식
const regex = new RegExp("abc");

/패턴(pattern)/플래그(flag)

---

정규식 플래그(Flags)

Javascript에서 정규식을 생성할 때 고급 검색을 위한 옵션을 정할 수 있도록 플래그를 지원한다. 플래그는 리터럴 방식인지 생성자 방식인지에 따라 설정하는 방식이 다르다

// flags에 필요한 설정값이 들어감
const regex1 = /abc/flags;
const regex2 = rew RegExp(/abc/, flags);

 

Flag	Meaning	Description
i	Ignore Case	대소문자를 구별하지 않고 검색
g	Global	문자열 내의 모든 패턴 검색
m	Multi Line	문자열의 행이 바뀌더라도 계속 검색
s		.(모든 정규식)이 개행문자 \n도 포함하도록
u	unicode	유니코드 전체를 지원
y	sticky	문자 내 특정 위치에서 검색을 진행하는 'sticky' 모드를 활성화

i: 대소문자 구분없음(Case Insesitive)

정규식은 기본적으로 대소문자를 구분하는데, i 플래그를 통해 대소문자를 구분하지 않고 사용할 수 있다.

const str = "abcABC";

str.match(/a/gi);
//(2) ["a", "A"]

 

g: 전역 검색(Global)

전역 검색 플래그가 없는 경우에는 최초 검색 결과만을 반환하며, 전역 검색 플래그가 있는 경우 모든 검색 결과를 배열로 반환한다.

// 'a'가 두 개 포함된 문자열
const str = "abcabc";

// g 플래그 없이 최초 문자만 반환
str.match(/a/);
// ["a", index: 0;, input: "abcabc", groups: undefined]

// g 플래그 있는 경우, 모든 결과가 배열로 반환
str.match(/a/g);
// (2) ["a", "a"]

 

m: 줄바꿈 검색(Multi Line)

여러 줄의 정규식 문자열이 실제 여러줄로 다루어져야 할 때 사용되며, 아래에서 알아볼 입력 시작(^) 앵커와 입력 종료($) 앵커가 전체 문자열이 아닌 각 줄 별로 대응됩니다.

// 줄바꿈이 포함된 문자열을 생성
var str = "\nIs thi\ns it?";
str.match(/^is/m); // is

// `` 는 "",''과 달리 개행문자를 포함하여 문자열 구성 가능.
const str = `abc
add`;

// 한줄만 검색
str.match(/d&/g); // ["d"]

// 줄마다 검색
str.match(/d&/m); // (2) ["d","d"]

---

자바스크립트 정규식 문법

정규표현식 매칭 패턴(문자, 숫자, 기호 등)

Pattern	Meaning
a-zA-Z	영어알파벳(-로 범위 지정)
ㄱ-ㅎ가-힣	한글 (-로 범위 지정)
0-9	숫자(-로 범위지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈 X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_) [A-Za-z0-9]와 동일
\W	\w가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호
\b	63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary) 단어 문자와 단어가 아닌 문자 또는 위치(문자열의 시작/끝) 사이의 단어 경계 위치를 찾음
\B	63개 문자에 일치하는 경계(boundary), \b의 반대 경우
\x	16진수 문자에 일치, /\x61/는 a에 일치
\O	8진수 문자에 일치, /\141/은 a에 일치
\u	유니코드(Unicode) 문자에 일치, /\u0061/는 a에 일치
\c	제어(control)문자에 일치
\f	폼피드(FF, U+000C) 문자에 일치
\n	줄바꿈(LF, U+000A) 문자에 일치
\r	캐리지 리턴(CR, U+000D) 문자에 일치
\t	탭(U+0009) 문자에 일치

---

정규표현식 검색 패턴

Sign	Meaning
|	Or (a|b)
[]	괄호 안의 문자들 중 하나. Or처리라 보면 된다. /abc/ "abc"를 포함하는 /[abc]/ "a" 또는 "b" 또는 "c"를 포함하는 [다-바] 다 or 라 or 마 or 바
[^문자]	괄호안의 문자를 제외한 것 [^lgEn] "I",  "g", "E", "n" 문자를 제외한 것
^문자열	특정 문자열로 시작(괄호없음 주의) /^www/
문자열$	특정 문자열로 끝남 /com$/

---

정규표현식 갯수(수량) 반복 패턴

Sign	Meaning
?	없거나 or 최대 한개만 /apple?/
*	없거나 or 있거나(여러개) /Wo*/
+	최소 한개 or 여러개 /Wo+/
*?	없거나 있거나 && 없거나 최대 한개 = 없음 {0}과 동일
+?	최소 한개 있거나 && 없거나, 최대 한개 = 한개 {1}과 동일
{n}	n개
{Min,}	최소 Min개 이상
{Min,Max}	최소 Min개 이상, 최대 Max개 이하 {3,5}? == {3}과 동일

---

정규표현식 그룹

Sign	Meaning
()	그룹화 & 캡쳐
(?:패턴)	그룹화 캡쳐 X
(?=)	앞쪽 일치(Lookahead) /ab(?=c)/
(?!)	앞쪽 일치 부정(Negative Lookahead) /ab(?!c)/
(?<=)	뒤쪽 일치(Lookbehind) /(?<=ab)c/
(?<!)	뒤쪽 일치 부정(Negative Lookbehind) /(?<!ab)c/

 

그룹화

() 내의 내용을 하나로 묶어 고유화한 패턴으로 그룹화한다. 정규식에서는 여러개의 그룹을 가질 수 있으며, 각 그룹은 그룹화된 순서에 따라 번호를 가지고 있으며, 각 번호를 작성하여 해당 그룹의 패턴을 재사용할 수 있다. 리터럴 표현식에서는 '\n'으로, 생성자 호출 식에서는 $n으로 n번째 그룹의 패턴에 일치하는 문자에 다시 대응시킨다.

/[a-z]+\.(jpg|png|gif)/g

jpg, png, gif와 같이 이미지 확장자를 그룹화하여 소문자의 파일명을 가진 파일 이름에 대응시킬 수 있는 정규식이다. 그룹 안에서 |를 사용함으로써 여러 종류의 확장자에 해당하는 문자에 대등할 수 있다.

 

캡쳐된 그룹 ()

()내의 내용(표현식)을 캡쳐하여 사용한다. 이를 캡쳐링된 그룹이라고 볼 수 있다.

ko.match(/(ko)+/); // "kokokoko", "ko"

()안에 있는 "ko"를 그룹화하고 캡쳐한다.

우선 캡쳐된 표현식은 당장 사용되지 않으며, 그룹화된 "ko"를 +로 1회 이상 연속으로 반복되는 문자를 검색한다.

캡쳐링된 표현식을 제외한 모든 표현식이 먼저 선행된 후 캡쳐된(복사했던) 그룹이 "ko"가 검색된다.

 

* 캡쳐 그룹은 성능 저하가 있으므로 일치하는 부분 문자열을 불러올 필요가 없으면 캡쳐하지 않는 괄호를 사용할 것 (?:)

 

검색 순서

1. 그룹화된 "ko"를 패턴 +로 1회 이상 연속으로 반복하여 검색해 "kokokoko"를 반환

2. 캡쳐된 "ko"로 검색하여 "ko"를 추가 반환

"123abc".match(/(\d+)(\w)/); // "123a", "123", "a"

/*
1. 패턴 ()안의 표현식을 순서대로 캡쳐한다. /d+, /w
2. 캡쳐 후 남은 표현식으로 검색한다.
3. 패턴 \d로 숫자를 검색하되 패턴 +로 1개 이상 연속되는 숫자를 일치한다. "123"
4. 다음 패턴 \w는 문자를 검색하니 "a"가 일치한다. "123a"가 반환된다.
5. 첫번째 캡쳐한 표현식 \d+로 숫자를 검색하되 패턴 +로 1개 이상 연속되는 숫자를 일치한다. "123"이 일치하여 반환된다.
6. 다음 캡쳐한 표현식 \w로 문자를 검색하니 "a"가 일치하여 반환한다.
*/

 

캡쳐하지 않는 그룹(?:) 

() 내의 내용을 묶어 그룹화하지만 해당 내용을 기억(캡쳐링)하지 않는다. 따라서 재사용할 수 없다. 주로 그룹화된 패턴에 수량자 별표(*), 플러스(+), 물음표(?), 중괄호{}를 붙여서 사용한다.

/(?:abc)/g

abc를 그룹화하고 abc 그룹이 1회 이상 반복되는 부분에 대응한다.

 

앞쪽 일치(Lookahead) x(?=y)

오직 y가 뒤따라오는 x에만 대응한다. 괄호 안에 있는 y는 대응 결과에 포함되지 않는다.

/image\.(?=jpg|png)/g

image 파일 뒤에 jpg나 png 확장자가 따라올 경우에만 대응한다. 확장자 jpg나 png는 대응 결과에 포함되지 않는다.

 

앞쪽 일치 부정(Negative Lookahead) x(?!y)

y가 뒤따라 오지 않는 x에만 대응한다.

/image\.(?!jpg|png)/g

확장자가 jpg나 png가 아닌 image 파일에 대응한다.

 

뒤쪽 일치(Lookbehind) (?<=y)x

앞에 y가 있는 x에만 대응한다. lookahead와 마찬가지로 괄호 안의 부분은 대응 결과에 포함되지 않는다.

 

뒤쪽 일치 부정(Negative Lookbehind) (?<!y)x

y가 없는 x에만 대응한다.

 

역참조(Backreference)

그룹을 이용한 테크닉 중 하나로 팰린드롬 문자열처럼 거꾸러 뒤집어도 원본과 같은 결과를 갖는 문자열을 검색할 때나, 따옴표의 짝을 맞출 때 사용한다.

const note = "We are looking for an album made by ABBA! Text me if you are interested - ANNA-";

const findSub = note.match(/([A-Z])([A-Z])\2\1/g);

findSub의 첫번째 그룹(괄호)의 검색결과가 \1에 담기고, 두번째 그룹(괄호)의 검색 결과가 \2에 담긴다.

이 때, \2\1의 순서를 변경하면 값은 null이 된다.

---

정규식 주요 메서드

1. RegExp 메서드

(RegExp).test(str)	대응하는 문자열이 있는지 검사하여 true/false 반환
(RegExp).exec(str)	대응하는 문자열을 찾아 있으면 배열로 반환 / 없으면 null 반환
str.match(RegExp)	대응하는 문자열을 찾아 있으면 배열을 반환 / 없으면 null 반환

 

2. String 메서드

str.search(RegExp)	대응하는 문자열이 있는지 검사하여 대응하는 부분의 인덱스를 반환 / 없으면 -1 반환
str.replace(RegExp, str2)	대응하는 문자열을 찾아 두번째 인자로 치환
str.split(RegExp)	정규식이나 문자열로 대상 문자열을 나누어 배열로 반환

 

 

더 많은 정보는 아래의 사이트에서 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

https://regex101.com/

regex101: build, test, and debug regex

https://extendsclass.com/regex-tester.html

Online Regex tester and visualizer - Python, PHP, Ruby, JavaScript, Java

 

개념 정리 참고

https://eotkd4791.github.io/javascript/JavaScript13/

JavaScript 정규표현식

https://justkode.kr/data-science/regex-1

정규 표현식(RegEx)을 이해 해보자!