이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.
정규표현식
문자열을 대상으로 패턴 매칭 기능을 제공한다. 즉, 특정 패턴에 일치하는 문자열을 검색, 추출, 치환이 가능하다. 회원가입 입력 폼에서 전화번호, 이메일 등과 같이 특정 패턴을 요하는 상황에서 유용하게 쓰일 수 있다.
정규표현식 생성 방법
/regexp/gi위와 같이 /기호로 시작하여 패턴을(regexp) 작성하고 /로 마친다. 두 번째 / 뒤로 오는 기호는 플래그이다. 플래그의 종류는 다음과 같다. 일부만 작성하였다.
- g : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
- i : 대소문자 구분하지 않고 검색한다.
- m : 문자열 행이 바뀌더라도 계속 검색한다.
정규표현식 패턴
작성한 패턴과 플래그를 통해 후술한 정규표현식 메서드를 사용하여 문자열을 검색한다. 자주 쓰이는 패턴 위주로 작성하였다.
문자열 검색
const str = "hello, world!";
const regExp = /or/;
regExp.test(str); // true
str.match(regExp); // ['or', index: 8, input: 'hello, world!', groups: undefined]위와 같이 /와 / 사이에 검색하고자 하는 문자열 패턴을 작성한다. 위에서 보았던 플래그를 추가해보자.
const str = "Is there no one THERE?"
const regExp = /THERE/i; // 대소문자 구분 X
str.match(regExp); // ['there', index: 3, input: 'Is there no one THERE?', groups: undefined]
const regExp = /there/ig; // 대소문자 구분 X, 문자열 전역 검색
str.match(regExp); // (2) ['there', 'THERE']
const regExp = /.../g; // 점의 개수만큼 문자열을 구분하여 검색
str.match(regExp); // (7) ['Is ', 'the', 're ', 'no ', 'one', ' TH', 'ERE']반복 검색
A{m,n} 형식으로 작성할 수 있다. A문자열이 최소 m번, 최대 n번 반복되는 문자열을 검색한다. 공백이 있으면 정상작동하지 않는다.
const str = "AA aa BB b aaa bbb abaabb";
const regExp = /A{1,2}/ig;
str.match(regExp); // (6) ['AA', 'aa', 'aa', 'a', 'a', 'aa']
const regExp = /b{1,2}/g;
str.match(regExp); // (5) ['b', 'bb', 'b', 'b', 'bb']
const regExp = /B{1,}/g; // {1,}는 +와 동일하다. 즉, /B+/g로 쓸 수 있다.
str.match(regExp); // ['BB']? 기호는 ? 앞에 있는 문자가 0번 포함 최대 1번 이상 반복되는 문자열을 의미한다.
const str1 = "js jsx";
const str2 = "jpg jpeg";
const regExp1 = /jsx?/g;
const regExp2 = /jpe?g/g;
str1.match(regExp1); // (2) ['js', 'jsx']
str2.match(regExp2); // (2) ['jpg', 'jpeg']OR 검색
| 기호를 사용하여 OR 검색을 수행한다.
const str = "AA aa BB b aaa bbb abaabb";
const regExp = /A|B/g;
str.match(regExp); // (4) ['A', 'A', 'B', 'B']패턴을 범위를 지정하여 검색하고자 한다면 [m-n] 형식을 사용하면 된다.
const str = "abcdeFG abcdF acdeFGHi";
// a ~ c가 포함되어 있는 문자열을 전역 검색한다. => a 또는 b 또는 c
const regExp1 = /[a-c]/g; // /a|b|c|/g와 같다.
str.match(regExp1); // (8) ['a', 'b', 'c', 'a', 'b', 'c', 'a', 'c']
// a ~ b 또는 F ~ G가 포함되어 있는 문자열을 전역 검색한다.
const regExp2 = /[a-bF-G]/g;
str.match(regExp2); // ['a', 'b', 'F', 'G', 'a', 'b', 'F', 'a', 'F', 'G']NOT 검색
[...] 내의 ^기호는 not의미를 같는다.
const str = "AA aa BB bb 1234";
const regExp = /[^0-9]/g;
str.match(regExp); // (12) ['A', 'A', ' ', 'a', 'a', ' ', 'B', 'B', ' ', 'b', 'b', ' ']시작 위치로 검색
[...] 밖의 ^기호는 시작을 의미한다.
const str = "https://google.com";
const regExp = /^http/;
regExp.test(str); // true마지막 위치로 검색
$ 기호는 마지막을 의미한다.
const str = "https://google.com";
const regExp = /com$/;
regExp.test(str); // true특정 문자 기호로 검색
자주 사용되는 보이는 것들만 정리하였다.
- \d : 숫자를 의미한다. ([0-9])
- \D : 숫자가 아닌 것을 의미한다. ([^0-9])
- \s : 공백 문자를 의미한다. ([ ])
- \S : 공백 문자가 아닌 것을 의미한다. ([^ ])
- \w : 알파벳, 숫자, 언더스코어를 의미한다. ([A-Za-z0-9_])
- \W : 알파벳, 숫자, 언더스코어가 아닌 것을 의미한다. ([^A-Za-z0-9_])
정규표현식 메서드
정규표현식을 사용하는 메서드는 String.prototype.split, search, match 등 다양하다. 그 중 일부만 작성하였다.
RegExp.prototype.exec
- 기능 : 인수로 전달받은 문자열에 대하여 정규표현식 패턴을 검색해 매칭 결과를 배열로 반환한다.
- 반환 : 배열 또는 null
const str = "Is there no one THERE?";
const regExp = /there/ig; // g 플래그를 달아도 첫 번째 매칭결과만 반환
regExp.exec(str); // ['there', index: 3, input: 'Is there no one THERE?', groups: undefined]RegExp.prototype.test
- 기능 : 인수로 전달받은 문자열에 대하여 정규표현식 패턴을 검색해 매칭 결과를 불리언 값으로 반환한다.
- 반환 : true 또는 false
const str = "Is there no one THERE?";
const regExp = /there/ig;
regExp.test(str); // trueString.prototype.match
- 기능 : 인수로 전달받은 정규표현식과 대상 문자열을 매칭한 결과를 배열로 반환한다.
- 반환 : 배열 또는 null
const str = "Is there no one THERE?";
const regExp = /there/ig;
str.match(regExp); // (2) ['there', 'THERE']