[JavaScript] 자바스크립트에서 정규표현식 사용하기

정규 표현식

정규 표현식(regular expression)은 문자열의 일정한 패턴을 표현하는 규칙이다. 짧게는 정규식이라고도 부른다.

자바스크립트에서는 RegExp 객체와 RegExp메서드, 문자열 메서드를 이용해 정규표현식을 사용할 수 있다. 

 

 

정규식 만들기

두가지 방법이 있다. 

 

1. 정규식 리터럴 사용

const reg = /ab+c/;

2.  RegExp 객체의 생성자 함수 호출

const reg = new RegExp("ab+c");

 

정규식 패턴 작성 시, 정해진 규칙에 따라 패턴을 작성한다. 

---

정규 표현식 내용 정리 

 

일반 문자(리터럴 문자)

문자	설명
유니코드 문자	문자 그 자체.  (단, ^, $, \, ., *, +, ?, (, ), {, }, |는 정규 표현식 내에서 메타 문자로 사용되므로 제외. 앞에 \를 붙여 표현 가능. )
\0	NULL 문자
\n	개행 문자 (=엔터)
\t	탭 문자
\v	수직 탭 문자
\f	다음 페이지 문자
\r	캐리지 리턴 문자 (=커서를 줄 맨 앞으로 옮겨놓는 문자)
\xhh	16진수 hh로 지정된 ASCII 문자 (예: \x41은 아스키코드로 A) *참고: 16진수 아스키 표
\uhhhh	16진수 hhhh로 지정된 유니코드 문자 (예: \u0041은 유니코드 U+0041로 A)
\cX	X로 표시된 제어 문자. (=컨트롤과 함께 눌려진 문자.) (예: \cM는 Ctrl+M)

 

정규 표현식 규칙

규칙	설명	예시
[문자]	대괄호 내에 표현된 문자 집합 안의 모든 단일 문자 중 하나와 일치. -를 통해 범위 표현 가능.	/[abc]/ : a, b, c중 문자 한 개와 일치 /[a-z]/ : 모든 영문 소문자 중 한 개와 일치 /[abx-z]/ : a, b, x, y, z중 문자 한 개와 일치 /[가-힣]/ : 모든 한글 문자 한개와 일치
[^문자]	대괄호 내에 없는 단일 문자 한 개와 일치	/[^0-9]/ : 숫자 외의 문자 한 개와 일치
.	마침표에 해당하는 부분은 임의의 문자(줄바꿈 문자 제외) 한 개와 일치	/d.g/ : 첫번째 글자가 d이고 세번째 글자가 g인 문자열  /a...l/ : 첫번째 글자가 a이고 다섯번째 글자가 l인 문자열
\d / \D	\d는 숫자 \D는 숫자 외의 문자
\w / \W	\w는 영어 단어 문자(알파뱃, 숫자, 언더바) \W는 영어 단어 문자 외의 문자
\s / \S	\s는 공백 문자 (공백, 탭, 개행 문자 등) \s는 공백 외의 문자
[\b]	백스페이스 문자
{m, n}	바로 앞의 요소 최소 m번 최대 n번 반복 (n을 생략해 최소치만 표기도 가능)	/[a-z]{6,20}/  : 알파벳 소문자 최소 6자 ~ 최대 20자 반복 /[0-9]{3,}/ : 숫자 최소 3자 반복
{n}	바로 앞의 요소 n번 반복 = {n, n}	/[a-z]{5}\d{3}/ : 알파벳 소문자 5자 반복, 그 뒤 숫자 3자 반복
?	바로 앞의 요소 최대 1번 반복 = {0, 1}	/[a-z]{5}\d?/ : 알파벳 소문자 5자 반복, 그 뒤 숫자 최대 한번 반복
+	바로 앞의 요소 최소 1번 반복 = {1,}	/Mr\w+/ : Mr의 바로 뒤에 영어 단어 문자가 최소 하나 이상 반복
*	바로 앞의 요소 최소 0번 반복 = {0,}	/\s*[a-z]{3}/ : 공백 문자가 0개 이상 반복 후 알파벳 소문자 3자 반복 /dis.*/ : dis뒤로 가능한 최대 횟수만큼 임의의 문자를 반복 (욕심 많은 반복) /dis.*?/ : dis뒤로 가능한 최소 횟수만큼 임의의 문자를 반복 (욕심 없는 반복)
(패턴 요소)	소괄호 안의 내용을 부분적으로 그룹화 (캡쳐링 O)	/<(h[1-6])>.*<\/\1>/ : (h[1-6])에서 일치한 값을 \/\1에서 참조. 예를 들어 <h1>text</h1>이면 true, <h1>text</h2>면 false
(?:패턴 요소)	소괄호 안의 내용을 부분적으로 그룹화 (캡쳐링 X)
시작 위치에 ^	시작 위치에 패턴을 고정
마지막 위치에 $	마지막 위치에 패턴을 고정
\b / \B	\b는 영어 단어의 경계 \B는 영어 단어 경계 외의 위치	/\bdog/ : Bulldog 일치, dog 일치 /\Bdog/ : Bulldog 일치, dog 불일치
(?=패턴)	전방 탐색. 특정 패턴의 위치를 지정	/x(?=y)/ : x 다음에 y가 나오는 패턴
(?!패턴)	전방 부정 탐색, 특정 패턴이 안나오는 위치를 지정	/x(?!y)/ : x 다음에 y가 안나오는 패턴
(문자열|문자열|문자열)	문자열 여러 개 중 문자열 하나와 일치	/\b(\d+) (dog|cat|bird)/ : dog, cat, bird 중 문자열 하나와 일치

 

