정규표현식 Regex

00  정규표현식이란

정규표현식(regular expression, regex), 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 프로그래밍 전반에서 문자열의 검색과 치환을 위해 사용되며,  JavaScript에서는 정규 표현식도 객체로서 RegExp객체와 문자열 메서드를 조합해 정규표현식을 사용할 수 있다.

 

정규표현식은 다음과 같은 상황에서 유용하게 사용된다.

 

• 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때
• 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때
• 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때
• 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때

예를 들어 입력한 문자열이 전화번호의 형식이 맞는지 확인하는 정규표현식을 작성한다면,

const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)

regex.test('010-1111-2222') // true;
regex.test('01-11-22') // false;

이런 방식으로 패턴을 만들어 해당 패턴에 맞는지 확인할 수 있다.

 

이메일 형식이 맞는지 확인하는 정규식의 예시 이미지

01  정규표현식 구성

정규 표현식은 패턴(pattern)과 선택적으로 사용할 수 있는 플래그(flag)로 구성된다.

/* 짧은 문법 - 리터럴 방식*/
const regex = /abc/;
const regexp = /pattern/gmi; // 슬래쉬 뒤는 플래그

/* 긴 문법 - 생성자 함수*/
const regexp = new RegExp("pattern", "flags");
const re = new RegExp('ab+c')

let tag = prompt("어떤 태그를 찾고 싶나요?", "h2");
let regexp = new RegExp(`<${tag}>`); // 프롬프트에서 "h2"라고 대답한 경우, /<h2>/와 동일한 역할을 합니다.

짧은 문법(리터럴)의 경우 코드 작성 시 슬래쉬(/) 내에 들어갈 패턴을 알고 있을 때 사용하며, 일반적으로는 이 방법으로 작성한다. 정규표현식 리터럴은 바뀔 일이 없는 패턴을 작성할 때 사용하면 성능이 향상될 수 있다.

new RegExp를 사용한 긴 문법(생성자 함수)은 상황에 따라 동적으로 생성된 문자열, 즉 바뀔 수 있는 패턴 또는 외부 출처에서 가져오는 패턴을 가지고 정규 표현식을 만들어야 할 때 주로 사용된다.

 

작성 방식은 다음과 같다.

 

• 슬래시(/) "사이"에는 매칭시킬 "패턴"을 써준다.
• 슬래시(/) "다음"에는 옵션을 설정하는 "플래그"를 써준다.

02  패턴과 플래그

기본적인 정규식

정규표현식 ( /regex/ )	설명
abc	abc 가 있는 것
^abc	abc 로 시작하는 것
abc$	abc 로 끝나는 것
^abc$	^abc$ abc 로 시작하고 끝나는 것
[abc]	a,b,c 전부 중 하나를 포함한 경우
[a-z]	a 에서 z 중 하나를 포함한 경우
[a-zA-Z]	영문 대문자 포함
^[0-9]	숫자 0~9 중 하나로 시작하는 패턴을 찾는 것
[^0-9]	숫자가 들어있지 않는 패턴을 찾는 것
^[^0-9]	숫자가 들어있지 않은 문자로 시작하는 패턴을 찾는 것
a{3}	a 의 3번 반복인 aaa 인 것
a{3,}	a 가 3번이상 반복인 것
[0-9]{2}	두 자리 숫자
abc[7-9]{2}	abc 를 포함하고 7~9까지 숫자 중 2자리가 포함하는 것

정규식 플래그

플래그	설명
i	Ignore Case : 대소문자 구분 없이 검색
g	Global : 패턴과 일치하는 모든 것들을 탐색 g 플래그가 없으면 패턴과 일치하는 첫 번째 결과만 반환
m	Multiline mode : 다중 행 모드를 활성화 입력 시작(^) 앵커나 입력 종료($) 앵커는 전체 문자열이 아닌 각 줄 별로 대응되게 만들어졌기 때문에, 여러줄을 검색해야 한다면 사용
s	.이 개행문자 \n도 포함하도록 'dotall'  모드 활성화
u	Unicode : 유니코드 전체 지원 서로게이트 쌍(surrogate pair)을 올바르게 처리할 수 있음
y	sticky : 문자 내 특정 위치에서 검색하는 sticky 모드를 활성화

동시에 여러 개 사용이 가능하다.

string.match(/abcde/gi)
//g 전역에서 i 대소문자 무시하고 슬래쉬 안 문자열과 일치하는 부분을 탐색

