31장 RegExp
정규 표현식
일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
패턴 매칭 기능을 제공한다.
// 사용자로부터 입력받은 휴대폰 전화번호
const tel = '010-1234-567팔';
// 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다.
const regExp = /^\d{3}-\d{4}-\d{4}$/;
// tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다.
regExp.test(tel); // -> false
정규 표현식 생성
정규 표현식 리터럴과 RegExp 생성자 함수로 RegExp 객체 생성할 수 있음.
패턴과 플래그로 구성된다.
const target = 'Is this all there is?';
// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp = /is/i;
// test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
regexp.test(target); // -> true
const target = 'Is this all there is?';
const regexp = new RegExp(/is/i); // ES6
// const regexp = new RegExp(/is/, 'i');
// const regexp = new RegExp('is', 'i');
regexp.test(target); // -> true
RegExp 메서드
RegExp.prototype.exec
패턴 검색해서 매칭 결과를 배열로 반환
첫번째 매칭 결과만 반환해줌.
const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target); // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
RegExp.prototype.test
패턴 검색해서 매칭 결과를 true/false 로 반환
const target = 'Is this all there is?';
const regExp = /is/;
regExp.test(target); // -> true
String.prototype.match
얘도 매칭 결과 배열로 반환
exec 메서드랑 다르게 g 플래그 지정하면 모든 매칭 결과 반환
const target = 'Is this all there is?';
const regExp = /is/g;
target.match(regExp); // -> ["is", "is"]
플래그
플래그는 정규표현식의 검색 방식을 설정하기 위해 사용된다.
| 플래그 | 의미 | 설명 |
|---|---|---|
| i | Ignore case | 대소문자를 구별하지 않고 패턴을 검색한다. |
| g | Global | 대상 문자열 내에서 패턴과 일치하는 모든 문자열 전역 검색 |
| m | Multi line | 문자열의 행이 바뀌더라도 패턴 검색을 계속한다. |
여러 플래그를 동시에 설정할 수 있다.
default는 대소문자를 구별해서 패턴을 검색하고, 첫 번째 매칭한 대상만 검색하고 종료한다.
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 문자열을 대소문자를 구별하여 전역 검색한다.
target.match(/is/g);
// -> ["is", "is"]
// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// -> ["Is", "is", "is"]
패턴
정규표현식은 패턴과 플래그로 구성된다.
패턴은 문자열의 일정한 규칙을 표현한다.
패턴은 /로 열고 닫으며 따옴표는 생략한다.
패턴을 표현하는 몇가지 방법에 대해 알아보자.
문자열 검색
패턴에 문자 또는 문자열을 지정하면 대상 문자열에서 이를 검색한다.
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 문자열을 대소문자를 구별하여 전역 검색한다.
target.match(/is/g);
// -> ["is", "is"]
// target 문자열에서 is 문자열을 대소문자를 구별하지 않고 전역 검색한다.
target.match(/is/ig);
// -> ["Is", "is", "is"]
임의의 문자열 검색
. 점 한개가 임의의 문자 한개 의미한다.
즉 … 은 문자 상관없이 3자리 문자열과 매치된다.
const target = 'Is this all there is?';
// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;
target.match(regExp); // -> ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]
반복 검색
{m,n} 앞선 패턴이 최소 m번, 최대 n 번 반복
{n} 앞 패턴이 n번 반복
{n, } 앞 패턴이 최소 n번 이상 반복
const target = 'A AA B BB Aa Bb AAA';
// 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{1,2}/g;
target.match(regExp); // -> ["A", "AA", "A", "AA", "A"]
+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.
즉, {1,}과 같다.
const target = 'A AA B BB Aa Bb AAA';
// 'A'가 최소 한 번 이상 반복되는 문자열('A, 'AA', 'AAA', ...)을 전역 검색한다.
const regExp = /A+/g;
target.match(regExp); // -> ["A", "AA", "A", "AAA"]
?는 앞선 패턴이 최대 한번(0번 포함) 반복하는 것을 의미한다.
{0,1} 과 같다.
const target = 'color colour';
// 'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고 'r'이 이어지는 문자열 'color', 'colour'를 전역 검색한다.
const regExp = /colou?r/g;
target.match(regExp); // -> ["color", "colour"]
OR 검색
| 은 or의 의미를 갖는다.
const target = 'A AA B BB Aa Bb';
// 'A' 또는 'B'를 전역 검색한다.
const regExp = /A|B/g;
target.match(regExp); // -> ["A", "A", "A", "B", "B", "B", "A", "B"]
분해되지 않는 단어 레벨로 검색하려면 + 를 함께 사용하면 된다.
const target = 'A AA B BB Aa Bb';
// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
const regExp = /A+|B+/g;
target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]
[ ] 내의 문자는 or로 동작한다.
const target = 'A AA B BB Aa Bb';
// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ...
const regExp = /[AB]+/g;
target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]
[ ] 안에서 범위 지정하려면 -를 사용한다.
예를 들어 알파벳을 검색하는 것은 아래와 같다.
const target = 'A AA BB ZZ Aa Bb';
// 'A' ~ 'Z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 'A', 'AA', 'AAA', ... 또는 'B', 'BB', 'BBB', ... ~ 또는 'Z', 'ZZ', 'ZZZ', ...
const regExp = /[A-Z]+/g;
// 대소문자 구별X
const regExp = /[A-Za-z]+/g;
target.match(regExp); // -> ["A", "AA", "BB", "ZZ", "A", "B"]
\d 는 숫자 [0-9]와 동일하다. 반대로 \D 는 숫자 아닌 문자를 의미한다.
const target = 'AA BB 12,345';
// '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
let regExp = /[\d,]+/g;
target.match(regExp); // -> ["12,345"]
// '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
regExp = /[\D,]+/g;
target.match(regExp); // -> ["AA BB ", ","]
\w 는 알파벳, 숫자, 언더스코어를 의미하고
\W 는 반대로 알파벳, 숫자, 언더스코어가 아닌 문자를 의미한다.
const target = 'Aa Bb 12,345 _$%&';
// 알파벳, 숫자, 언더스코어, ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
let regExp = /[\w,]+/g;
target.match(regExp); // -> ["Aa", "Bb", "12,345", "_"]
// 알파벳, 숫자, 언더스코어가 아닌 문자 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
regExp = /[\W,]+/g;
target.match(regExp); // -> [" ", " ", ",", " ", "$%&"]
NOT 검색
[ ] 내에서 ^ 은 not의 의미를 가진다.
const target = 'AA BB 12 Aa Bb';
// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;
target.match(regExp); // -> ["AA BB ", " Aa Bb"]
시작 위치로 검색
[ ] 밖에서 ^은 시작을 의미한다.
const target = 'https://poiemaweb.com';
// 'https'로 시작하는지 검사한다.
const regExp = /^https/;
regExp.test(target); // -> true
마지막 위치로 검색
$는 문자열의 마지막을 의미한다.
const target = 'https://poiemaweb.com';
// 'com'으로 끝나는지 검사한다.
const regExp = /com$/;
regExp.test(target); // -> true
자주 사용하는 정규표현식
특정 단어로 시작하는지 검사
const url = 'https://example.com';
// 'http://' 또는 'https://'로 시작하는지 검사한다.
/^https?:\/\//.test(url); // -> true
특정 단어로 끝나는지 검사
const fileName = 'index.html';
// 'html'로 끝나는지 검사한다.
/html$/.test(fileName); // -> true
숫자로만 이루어진 문자열인지 검사
const target = '12345';
// 숫자로만 이루어진 문자열인지 검사한다.
/^\d+$/.test(target); // -> true
하나 이상의 공백으로 시작하는지 검사
const target = ' Hi!';
// 하나 이상의 공백으로 시작하는지 검사한다.
/^[\s]+/.test(target); // -> true
아이디로 사용 가능한지 검사
const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.test(id); // -> true
메일 주소 형식에 맞는지 검사
const email = 'ungmo2@gmail.com';
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true
핸드폰 번호 형식에 맞는지 검사
const cellphone = '010-1234-5678';
/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // -> true
특수 문자 포함 여부 검사
const target = 'abc\#123';
// A-Za-z0-9 이외의 문자가 있는지 검사한다.
(/[^A-Za-z0-9]/gi).test(target); // -> true
특수 문자 제거하기
target.replace(/[^A-Za-z0-9]/gi, ''); // -> abc123