플래그

정규표현식 뒤에 플래그를 붙여 쓰는 것으로 매칭을 좀 더 상세하게 설정할 수 있다. 여러 개를 조합해 설정이 가능하다.  

플래그	뜻
i	ignoreCase / 대소문자 구별 없이 매칭
g	global / 일치하는 모든 문자열 검색
m	multiline / 여러 줄 모드로 패턴 매칭 (앵커 ^와 $의 작동 방식에만 영향을 줌)
u	unicode / 패턴내부에 유니코드 관련 기능을 활성화 (4byte문자 처리 등)
y	sticky / 접착 모드로 패턴 매칭 (문자 내 특정 위치에서 검색을 진행)

---

RegExp 메서드

RegExp객체.메서드(문자열)의 형태로 사용한다. 

 

- exec(문자열) : 패턴과 일치한 문자열을 배열로 리턴. 

const text = "Kim: 02-123-4567, Park: 02-987-6543";
const reg1 = new RegExp(/\w+:/);
const reg2 = new RegExp(/\d{2,3}-\d{3}-\d{4}/);

reg1.exec(text); // 'Kim:' 리턴
reg2.exec(text); // '02-123-4567' 리턴

- test(문자열) : 패턴과 일치한 문자열이 있는지 여부를 리턴. 

const text = "Kim: 02-123-4567, Park: 02-987-6543";
const reg1 = new RegExp("Lee");
const reg2 = new RegExp(/\d{2,3}-\d{3}-\d{4}/);

reg1.test(text); // false 리턴
reg2.test(text); // '02-123-4567'가 일치하므로 true 리턴

 

패턴 매칭 문자열 메서드

문자열.메서드(정규 표현식)의 형태로 사용한다. 

 

- search(정규 표현식) : 인수로 받은 패턴과 일치하는 최초의 문자열의 첫번째 문자 위치 리턴. (원본 문자열 수정 X)

const text = "Do-re-mi, do-re-mi";
text.search(/\w/); //일치: 해당하는 최초 인덱스인 0 리턴
text.search(/r/); //일치: 해당하는 최초 인덱스인 3 리턴
text.search(/\d+/); //불일치: -1 리턴

- replace(정규 표현식, 치환문자열) : 첫번째 인수의 패턴과 일치하는 문자열을 두번째 인자로 받은 문자열로 치환 후 결과 리턴. (원본 문자열 수정 X)

const text = "Do-re-mi, do-re-mi";
text.replace(/\w/, "s"); // "s-re-mi, do-re-mi" 리턴
text.replace(/-.+/, "-s"); // "Do-s" 리턴
text.replace(/\d+/, "s"); // 일치하는 것이 없으므로 text 값을 그대로 리턴

- match(정규 표현식) : 인수로 받은 패턴과 일치하는 문자열을 순서대로 저장한 배열을 리턴. (원본 문자열 수정 X)

const text = "Do-re-mi, do-re-mi";
text.match(/\w/); //첫번째로 일치한 문자열인 "D" 리턴
text.match(/-./); //첫번째로 일치한 문자열인 "-r" 리턴
text.match(/-./g); //g플래그를 설정하면 일치한 전부를 배열 ['-r', '-m', '-r', '-m'] 로 리턴

- split(정규 표현식) : 인수로 받은 패턴으로 문자열을 분할 후 배열에 담아서 리턴. (원본 문자열 수정 X)

const text = "Do-re-mi, do-re-mi";
text.split(/-/); //['Do', 're', 'mi, do', 're', 'mi'] 리턴
text.split(/[..]/); //['Do-re-mi, do-re-mi'] 리턴
text.split(/[do]/i); //['', '', '-re-mi, ', '', '-re-mi'] 리턴

---

참고 자료

이소 히로시, 『모던 자바스크립트 입문』, 길벗

RegExp https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp

정규식 한글 범위 지정 https://solskjaer.tistory.com/155