[JavaScript] 정규표현식이란?

정규표현식에 대해 알아보자

 

 

 

 

[ 정규 표현식 ]

정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 

정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 

 

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.

패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

 

예시

const cellphone = '010-1234-1224';
console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true

 

위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 

 

정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다. 

 

다만 정규표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다.

 

 

---

 

 

[ 정규 표현 패턴의 표기 ]

 

문자열의 패턴은 내용의 앞뒤에 /를 삽입한다.

 

/패턴/

 

대표적인 패턴

 

패턴	의미
x	문자 x
xyz	문자열 xyz
[xyz]	x, y, z 중 하나의 문자
[a-z]	a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능
[^xyz]	x, y, z 외 하나의 문자
[^a-z]	a ~ z 외 하나의 문자
abc|xyz	문자열 abc 혹은 xyz
{숫자}	반복 횟수
^x	시작 문자 x
x$	종료 문자 x
.	하나의 문자(줄바꿈 코드 제외)
x*	0개 이상 계속되는 x*
\	다음에 오는 문자를 이스케이프(escape) 처리
\d	숫자 [0-9]
\D	숫자가 아닌 문자 [^0~9]
\w	영문, 숫자, 언더바 [A-Za-z0-9_]
\W	영문, 숫자, 언더바가 아닌 문자를 의미한다. (특수문자)
\s	공백 문자(스페이스, 탭, 줄바꿈 등)
\S	공백 문자 이외의 문자 [^/s]
\t	수평 탭
\n	줄바꿈 코드

 

---

 

[ 정규 표현식의 생성 ]

정규 표현식 리터럴은 패턴과 플래그로 구성된다. 

/패턴/플래그

 

※  플래그

패턴과 함께 정규표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다. 

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

 

---

 

[ 자주 사용하는 정규표현식 ]

 

※ 특정 단어로 시작하는지 검사

const url = 'https://example.com';

// 'http://' 또는 'https://'로 시작하는지 검색한다.

/^https?:\/\//.test(url); // true

 

 

※ 특정 단어로 끝나는지 검사 

const fileName = 'index.html';

// 'html'로 끝나는지 검사한다.

/html$/.test(fileName); // true

 

 

※ 숫자로만 이루어진 문자열인지 검사 

 

[...] 바깥의 ^은 문자열의 시작을, $는 문자열의 마지막을 의미한다. \d는 숫자를 의미하고, +는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미한다. 

 

즉,  처음과 끝이 숫자이고 최소 한 번 이상 반복되는 문자열과 매치한다. 

const target = '12345';

// 숫자로만 이루어진 문자열인지 검사한다.

/^\d+$/.test(target); // true

 

 

※ 하나 이상의 공백으로 시작하는지 검사

 

\s는 여러 가지 공백 문자(스페이스, 탭 등)를 의미한다. 즉, \s는[ \t\r\n\v\f ]와 같은 의미다.

const target = ' Hi';

// 하나 이상의 공백으로 시작하는지 검사한다.

/^[\s]+/.test(target); // true

 

 

※ 아이디로 사용 가능한지 검사

 

검색 대상 문자열이 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.

 

const id = 'abc123'; 

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다. 

/^\w{4,10}$/.test(id) // true

 

 

※ 메일 주소 형식에 맞는지 검사

 

const email = 'zenghyun@gmail.com';

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true

 

 

※ 핸드폰 번호 형식에 맞는지 검사

const cellphone = '010-1234-1224';

/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // true

 

 

※ 특수 문자 포함 여부 검사

 const text = 'asd@$%%as21';
    
 /\W/gi.test(text); // true

 

특수문자를 제거할 때는 String.prototype.replace 메서드를 사용하면 된다.

 

// 특수 문자를 제거한다.

text.replace(/\W/gi, ''); // asdas21