31장 RegExp
* 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. *
정규 표현식이란?
- 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
- 자바스크립트의 고유 문법은아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.
- 자바스크립트는 펄의 정규 표현식 문법을 ES3부터 도입했음
- 문자열을 대상으로 패턴 매칭 기능을 제공하며, 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.
- 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 입력받은 문자열을 체크할 수 있다.
- 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용해서 가독성이 좋지 않음
정규 표현식을 사용하기 위해서는
1. 정규 표현식 리터럴
2. RegExp 생성자 함수 사용
두 가지 방법으로 나뉜다.
정규 표현식 구성
정규 표현식은 패턴과 플래그로 구성된다.
RegExp 메서드 종류
1. RegExp.prototype.exec
exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여, 매칭 결과를 배열로 반환하고 결과값이 없으면 null을 반환한다.
exec 메소드는 g 플래그를 지정하여도 첫번째 매칭 결과만을 반환한다.
const target = 'Is this all there is?';
const regExp = /is/;
const res = regExp.exec(target);
console.log(res); // [ 'is', index: 5, input: 'Is this all there is?' ]
2. RegExp.prototype.test
test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색해 매칭 결과를 불리언 값으로 반환한다.
const target = 'Is this all there is?';
const regExp = /is/;
const res = regExp.test(target);
console.log(res); // true
3. String.prototype.match
String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.
match 메서드는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.
cosnt target = 'Is this all there is?';
const regExp = /is/;
target.match(regExp);
// [ 'is', index: 5, input: 'Is this all there is?' ]cosnt target = 'Is this all there is?';
const regExp = /is/g;
target.match(regExp); // ["is", "is"]
플래그
플래그는 총 6개인데, 그 중에서 자주 쓰이는 3개를 살펴보도록 한다.
const target = 'Is this all there is?';
// target 문자열에서 is 문자열을 대소문자를 구별하여 한 번ㅁ나 검색한다.
target.match(/is/);
// ["is", index: 5, input: "Is this all there is?", groups: undefined]
// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 한 번만 검색한다.
target.match(/is/i);
// ["Is", index: 0, input: "Is this all there is?", groups: undefined]
// target 문자열에서 is 문자열을 대소문자를 구별하여 전역 검색한다.
tajrget.match(/is/g);
// ["is", "is"]
// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// ["Is", "is", "is"]
패턴
- 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지도 패턴에 포함되어 검색된다.
- 어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때 정규 표현식과 매치한다고 표현한다.
1. 문자열 검색
1) 검색 대상 문자열과 플래그를 생략했을 때
const target = 'Is this all there is?';
// 'is' 문자열과 매치한느 패턴, 플래그가 생략되었으므로 대소문자를 구별한다.
const regExp = /is/;
// target과 정규 표현식이 매치하는지 테스트한다.
regExp.test(target); // true
// target 정규 표현식의 매칭 결과를 구한다.
target.match(regExp);
// ["is", index: 5, input: "Is this all there is?", groups: undefined]2) 대소문자를 구별하지 않고 검색할 때는 플래그 i를 사용한다.
const target = 'Is this all there is?';
const regExp = /is/i;
target.match(regExp);
// ["Is", index: 0, input: "Is this all there is?", groups: undefined]3) 검색 대상 문자열 내에서 패턴과 매치하는 모든 문자열을 전역 검색하려면 플래그 g를 사용한다.
const target = 'Is this all there is?';
const regExp = /is/g;
target.match(regExp);
// ["Is", "is", "is"]
2. 임의의 문자열 검색
.은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관없다.
const target = 'Is this all there is?';
// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;
target.match(regExp); // ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]
3. 반복 검색
{m,n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. 콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의해야 한다.
예제가 많아서 책을 참고하기를 바란다.
4. OR 검색
|은 or의 의미를 갖는다.
예제가 많아서 책을 참고하기를 바란다.
5. NOT 검색
[...] 내의 ^은 not의 의미를 갖는다.
const target = 'AA BB 12 Aa Bb';
// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;
target.match(regExp); // ["AA BB ", " Aa Bb"]
6. 시작 위치로 검색
[...] 외의 ^은 문자열의 시작의 의미를 갖는다.
const target = 'https://poiemaweb.com';
// 'https'로 시작하는지 검사
const regExp = /^https/;
regExp.test(target); // true
7. 마지막 위치로 검색
$는 문자열의 마지막을 의미한다.
const target = 'https://poiemaweb.com';
// 'com'으로 끝나는지 검사
const regExp = /com$/;
regExp.test(target); // true
자주 사용하는 정규 표현식
1. 특정 단어로 시작하는지 검사
const url = 'http://example.com';
// 'http'로 시작하는지 검사
// ^ : 문자열의 처음을 의미한다.
const regexr = /^http/;
console.log(regexr.test(url)); // true
2. 특정 단어로 끝나는지 검사
const fileName = 'index.html';
// 'html'로 끝나는지 검사
// $ : 문자열의 끝을 의미한다.
const regexr = /html$/;
console.log(regexr.test(fileName)); // true
3. 숫자로만 이루어진 문자열인지 검사
const targetStr = '12345';
// 모두 숫자인지 검사
// [^]: 부정(not)을 의미한다. 얘를 들어 [^a-z]는 알파벳 소문자로 시작하지 않는 모든 문자를 의미한다.
// [] 바깥의 ^는 문자열의 처음을 의미한다.
const regexr = /^\d+$/;
console.log(regexr.test(targetStr)); // true
4. 하나 이상의 공백으로 시작하는지 검사
const targetStr = ' Hi!';
// 1개 이상의 공백으로 시작하는지 검사
// \s : 여러 가지 공백 문자 (스페이스, 탭 등) => [\t\r\n\v\f]
const regexr = /^[\s]+/;
console.log(regexr.test(targetStr)); // true
5. 아이디로 사용 가능한지 검사
const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;
console.log(regexr.test(id)); // true
6. 메일 주소 형식에 맞는지 검사
const email = 'abc123@gmail.com';
const regexr = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
console.log(regexr.test(email)); // true
7. 핸드폰 번호 형식에 맞는지 검사
const cellphone = '010-1234-5678';
const regexr = /^\d{3}-\d{3,4}-\d{4}$/;
console.log(regexr.test(cellphone)); // true
8. 특수 문자 포함 여부 검사
const targetStr = 'abc#123';
// A-Za-z0-9 이외의 문자가 있는지 검사
let regexr = /[^A-Za-z0-9]/gi;
console.log(regexr.test(targetStr)); // true
// 아래 방식도 동작한다. 이 방식의 장점은 특수 문자를 선택적으로 검사할 수 있다.
regexr = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;
console.log(regexr.test(targetStr)); // true
// 특수 문자 제거
console.log(targetStr.replace(regexr, '')); // abc123