31장 RegExp
31.1 정규 표현식이란?
- 정규 표현식 : 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어.
- 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다.
- 문자열을 대상으로 패턴 매칭 기능을 제공한다.
- 패턴 매칭 기능 : 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능.
- 정규식 표현은 가독성이 좋지 않지만, 반복문과 조건문 없이 패턴을 정의하고 테스트할 수 있는 장점이 있다.
/regexp/i
- regexp : 패턴
- i : 플래그
- / / : 시작, 종료 기호
31.2 정규 표현식의 생성
- 정규 표현식 생성 방법은 2가지가 있다.
- 정규 표현식 리터럴(일방적인 방법)
- RegExp 생성자 함수
const target = 'Is this all there is?';
// 정규 표현식 리터럴
const regexp = /is/i;
regexp.text(target); // true
// 생성자 함수
const regexp2 = new RegExp(/is/i);
regexp2.test(target); // true31.3 RegExp 메서드
31.3.1 RegExp.prototype.exec
- exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다.
- 매칭 결과가 없는 경우 null을 반환한다.
- 문자열 내의 모든 패턴을 검색하는 g플래그를 지정해도 첫번째 매칭 결과만 반환한다.
const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target); // ['is', index: 5, input: 'Is this all there is?', groups: undefined]31.3.2 RegExp.prototype.test
- test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
const target = 'Is this all there is?';
const regexp = /is/;
regexp.text(target); // true31.3.3 RegExp.prototype.match
- match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.
- exec 메서드와 다르게 g 플래그로 지정하면 모든 매칭 결과를 배열로 반환한다.
const target = 'Is this all there is?';
const regExp = /is/;
const regExpGlobal = /is/g;
target.match(regExp); // ['is', index: 5, input: 'Is this all there is?', groups: undefined]
target.match(regExpGlobal); // ['is', 'is']31.4 플래그
- 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.
- 가장 중요한 3개의 플래그는
- i : 대소문자를 구별하지 않고 패턴을 검색한다
- g : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
- m : 문자열의 행이 바뀌더라도 패턴 검색을 계속 한다.
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']31.5 패턴
- 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다.
31.5.1 문자열 검색
- 정규 표현식의 패턴에 문자 또는 문자열을 지정하면 검색 대상 문자열에서 패턴으로 지정한 문자 또는 문자열을 검색한다.
const target = 'Is this all there is?';
// 'is' 문자열과 매치하는 패턴. 플래그가 생략되었으므로 대소문자를 구별한다.
const regExp = /is/;
regExp.test(target); // true
target.match(regExp); // ['is', index: 5, input: 'Is this all there is?', groups: undefined]
// 'is' 문자열과 매치하는 패턴. 플래그 i를 추가하면 대소문자를 구별하지 않는다.
const regExp = /is/i;
target.match(regExp); // ['Is', index: 0, input: 'Is this all there is?', groups: undefined]
// 'is' 문자열과 매치하는 패턴.
// 플래그 g를 추가하면 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
const regExp = /is/ig;
target.match(regExp); // ['Is', 'is', 'is']31.5.2 임의의 문자열 검색
- .은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관없다.
const target = 'Is this all there is?';
// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;
target.match(regExp); // ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']31.5.3 반복 검색
- {m,n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다.
- 콤마 뒤에 공백이 있으면 정상 동작하지 않는다.
- +는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.
- ?는 앞선 패턴이 최대 한 번(0번 포함)이상 반복되는 문자열을 의미한다.
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']
// 'A'가 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{2}/g;
target.match(regExp); // ['AA', 'AA']
// 'A'가 최소 2번 이상 반복되는 문자열를 전역 검색한다
const regExp = /A{2,}/g;
target.match(regExp); // ['AA', 'AAA']
// 'A'가 최소 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /A+/g;
target.match(regExp); // ['A', 'AA', 'A', 'AAA']
const color = 'color colour';
// 'color' 다음 'u'가 최대 한 번 이상 반복되고 'r'이 이어지는 문자열 'color', 'colour'를 전역 검색한다.
const regExp = /colou?r/g;
color.match(regExp); // ['color', 'colour']31.5.4 OR 검색
- |는 or의 의미를 갖는다.
- [] 내의 문자는 or로 동작한다.
- 범위를 지정하려면 [] 내에 -를 사용한다.
- '0' ~ '9' === \d
- \D는 문자를 의미한다.
- \w(소문자)는 알파벳, 숫자, 언더스코어를 의미한다.
- \W(대문자)는 알파벳, 숫자, 언더스코어가 아닌 문자를 의미한다.
const target = 'A AA B BB Aa Bb AAA';
// 'A' 또는 'B'를 전역 검색한4다.
const regExp = /A|B/g;
target.match(regExp); // ['A', 'A', 'A', 'B', 'B', 'B', 'A', 'B', 'A', 'A', 'A']
// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /A+|B+/g;
target.match(regExp); // ['A', 'AA', 'B', 'BB', 'A', 'B', 'AAA']
// 'A' 또는 'B'가 한 번 이상 반복되는 문자열을 전역 검색한다.
// 위의 코드와 동일함.
const regExp = /[AB]+/g;
target.match(regExp); // ['A', 'AA', 'B', 'BB', 'A', 'B', 'AAA']
// 'A' ~ 'Z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[A-Z]+/g;
target.match(regExp); // ['A', 'AA', 'B', 'BB', 'A', 'B', 'AAA']
// 'A' ~ 'Z' 또는 'a' ~ 'z'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const target = 'AA BB Aa Bb 12';
const regExp = /[A-Za-z]+/g;
target.match(regExp); // ['AA', 'BB', 'Aa', 'Bb']
// 숫자 '0' ~ '9'가 한 번 이상 반복되는 문자열을 전역 검색한다.
const target = 'AA BB 12,345';
const regExp = /[0-9]+/g;
target.match(regExp); // ['12', '345']
// '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[0-9,]+/g;
target.match(regExp); // ['12,345']
// '0' ~ '9' 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\d,]+/g;
target.match(regExp); // ['12,345']
// '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\D,]+/g;
target.match(regExp); // ['AA BB ', ',']
const target = 'Aa Bb 12,345 _$%&';
// 알파벳, 숫자, 언더스코어, ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\w,]+/g;
target.match(regExp); // ['Aa', 'Bb', '12,345', '_']
// 알파벳, 숫자, 언더스코어가 아닌 문자 또는 ','가 한 번 이상 반복되는 문자열을 전역 검색한다.
const regExp = /[\W,]+/g;
target.match(regExp); // [' ', ' ', ',', ' ', '$%&']31.5.5 NOT 검색
- [...] 내의 ^은 not의 의미를 갖는다.
const target = 'AA BB 12 Aa Bb';
// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /[^0-9]+/g;
target.match(regExp); // ['AA BB ', ' Aa Bb']31.5.6 시작 위치로 검색
- [...] 밖의 ^은 문자열의 시작을 의미한다.
const target = 'https://poiemaweb.com';
// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /^https/;
regExp.test(target); // true31.5.6 마지막 위치로 검색
- $는 문자열의 마지막을 의미한다.
const target = 'https://poiemaweb.com';
// 숫자를 제외한 문자열을 전역 검색한다.
const regExp = /com$/;
regExp.test(target); // true31.6 자주 사용하는 정규표현식
31.6.1 특정 단어로 시작하는 검사
- http:// 또는 https:// 로 시작하는지 검사하는 예제
const http = 'http://example.com';
const https = 'https://example.com';
/^https?:\/\//.test(http); // true
/^https?:\/\//.test(https); // true31.6.2 특정 담어로 끝나는지 검사
- 문자열이 'html'로 끝나는지 검사하는 예제
const fileName = 'index.html';
/html$/.test(fileName); // true31.6.3 숫자로만 이루어진 문자열인지 검사
- 문자열이 숫자로만 이루어진 문자열인지 검사하는 예제
const target = '12345';
/^\d+$/.test(target); // true31.6.4 하나 이상의 공백으로 시작하는지 검사
- 문자열이 하나 이상의 공백으로 시작하는지 검사 하는 예제
const target = ' Hi!';
/^[\s]+/.test(target); // true31.6.5 아이디로 사용 가능한지 검사
- 문자열이 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사하는 예제
const id = 'abc123';
/^[A-Za-z0-9]{4,10}$/.test(id); // true31.6.6 메일 주소 형식에 맞는지 검사
- 문자열이 메일 주소 형식에 맞는지 검사하는 예제
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); // true31.6.7 핸드폰 번호 형식에 맞는지 검사
- 문자열이 핸드폰 번호 형식에 맞는지 검사하는 예제
const cellphone = '010-1234-5678';
/^\d{3}-\d{3,4}-\d{4}/.test(cellphone); // true31.6.8 특수 문자 포함 여부 검사
- 문자열에 특수 문자가 포함되어 있는지 검사하는 예제
const target = 'abc#123';
(/[^A-Za-z0-9]/gi).test(target); // true
// 특수문자 선택적 검사
(/[\{\}\[\]\/?.,;:|\)*~`!^/-_+<>@\#$%&\\\=\(\'\"]/gi).test(target); // true
// 특수 문자 제거
target.replace(/[^A-Za-z0-9]/gi, ''); // abc123