[JavaScript] 정규 표현식

IBBI·2024년 2월 23일
JavaScript

JavaScript

목록 보기
3/3

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용하는 정규 표현식 객체를 생성합니다.
-MDN

정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 반복문과 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 매우 간단하게 표현할 수 있다. 하지만 정규표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다.

🔎 정규표현식 생성

1) 정규 표현식 리터럴을 이용한 생성

const regexp = /hello/i;

❓ 리터럴이란?
변수의 값이 변하지 않는 데이터 그 자체를 의미한다.
슬래시(/)와 슬래시(/) 사이에 검색할 문자열 패턴을 넣고, 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있다.
정규 표현식 리터럴을 사용하는 것이 일반적인 방법이며, 리터럴을 사용하면 정규 표현식 객체가 생성된다.


🔎 플래그

플래그는 옵션이므로 선택적으로 사용한다.
순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있다.
플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 매칭한 대상만을 검색하고 종료한다.

📢 대표적인 플래그

FlagMeaningDescription
iIgnore Case대소문자를 구별하지 않고 검색한다.
gGlobal문자열 내의 모든 패턴을 검색한다.
mMulti Line문자열의 행이 바뀌더라도 검색은 계속한다.

▶︎ 패턴

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

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

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


▶︎ 메타 문자

정규표현식 패턴을 만들 때 사용할 수 있는 특정 패턴을 기술하는 문자이다.
정규 표현식을 사용하는 주된 목적은 단순한 문자열을 찾기 위함이 아니라,
조금 더 복잡하고 다양한 케이스의 경우를 다룰 때 사용되는 것인데, 이 때 사용되는 것이 메타 문자이다.

✔️ 매칭 패턴(문자, 숫자, 기호 등)

: 아래 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있다.

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

✔️ 검색 패턴

: 아래 패턴들을 이용하면, AND, OR, StartWith, EndWith 등의 다양한 조합을 만들 수 있다.

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

✔️ 갯수(수량) 패턴

: 특정 패턴이 몇 번 반복되는지도 필터링이 가능하다.

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

2) RegExp 생성자 함수 방식

const regexp = new RegExp(/^abc/i);

생성자 함수 방식은 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우에 사용하는 것이 좋다.

🔎 정규표현식 method

자바스크립트에서는 정규 표현식도 객체로서 메서드의 사용이 가능하다.

1) 정규식 RegExp.prototype의 메서드

▶︎ exec

const target = 'Is this all there is?';
const regExp = /is/g;

const res = regExp.exec(target);
console.log(res);
// 결과값 : [ 'is', index: 5, input: 'Is this all there is?' ]

대상을 검색하여 조건에 부합하는 결과를 반환한다. 반환값은 배열 또는 null이다.
단, 조건에 부합하는 결과가 1개 이상이라도 무조건 부합하는 결과의 첫번째 값을 반환한다.


▶︎ test

const target = 'Is this all there is?';
const regExp = /is/;

const res = regExp.test(target);
console.log(res);
// 결과값 : true

대상을 검색하여 조건에 부합하는 결과를 반환한다. 반환값은 boolean값(true / false)이다.

2) 문자열 String.prototype의 메서드

▶︎ match

console.log('RegExp Study'.match(/Study/));
// 결과값 : ["Study", index:7, input:"RegExp Study"]

console.log('The quick brown fox jumps over the lazy dog'.match(/the/gi));
// 결과값 : ['The', 'the']

정규식 조건에 부합하는 문자열을 배열 형태로 반환해준다.
만약 조건에 부합하는 문자열이 없으면 null을 반환한다.


console.log('RegExp Study'.search(/Study/));
// 결과값 : 7

정규식 조건에 부합하는 문자열의 index 번호를 반환해준다.
만약 조건에 부합하는 문자열이 없으면 -1을 반환한다.


▶︎ replace

console.log('RegExp Study'.replace("Study","Test"));
// 결과값 : RegExp Test

조건에 부합하는 문자열을 찾아, 그 텍스트를 다른 텍스트로 변환시킨다.


▶︎ split

console.log('RegExp Study'.split(" "));
// 결과값 : ["RegExp", "Study"]

조건에 부합하는 값을 기준으로 대상을 자른 후, 배열로 저장한다.
만약 split할 대상에 아무런 입력도 하지 않을 시(여백도 포함해서), 대상을 하나의 배열로 반환한다.


📎 참고 사이트

profile
IBBI
IBBI의 말하는 감자 탈출 프로젝트
이전 포스트

[JavaScript] 배열 - slice() vs splice()

0개의 댓글