[JS] 자세히 알아둬서 나쁠 것 없는 정규 표현식과 사용방법

정규 표현식(Regular Expression)

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴을 의미합니다.

정규 표현식 선언

// 리터럴 방식
const re = /ab+c/;

// 객체 선언 방식
const re = new RegExp("ab+c");

정규 표현식 모양새

/ 패턴 / 플래그

정규표현식 매칭 패턴

패턴	의미
a-zA-Z	영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자(-으로 범위 지정)
0-9	숫자(-으로 범위 지정)
.	모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두) 단, 줄바꿈 X
\d	숫자
\D	숫자가 아닌 것
\w	밑줄 문자를 포함한 영숫자 문자에 대응 [A-Za-z0-9_] 와 동일
\W	\w 가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호 ex) * ^ & ! ? ...등
\b	63개 문자(영문 대소문자 52개 + 숫자 10개 + _(underscore))가 아닌 나머지 문자에 일치하는 경계(boundary)
\B	63개 문자에 일치하는 경계
\x	16진수 문자에 일치 /\x61/는 a에 일치
\0	8진수 문자에 일치 /\141/은 a에 일치
\u	유니코드(Unicode) 문자에 일치 /\u0061/는 a에 일치
\c	제어(Control) 문자에 일치 (제어문자: 문자는 아니지만, 출력 방식에 영향을 주는 문자)
\f	폼 피드(FF, U+000C) 문자에 일치
\n	줄 바꿈(LF, U+000A) 문자에 일치
\r	캐리지 리턴(CR, U+000D) 문자에 일치
\t	탭 (U+0009) 문자에 일치

정규표현식 검색 패턴

기호	의미
|	OR 의미 ex) a|b
[]	괄호안의 문자들 중 하나.
[^문자]	괄호안의 문자를 제외한 것
[^lgEn]	"l", "g", "E", "N" 4개 문자를 제외 ※ 주의) 대괄호 밖에서 쓰면 시작점 을 의미함
^문자열	특정 문자열로 시작 (시작점) ex) /^www/
문자열$	특정 문자열로 끝남 (종착점) ex) /com$/

정규식 갯수 반복 패턴

문자 패턴 뒤에 붙여 사용한다.

기호	의미
?	없거나 or 최대 한개만 ex) /apple?/
*	없거나 or 있거나 (여러개) ex) /apple*/
+	최소 한개 or 여러개 ex) /apple+/
*?	가능한 적은 문자와 일치 (0 ~ n)
+?	가능한 적은 문자와 일치 (1 ~ n)
{n}	n개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하, {3,5}? == {3}와 동일

정규식 그룹 패턴

기호	의미
()	그룹화 및 캡쳐
(?: 패턴)	그룹화 (캡쳐 X)
(?=)	앞쪽 일치(Lookahead), ex) /ab(?=c)/
(?!)	부정 앞쪽 일치(Negative Lookahead), ex) /ab(?!c)/
(?<=)	뒤쪽 일치(Lookbehind), ex) /(?<=ab)c/
(?<!)	부정 뒤쪽 일치(Negative Lookbehind), ex) /(?<!ab)c/

정규식 캡처 기능

괄호를 사용한 그룹화: 캡처 그룹을 만들기 위해 정규식 패턴 내에서 괄호 () 를 사용합니다. 괄호로 둘러싼 부분은 하나의 그룹으로 간주되어 추출됩니다.

그룹화 캡쳐 기능 때문에 쓸데없는 결과값을 얻는 것이 싫다면, 괄호 안에 ?: 문자를 씀으로써 캡쳐를 비활성화 할 수 있다.

활용

1. String.prototype.replace() 메서드 이 메서드를 사용하여 일치하는 부분을 다른 문자열로 대체할 수 있습니다. 캡처된 그룹은 $1, $2, $3과 같은 백레퍼런스를 사용하여 대체 문자열에서 사용할 수 있습니다.

const text = "Hello, my name is John.";
const namePattern = /my name is (\w+)\./;
const replacedText = text.replace(namePattern, "I am $1.");
console.log(replacedText); // "Hello, I am John."

2. String.prototype.match() 메서드: 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array 를 반환한다

• g (전역) 플래그: match 메서드는 일치하는 모든 문자열을 찾아 배열에 추가합니다. 이렇게 하면 일치하는 모든 문자열이 결과 배열에 포함됩니다.

• g 플래그가 없는 경우: match 메서드는 첫 번째 일치하는 문자열을 찾아 배열의 첫 번째 요소로 넣습니다. 그리고 각 그룹화된 내용(캡처된 내용)도 배열에 추가됩니다.

const text = "The price is $10.99";
const pricePattern = /\$(\d+\.\d+)/;
const match = text.match(pricePattern);

if (match) {
    const price = parseFloat(match[1]); // 캡처 그룹을 숫자로 파싱
    console.log(price)
    const discountedPrice = price * 0.9; // 할인 적용
    console.log("할인된 가격: $" + discountedPrice.toFixed(2));
}

정규 표현식 플래그

플래그	설명	대응하는 속성
g (Global)	전역 탐색 g 가 없다면 처음 검색 내용만 확인	RegExp.prototype.global
i (Ignore Case)	대소문자를 구분하지 않음.	RegExp.prototype.ignoreCase
m (Multi Line)	여러 줄에 걸쳐 탐색.	RegExp.prototype.multiline
s (singlse)	. 메타문자가 줄 바꿈 문자 \n을 포함한 모든 문자와 일치하도록 하는 역할	RegExp.prototype.dotAll
u (unicode)	unicode, 패턴을 유니코드 코드 포인트의 시퀀스로 간주함.	RegExp.prototype.unicode
y (sticky)	sticky 탐색, 대상 문자열의 현재 위치에서 탐색을 시작함.	RegExp.prototype.sticky

정규 표현식 메서드

메서드	설명
RegExp.prototype.exec(str)	문자열에서 일치하는 부분을 탐색합니다. 일치 정보를 나타내는 배열, 또는 일치가 없는 경우 null을 반환합니다.
RegExp.prototype.test(str)	문자열에 일치하는 부분이 있는지 확인합니다. true 또는 false를 반환합니다.
String.match(regexp)	캡처 그룹을 포함해서 모든 일치를 담은 배열을 반환합니다. 일치가 없으면 null을 반환합니다. ex) const array = [...str.matchAll(/t(e)(st(\d?))/g)]; console.log(array[0]) // ["test1", "e", "st1", "1"] console.log(array[0]) // ["test1", "e", "st2", "1"]
String.matchAll(regexp)	캡처 그룹을 포함해서 모든 일치를 담은 반복기를 반환합니다.
String.search(regexp)	문자열에서 일치하는 부분을 탐색합니다. 일치하는 부분의 인덱스, 또는 일치가 없는 경우 -1을 반환합니다.
String.replace(pattern, replacement)	문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 바꾸어 새로운 문자열을 반환 pattern: 문자열 or 정규식 replacement: 문자열 or 함수
String.replaceAll(pattern, replacement)	문자열에서 일치하는 부분을 모두 탐색하고, 모두 대체 문자열로 바꿉니다. pattern: 문자열 or 정규식(g 플래그가 없다면 type 에러발생) replacement: 문자열 or 함수
String.split(separator)	정규 표현식 or 문자열 리터럴을 사용해서 문자열을 부분 문자열의 배열로 나눕니다.

---

참고

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

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC#%EC%A0%95%EA%B7%9C%EC%8B%9D_%EA%B8%B0%ED%98%B8_%EB%AA%A8%EC%9D%8C

https://curryyou.tistory.com/234