[JavaScript] 정규 표현식 문법 정리 + 예제 모음

본 포스팅에서는 자바스크립트에서 사용할 수 있는 정규 표현식에 대해 다루어보겠습니다.

정규 표현식은 자바스크립트 뿐만 아니라 다른 대부분의 프로그래밍 언어에서도 지원되는 형식 언어이기 때문에 알아두면 다른 언어에서도 익힐때 수월하실겁니다.

정규 표현식이란?🧐 Regular Expression (Regex)

정규 표현식을 한마디로 정의하자면 문자열에서 특정 패턴을 찾기 위한 표현 방식이라고 할 수 있습니다.

정규 표현식을 사용하여, 특정된 패턴에 일치하는 문자열을 쉽게 찾아낼 수 있다는 말이죠.

예시로 웹페이지에서 회원가입할 때 전화번호나 이메일등 연락처를 입력하고 옳지 않은 값이나 방식으로 입력하면 경고창이 뜨는걸 경험하신적이 있을 겁니다.

// 회원가입 할때 휴대폰번호 양식 검색
// 예를 들어 010-1234-5678 라는 전호번호는
// "'숫자3개'-'숫자4개'-'숫자4개'"로 구성되어 있습니다.

const regex = /\d{3}-\d{4}-\d{4}/; 
// \d는 숫자를 의미하고, {} 안의 숫자는 해당 숫자 개수를 의미합니다. 

regex.test('010-1234-5678') // true; 올바른 값
regex.test('01-11-22') // false; 옳지 않은 값

이렇게 정규 표현식을 통하여 반복문과 조건문을 혼합하여 복잡하게 구성해야될거 같은 코드도 간단하게 정규 표현식을 통하여 해결할 수 있기 때문에 유용하게 사용됩니다.

이 밖에도 이메일, 주소 등의 정보 양식을 검증한다던가, 특정한 패턴으로 존재하는 데이터를 추출한다던가, 문자열을 포맷팅할 때 등 무궁무진한 활용이 가능한게 정규 표현식입니다.

정규 표현식 기본 구성

정규 표현식은 아래와 같은 구성을 가지고 있습니다.

두개의 슬래쉬 문자 사이에는 매칭될 패턴(pattern)이 들어가고,

슬래쉬 다음에는 매칭할 때 적용되는 옵션값을 설정하는 플래그(flag)가 들어갑니다.

정규 표현식 기본 구성 문법

아래의 방식들을 통해 생성할 수 있습니다.

// 1. 상수 (literal) 방식
const regex = /\d{3}-\d{4}-\d{4}/;

// 2. 생성자 (constructor) 방식
const regex = new RegExp("\d{3}-\d{4}-\d{4}");
const regex = new RegExp(/\d{3}-\d{4}-\d{4}/); 

정규 표현식 주요 메서드

아래에 있는 메서드들을 사용해야 앞서 나왔던 예시처럼 패턴을 검색하거나 데이터를 추출하는 등 정규 표현식 활용이 가능합니다.

메서드의미
(“문자열”).match(/정규표현식/플래그)“문자열”에서 “정규 표현식”에 매칭되는 항목들을 배열로 반환
(“문자열”).replace(/정규표현식/, “대체문자열”)“정규 표현식”에 매칭되는 항목을 “대체문자열”로 변환
(“문자열”).split(정규표현식)“문자열”을 “정규 표현식”에 매칭되는 항목으로 쪼개어 배열로 반환
(“정규 표현식”).test(“문자열”)“문자열”이 “정규 표현식”과 매칭되면 true, 아니면 false반환
(“정규 표현식”).exec(“문자열”)match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

// 문자열
const str = "My name is Jack and i like pizza and pasta";
// 정규 표현식 
const regex = /pizza/;

// match
str.match(regex); 
// 결과: ['pizza']

// replace
str.replace(regex, "apple"); 
// 결과: 'My name is Jack and i like apple and pasta'

// split
str.split(regex);
// 결과: ['Hello, My name is Jack and i like ', ' and pasta']

// test
regex.test("do you like pizza?");
// 결과: true

// exec
regex.exec("do you like pepperoni pizza or cheese pizza?");
// 결과: ['pizza']

정규 표현식 주요 플래그

플래그는 정규 표현식을 생성할 때 고급 검색을 위해 추가적인 옵션을 부여하고 싶을때 사용됩니다.

플래그는 동시에 여러개 사용할 수 도 있습니다.

플래그의미
gGlobal: 문자열 내의 모든 패턴을 검색
iIgnore Casing: 대소문자를 구분하지 않고 검색
mMultiline: 여러행인 문자열에 대해 검색
sDot All: ‘ . ‘(모든 문자 정규 표현식)이 개행 문자 \n 도 포함
uUnicode: 유니코드 전체 지원
ySticky: 문자열내 특정 색인(index)부터 검색 시작 활성화
// g 
// 모든 검색 결과를 배열로 반환
const strg = "AppleBananaApple";

strg.match(/Apple/); // [ 'Apple' ] 최초에 발견된 패턴만 반환
strg.match(/Apple/g); // [ 'Apple', 'Apple' ] 모든 패턴 반환

// i
// 대소문자 구분없이 검색
const stri = "appleBananaApple";

stri.match(/apple/g); // [ 'apple' ] Apple은 반환 x
stri.match(/apple/gi); // [ 'apple', 'Apple' ] Apple도 반환

// m
// 여러줄 검색, 아래는 \n 을 통해 생성한 3줄짜리 문자열
const strm = "this is first line\nand second\nand so long";

// this 단어로 시작하는지 검색 (^ 문자는 문장 시작점을 의미)
strm.match(/^this/); // [ 'this' ] 

