정규 표현식은 실제로 많이 사용하면서도 패턴을 만들어 직접 사용하거나 깊게 이해하지 않고 사용하는 경우가 많을겁니다. 실제로 패턴들을 외워서 사용할 필요는 없고, 자주 사용한다면 자연스럽게 외워지거나 익숙해지는 정도가 충분하다고 생각합니다. 이번 포스트에서는 자바스크립트에서 정규표현식을 사용하는 방법과 그 의미를 학습해보겠습니다.
정규 표현식
정규 표현식이란?
정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어로, 자바스크립트 고유의 문법이 아니며 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있습니다.
정규 표현식은 쉽게 말해 문자열에 대해 패턴 매칭기능을 사용하기 위한 형식언어입니다. 예를 들어 휴대폰 번호 패턴과 매치되는 문자열을 아래와 같이 자연어로 표현할 수 있습니다.
숫자3개 다음에 -기호, 숫자 4개 다음에 -기호, 숫자 4개
위 자연어 표현으로는 상대방을 이해시킬 수 있다면 어떤 형식으로든 가능하지만, 약속된 형식 언어인 정규 표현식을 사용하면 누구나 어떤 패턴인지 정확하게 알 수 있습니다. 또한 컴퓨터도 알아들을 수 있는 표현입니다.
/^\d{3}-\d{4}-\d{4}$/
위의 표현이 정규 표현식으로 휴대폰 번호 형식 문자열을 표현한 것입니다.
만약 정규표현식을 쓰지 않고 컴퓨터 언어로 문자열이 위 형식에 맞는지 확인하려면 반복문을 돌면서 매 문자마다 검증을 해야할 것입니다.
정규 표현식 생성
자바스크립트에서 정규 표현식 객체는 두 가지 방법으로 생성가능합니다.
1. RegExp 생성자 함수 사용
const regexp = new RegExp(/is/i)
2. 정규표현식 리터럴 사용
const regex = /is/i;
정규 표현식 구성
정규 표현식은 아래와 같이 패턴과 플래그로 구성됩니다.
아래는 정규 표현식 리터럴을 사용하여 간단한 정규 표현식 객체를 생성하는 예제입니다.
const target = 'Is is all there is?';
const regexp = /is/i;
regexp.test(target); // true;반면 아래는 정규 표현식 생성자 함수를 이용한 방법입니다.
const target = 'Is is all there is?';
const regexp = new RegExp(/is/i);
regexp.test(target); // true;RegExp 메서드
RegExp 빌트인 객체의 프로토타입 메서드들이 있어 쉽게 정규표현식에 대한 패턴 매칭 테스트, 결과 반환 등을 할 수 있습니다. String 빌트인 객체의 프로토타입 메서드들과 함께 사용하기도 하며, 꽤 많은 메서드들이 있지만 다 외울 필요는없기 때문에 많이 쓰이는 match, test, exec 메서드를 빠르게 훑고 지나가겠습니다.
exec
인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환합니다.
test
인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로로 반환합니다.
match
RegExp객체가 아닌 String.prototype.match메서드이며, 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환합니다.
플래그
다음과 같이 정규 표현식에는 여러 플래그들이 있어 패턴을 검색할 조건이나 방식을 설정할 수 있습니다.
| 플래그 | 의미 | 설명 |
|---|---|---|
| i | Ignore case | 대소문자 구분 없이 패턴 검색 |
| g | Global | 대산 문자열 내에서 패턴과 매칭되는 모든 문자열을 전역적으로 검색 |
| m | Multiline | 문자열의 행이 바뀌더라도 패턴 검색을 계속 진행 |
- 이외에도 여러 플래그들이 있지만 위 3가지가 가장 흔히 쓰입니다.
패턴
정규표현식 패턴을 생성하는 방법에 대해 중요한 핵심들만 빠르게 학습해보겠습니다.
정규 표현식은 패턴과 플래그로 구성됩니다. 여기서 패턴은 문자열의 일정한 규칙을 표현하기 위해 사용합니다. 패턴은 /로 시작하고 닫으며, 따옴표는 생략합니다. 따옴표가 포함되면 따옴표 문자 자체가 패턴에 포함되게 됩니다. 그리고 어떤 문자열에 정규 표현식 패턴과 일치하는 문자열이 존재하면 "정규 표현식과 매치한다"고 표현합니다. 이제 패턴을 표현하는 몇 가지 방법에 대해 빠르게 알아보겠습니다.
문자열 검색
아래와 같은 정규 표현식을 만들어 특정 문자열과 match하면 검색할 문자열이 포함되었는지 알 수 있습니다.
const regexp = /{검색할문자열}/;임의의 문자열 검색
.은 임의의 문자 한개를 의미합니다. 문자의 내용이 어떤것이든 상관없다는 얘기죠. 다음 예제의 경우.을 3개 연속하여 패턴을 생성했으므로 내용 상관없는 3자리 문자열을 검색한다는 의미입니다.
const regexp = /.../;반복 검색
A{m, n}형식의 패턴으로 반복 검색을 시행할 수 있습니다. A가 최소 m번, 최대 n번 반복되는 패턴을 검색합니다.
const regexp = /{검색할문자열}{m,n}/g; 
-
아래와 같이 다양한 형식의 반복 검색 패턴이 존재합니다.
형식 의미 예제 {n}앞선 패턴이 n번 반복됨 /A{2}/{n,}앞선 패턴이 최소 n번 이상 반복됨 /BB{2,}/+앞선 패턴이 최소 한 번 이상 반복됨 /C+/
OR 검색
|기호는 OR의 의미를 가집니다.
const regexp = /{검색할문자열1}|{검색할문자열2}/g;검색한 문자열 1 또는 검색할 문자열 2가 포함되었는지 검색한다는 의미입니다.
참고로 위 OR기호를 더 간단하게 []기호로 표현할 수 있습니다.
const regexp = /[{검색할문자열1}{검색할문자열2}]/g;또한 -기호로 범위를 표현할 수 있습니다.
const regexp = /[A-Z]/g; // 영어 대문자 알파벳 검색 형식 문자
형식 문자는 패턴 내부에 숫자, 숫자외의 문자 등을 하나의 형식으로 표현하기 위해 존재하는 특별한 문자입니다.
| 형식 문자 | 의미 | 동일 패턴 |
|---|---|---|
\d | 숫자 | [0-9] |
\D | 숫자가 아닌 문자 | [^0-9] |
\w | 알파벳, 숫자, 언더스코어 | [A-Za-z0-9_] |
\W | 알파벳, 숫자, 언더스코어가 아닌 모든 문자 | [^A-Za-z0-9_] |
NOT 검색
^기호를 사용하여 특정 패턴을 제외할 수 있습니다.
const regexp = /[^A-Z]/g; // 영어 대문자 알파벳을 제외한 모든 문자 검색마지막 위치로 검색
$기호로 문자열의 마지막을 표현할 수 있습니다.
const regexp = /com$/g; // 'com'으로 끝나는 지 검색자주 사용하는 정규표현식
정규 표현식 문법을 다 외워서 적재적소에 사용하면 좋겠지만, 그럴 이유도 없고 효율도 떨어집니다. 그렇다고 자주 사용되는 패턴들까지 매번 사용할 때마다 복붙이나 구글링을 한다면 그것도 문제겠죠? 아주 흔하게 사용되는 표현식들만 모아봤습니다.
특정 단어로 시작하는지 검사
[...]바깥의^는 문자열의 시작을 의미합니다. 또한?는 앞선패턴이 최대 한번(0번 포함)이상 반복되는지 의미합니다.
const regexp = /^https?:\/\//; // "http[s]://"로 시작하는지 검사특정 단어로 끝나는지 검사
$기호로 문자열의 마지막을 표현할 수 있습니다.
const regexp = /com$/g; // 'com'으로 끝나는 지 검색숫자로만 이루어진 문자열인지 검사
const target = '12345';
const regexp = /^\d+$/; // 처음과 끝니 숫자이고 최소 한 번 이상 반복되는 문자열 매치
regexp.test(target); // true;특수문자 포함 여부 검사
const target = 'abc#12345';
const regexp = /[^A-Za-z0-9]/gi/; // 숫자, 알파벳이 아닌 문자(특수문자) 검색
regexp.test(target); // true;