oris9

[Javascript] 정규표현식(RegExp, regular expression) 정리하기 본문

JavaScript

[Javascript] 정규표현식(RegExp, regular expression) 정리하기

oris9 2024. 3. 11. 10:51

 

 

 

정규표현식(RegExp, regular expression)이란 

사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어라고 한다. 

문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다.

구현하기가 마냥 쉽지는 않고, 짧게 표현되어 함축된 의미를 가지고 있어 가독성이 좋지 않다는 단점이 있지만,
그러나 사용자의 전화번호 검색, 패스워드 사용 등록과 같은 문자열에서 특정한 조건을 표현해야되는 경우에 일반적인 반복문, 조건문을 사용할 때보다 정규표현식을 사용하여 매우 간단하게 특정 조건들을 표시하고, 빠르고 효율적인 기능 수행을 하도록 만들 수 있다.

정규표현식 작성법

a. 정규 표현식 리터럴

`const re = /ab+c/i;` 

다음과 같이 슬래시로 감싸서 `/검색할 문자열 패턴/플래그` 형식으로 정규표현식 객체를 생성한다.
정규 표현식 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다 

 

** 플래그 **

정규표현식에서 옵션을 의미한다. 
순서와 상관없이 여러 개 플래그를 동시에 설정할 수 있고,
플래그를 사용하지 않으면 첫번째 조건대상을 찾았을 때 종료된다.

i (ignore case) : 대소문자를 구별하지 않고 검색한다.
g (global) : 문자열 내의 모든 패턴을 검색한다.
m (multi line) : 문자열의 행이 바뀌더라도 검색은 계속한다.

 

** 패턴 **

매칭하여 검색하고 싶은 문자열을 지정한다.
기존처럼 문자열의 따옴표를 포함해서 선언하면 따옴표까지도 검색하기 때문에 따옴표는 생략한다.

정규 표현식 패턴을 작성할 때는 일반 문자와 특수 문자를 사용할 수 있는데,
일반 문자는 리터럴 문자 / 특수 문자는 메타 문자로 표현한다.

리터럴 문자 (정규 문자) : 일반 문자, \0, \n, \t, \v, \f, \r, \xhh, \uhhhh, \cX
메타 문자 (정규 표현식의 구문 문자) : ^ $ \ . * + ? ( ) [ ] { } |_

 

 ** 메타문자 **

정규표현식 패턴을 만들 때 사용할 수 있는 특정 패턴을 기술하는 문자이다.
정규 표현식을 사용하는 주된 목적은 단순한 문자열을 찾기 위함이 아니라,조금 더 복잡하고 다양한 케이스의 경우를 다룰 때 사용되는 것인데, 이 때 사용되는 것이 메타 문자이다.
메타 문자는 굉장히 다양하게 있기 때문에 모든 메타 문자를 외울수는 없고 필요할 때 찾아서 사용하면 된다. 정규 표현식을 보고 메타 문자에 따라 잘 나눌 수 있는지가 중요하다.

 

다양한 메타문자들 ⬇️⬇️

더보기

☑️ 메타 문자 : 매칭 패턴

패턴의미

a-zA-Z 영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정)
0-9 숫자(-으로 범위 지정)
. 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)
\d 숫자
\D 숫자가 아닌 것
\w 영어 알파벳, 숫자, 언더스코어(_)
\W /w 가 아닌 것
\s space 공백
\S space 공백이 아닌 것
\특수기호 특수기호

☑️ 메타 문자 : 검색 패턴

기호의미

   
[] 괄호안의 문자들 중 하나
[^문자] 괄호안의 문자를 제외한 것
^문자열 특정 문자열로 시작(괄호 없음!)
문자열$ 특정 문자열로 끝남
() 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴) 그룹 검색(분류X)
\b 단어의 처음/끝
\B 단어의 처음/끝이 아님

☑️ 메타 문자 : 횟수 패턴

기호의미

? 최대 한번(없음 or 1개)
* (없음거나 있음): 여러개 포함
+ 최소 1개( 1개 or 여러개)
{n} n개
{Min,} 최소 Min개 이상
{Min, Max} 최소 Min개 이상, 최대 Max개 이하

 

 

 

b. RegExp 객체의 생성자 호출

`const re = new RegExp("ab+c");`

생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일된다. 
바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 이렇게 사용한다.

 

 

 

JavaScript에서 정규 표현식 사용하기


exec() (en-US) 문자열에서 일치하는 부분을 탐색합니다. 일치 정보를 나타내는 배열, 또는 일치가 없는 경우 null을 반환합니다.
test() 문자열에 일치하는 부분이 있는지 확인합니다. true 또는 false를 반환합니다.
match() 캡처 그룹을 포함해서 모든 일치를 담은 배열을 반환합니다. 일치가 없으면 null을 반환합니다.
matchAll() (en-US) 캡처 그룹을 포함해서 모든 일치를 담은 반복기를 반환합니다.
search() 문자열에서 일치하는 부분을 탐색합니다. 일치하는 부분의 인덱스, 또는 일치가 없는 경우 -1을 반환합니다.
replace() (en-US) 문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 바꿉니다.
replaceAll() 문자열에서 일치하는 부분을 모두 탐색하고, 모두 대체 문자열로 바꿉니다.
split() 정규 표현식 또는 문자열 리터럴을 사용해서 문자열을 부분 문자열의 배열로 나눕니다.

 

 

 

 

참고.

https://poiemaweb.com/js-regexp

[자세한 예시, 정규표현식을 도식과 함께 테스트해보는 사이트 설명 글]