// and 단어로 시작하는지 검색 (^ 문자는 문장 시작점을 의미)
strm.match(/^and/);  // null

// 두번째 줄부터는 검색이 안됩니다.

// m 플래그
strm.match(/^and/m); // [ 'and' ] 

// g 플래그도 같이써서 세번째 줄 and도 매칭 검색
strm.match(/^and/gm); // [ 'and', 'and' ]

정규 표현식 매칭 패턴

패턴의미
a-zA-Z영어알파벳(-으로 범위 지정)
ㄱ-ㅎ가-힣한글 문자(-으로 범위 지정)
0-9숫자(-으로 범위 지정)
.모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두) 단, 줄바꿈 X
\d숫자
\D숫자가 아닌 것
\w밑줄 문자(underscore)를 포함한 영어 알파벳 숫자 문자
[A-Za-z0-9_] 와 동일
\W\w 가 아닌 것
\sspace 공백
\Sspace 공백이 아닌 것
\특수기호특수기호 \* \^ \& \! \? …등
\b단어의 처음/끝 (영문 대소문자 52개 + 숫자 10개 + _(underscore) 가 아닌)
\B\b 가 아닌 것
\x16진수 문자에 일치
/\x61/는 a에 일치
\08진수 문자에 일치
/\141/은 a에 일치
\u유니코드(Unicode) 문자에 일치
/\u0061/는 a에 일치
\c제어(Control) 문자에 일치
\f폼 피드(FF, U+000C) 문자에 일치
\n줄 바꿈(LF, U+000A) 문자에 일치
\r캐리지 리턴(CR, U+000D) 문자에 일치
\t탭 (U+0009) 문자에 일치

정규 표현식 검색 기호

기호의미
|OR
예시: a|b
[]괄호안의 문자들 중 하나
예시: /abc/ : “abc”를 포함하는
예시: /[abc]/ : “a” 또는 “b” 또는 “c” 를 포함하는
예시: [다-바] : 다 or 라 or 마 or 바
[^문자]괄호안의 문자를 제외한 것
예시: [^lgEn] “l” “g” “E” “N” 4개 문자를 제외

※ 대괄호 안에서 쓰면 제외의 뜻, 대괄호 밖에서 쓰면 시작점 뜻
^문자열특정 문자열로 시작 (시작점)
예시: /^www/
문자열$특정 문자열로 끝남 (종착점)
예시: /com$/

정규 표현식 반복 기호

기호의미
?없거나 or 최대 한개만
예시: /apple?/
*없거나 or 있거나 (여러개)
예시: /apple*/
+최소 한개 or 여러개
예시: /apple+/
{n}n개
*?없거나, 있거나 and 없거나, 최대한개 : 없음
{0}와 동일
+?최소한개, 있거나 and 없거나, 최대한개 : 한개
{1}와 동일
{Min,}최소 Min개 이상
{Min, Max}최소 Min개 이상, 최대 Max개 이하

정규 표현식 그룹 패턴 기호

기호의미
()그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?:패턴)그룹 검색(분류X)
(?=)앞쪽 일치(Lookahead),
예시: /ab(?=c)/
(?!)부정 앞쪽 일치(Negative Lookahead),
예시: /ab(?!c)/
(?<=)뒤쪽 일치(Lookbehind),
예시: /(?<=ab)c/ 
(?<!)부정 뒤쪽 일치(Negative Lookbehind),
예시: /(?<!ab)c/

정규 표현식 예제

특정 단어로 끝나는지 검색

const fileName = 'index.html';

// 'html'로 끝나는지 검색
// $ : 문자열의 끝을 의미
const regexr = /html$/;

숫자로만 이루어져 있는지 검색

const targetStr = '12345';

// 모두 숫자인지 검색
// [] 바깥의 ^는 문자열의 처음을 의미
const regexr = /^\d+$/;

아이디 검색

const id = 'abc123';

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검색
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;

전화번호 검색

const text = 
`http://junsview.com http://google.com 010-1111-2222 02-333-7777 ironman@gmail.com`;  

text.match(/\d{2,3}-\d{3,4}-\d{4}/g); // [ '010-1111-2222', '02-333-7777' ]
/*
1) \d{2,3} => 숫자 2~3개로 시작하고,
2) \- => 다음에 하이픈(-)이 오고
3) \d{3, 4} => 다음에 숫자가 3~4개 오고,
4) \- => 다음에 하이픈(-)이 오고,
5) \d{4} => 다음에 숫자가 4개가 옵니다.
6) g => 매칭되는걸 모두 다 찾습니다.(플래그)
*/

웹사이트 주소 검색

const text = 
`http://junsview.com http://google.com 010-1111-2222 02-333-7777 ironman@gmail.com`; 

text.match(/https?:\/\/[\w\-\.]+/g); // ["http://junsview.com", "http://google.com"]
/*
1) http => 로 시작하고,
2) s? => 다음에 s는 없거나, 있고,
3) \/\/ => 다음에 특수기호 // 가 오고
4) [\w\-\.]+ => \w(영문자, 언더스코어), 하이픈, 쩜 으로 이루어진 문자열이 한개 이상(+) 있습니다.
5) g => 매칭되는걸 모두 다 찾습니다.(플래그)
*/

이메일 주소 검색

const text = `http://junsview.com http://google.com 010-1111-2222 02-333-7777 ironman@gmail.com`; 

text.match(/[\w\-\.]+\@[\w\-\.]+/g); // [ 'ironman@gmail.com' ]

특수기호 검색

// 모든 특수기호를 나열
const regex = /\[\]\{\}\/\(\)\.\?\<\>!@#$%^&*/g

// 문자와 숫자가 아닌것을 매칭
const regex = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g

참고자료

https://inpa.tistory.com

https://curryyou.tistory.com

답글 남기기