[javascript] 정규 표현식 정복하기

다양한 곳에 쓰이는 정규표현식, 매번 봐도 헷가려서 정리하기 

정규 표현식(regex)이란?

정규 표현식(regex)는 regular expression의 약자로 텍스트에서 특정한 규칙(패턴)을 가진 문자열을 찾을 때 사용할 수 있는 표현식이다. 정규 표현식으로 문자열에서 전화번호만 찾기, 유효한 이메일인지 확인하기 등 다양한 작업을 할 수 있어서 다양한 프로그래밍 언어에서 내부적으로 정규 표현식을 지원한다.

💻 정규 표현식을 연습할 수 있는 사이트
https://regexr.com/5ml92

정규 표현식 사용하기

정규 표현식을 나타내는 문법은 언어별로 조금씩 다르다. 그 중 javascript에서 정규식을 작성하는 방법은 다음과 같다.

슬래쉬 사이에 패턴을 작성하고 종료 슬래쉬 뒤에 추가 옵션인 플래그를 붙인다.

정규 표현식 생성하기

// 리터럴을 이용한 정규 표현식 생성
const regex = /🍎/; 

// RegExp 객체를 이용한 정규 표현식 생성
const regex = new RegExp("🍎");
const regex = new RegExp(/🍎/);

 

정규 표현식 패턴

문자/숫자 매칭 패턴

문자	설명
a-zA-Z	영어 알파벳
ㄱ-ㅎ가-힣	한글 문자
0-9	숫자
\특수기호	특수기호
\	특수 기호가 아닌 것
.	모든 글자(줄바꿈 제외)
\d	숫자
\D	숫자가 아닌 것
\w	문자
\W	문자가 아닌 것
\s	공백(space)
\S	공백(space)이 아닌 것

 

검색/그룹/범위 패턴

문자	설명	예시
|	또는	a|b
()	그룹 + 기억	(ab)
(?:)	그룹 + 기억x	(?:ab)
[]	괄호 안의 문자가 하나라도 있을 때	[ab]
[^문자]	괄호 안의 문자를 제외	[^ab]
\b	단어 경계
\B	단어 경계 아님
^문자열	문자열로 시작	^ab
문자열$	문자열로 끝남	ab$

 

반복 패턴

문자	설명	예시
?	0 or 1	/a?/
*	0개 이상	/a*/
+	1개 이상	/a+/
{n}	n개	.{2}
{min,}	최소 min개 이상	[a-z]{3,}
{min, max}	최소 min개 이상, 최대 max개 이하	[lo]{1,2}

 

플래그

플래그는 정규 표현식의 종료 슬래쉬 뒤에 붙인다. 플래그로 전역 옵션을 설정해 매칭을 더 상세하게 할 수 있다.

// 리터럴 정규 표현식에 플래그 사용
const regex = /🍎/i; 

// RegExp 객체를 이용한 정규 표현식에 플래그 사용
const regex = new RegExp("🍎", "i");

 

문자	설명
i	대소문자 구분 없이 검색
g	문자열 내의 모든 패턴을 검색
m	문자열의 행이 바뀌어도 검색
s	모든 문자 정규식이 개행 문자 \n도 포함
u	유니코드 전체 지원
y	문자 특정 위치에서 검색을 진행하는 sticky 모드 활성화

 

정규 표현식 javascript 메소드

정규표현식을 이용해 패턴을 찾기 위해 javascript에서 제공하는 함수를 용도에 맞게 사용하면 된다.

const text = "You're so delicate, 거품 속에 숨었네";

// 1. match: 일치하는 항목을 배열로 반환
text.match(/[a-zA-Z]/gm); // ['Y', 'o', 'u', 'r', 'e', 's', 'o', 'd', 'e', 'l', 'i', 'c', 'a', 't', 'e']

// 2. 일치하는 항목을 대체
text.replace(/[a-z]/gm, "🐰"); // "Y🐰🐰'🐰🐰 🐰🐰 🐰🐰🐰🐰🐰🐰🐰🐰, 거품 속에 숨었네"

// 3. 일치하는 항목을 기준으로 나누어 배열로 반환
text.split(/,/); // ["You're so delicate", ' 거품 속에 숨었네']

 

참고

• JavaScript 정규 표현식 문법 총정리 + 응용 예제 - 티스토리
• 정규 표현식 - 위키백과
• 자바스크립트에서 정규표현식 사용하기 - 티스토리
• https://github.com/dream-ellie/regex