문자 클래스 Character class

문자 클래스(character class)는 특정 집합에 포함된 모든 기호에 일치하는 표현이다.

정규 표현식에 일반 기호와 문자 클래스를 같이 사용할 수 있으며, 동시에 여러 개 사용할 수 있다.

 

모든 문자 클래스에는 반대 클래스가 있으며, 같은 글자로 표기하지만 대문자로 사용한다. 예를 들면 숫자 클래스 \d의 반대 클래스는 \D인 식이다. 숫자 클래스의 반대이기 때문에 숫자가 아닌 모든 문자에 대응하는 클래스라고 생각하면 된다.

 

문자 클래스	설명
.	줄바꿈 문자를 제외한 모든 문자와 일치(숫자, 한글, 영어, 특수기호, 공백 모두)
\d	digit : 아무 숫자(0~9) 하나에 대응
\D	숫자가 아닌 모든 문자
\w	밑줄 문자를 포함한 영숫자 문자에 대응 [A-Za-z0-9_] 와 동일
\W	단어에 들어가지 않는 문자 \w와 일치하니 않는 비 라틴 문자나 공백 등 모든 문자
\s	space : 공백 기호
\S	space : 공백이 아닌 문자
\특수기호	특수기호 \* \^ \& \! \? ...등
\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
[]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작(괄호 없음 주의!)
문자열$	특정 문자열로 끝남
()	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색(분류X)
\b	단어의 처음/끝
\B	단어의 처음/끝이 아님

정규식 수량 패턴

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

문자 하나가 아니라 조건에 해당하는 붙어 있는 여러개의 문자를 찾는다는 것이 핵심이다. *, + 의 차이를 이해해야 한다.

*는 없는 경우가 포함되고, +는 무조건 하나는 있어야 한다는 의미다.

 

03  정규식 메서드

메서드	의미
str.match(/regexp/flag)	패턴과 일치하는 모든 부분 문자열을 검색해 배열로 반환 g가 없으면 첫 번째 부분 문자열만 탐색
str.replace(/regexp/, "str")	일치하는 부분 문자열을 대체 문자열 str로 교체함 g가 있으면 부분 문자열 전체를, 없으면 첫 번째 부분 문자열 교체
str.split(regexp)	문자열을 정규표현식에 매칭되는 항목으로 쪼개어 배열로 반환
str.test("str")	패턴과 일치하는 부분 문자열이 하나라도 있으면 true, 아니면 false 반환
str.exec("str")	match 메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

/*match 일치*/
let str = "We will, we will rock you";

alert( str.match(/we/gi) ); // We,we (패턴과 일치하는 부분 문자열 두 개를 담은 배열)
let result = str.match(/we/i); // 플래그 g 없음

alert( result[0] );     // We (패턴에 일치하는 첫 번째 부분 문자열)
alert( result.length ); // 1

/*replace 치환*/
// 플래그 g 없음
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will

// 플래그 g 있음
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will

/*test 일치 여부 확인*/
// 플래그 g 없음
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will

// 플래그 g 있음
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will

04  정규표현식 활용 예시

자주 사용되는 정규표현식 예시들을 정리해보았다.

그 외 각종 예제들을 찾아 보고 싶다면 예제 사이트에서 검색해볼 수도 있다.

Regular Expression Library

문자 / 숫자 형식

/*문자 형식*/
//한글
var korean=/[ㄱ-ㅎ|ㅏ-ㅣ]/;
/[가-힣]/;
/[가-힣]/;

//영문
var english=/[a-z | A-Z]/;

특수문자

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

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

//공백
var blank = /[\s]/g;

이메일 형식

var email = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
//요구하는 형식에 따라 수정할 수 있음

전화번호 형식

/*집 전화번호*/
/^(0(2|3[1-3]|4[1-4]|5[1-5]|6[1-4]))(\d{3,4})(\d{4})$/

/*핸드폰 번호*/
/^(?:(010\d{4})|(01[1|6|7|8|9]-\d{3,4}))(\d{4})$/

웹사이트 형식

text.match(/https?:\/\/[\w\-\.]+/g); // ["http://dogumaster.com", "http://google.com"]

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

아이디/비밀번호

//아이디
var id_check = /^[a-z | A-Z]{3,6}[0-9]{3,6}$/;
//비밀번호
var password =/^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;

 

---

참고 자료

 

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

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

https://myeonguni.tistory.com/1555