정규 표현식(Reg Exp)
일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어. 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.
웹 사이트에서 사용자의 핸드폰 번호를 입력 받았다고 가정하자. 이 핸드폰 번호가 핸드폰 번호가 맞는지 확인을 해야하는 상황이다. (물론 입력 받을 때 부터 검증을 하면 된다. string 형식으로 입력을 받지는 않을테니까..)
문자열 형태로 입력을 받았다고 했을 때!!
const tel1 = '010-1234-5678';
const tel2 = '010-1234-567팔';
const regExp = /^\d{3}-\d{4}-\d{4}$/;
regExp.test(tel1); // true
regExp.test(tel2); // false
만약 정규표현식을 사용하지 않는다면 반복문과 조건문을 통해 어마무시한 과정을 거쳐야 한다. (예를 들면.. 첫 번째 문자가 숫자고? 그 뒤에도 숫자, 그 뒤에도 숫자, 그 뒤에는 "-", 그 뒤엔 숫자~~ )
하지만 정규표현식이 무조건적으로 좋지는 않다. 기호들을 짬뽕으로 섞어서 사용하기 때문에 가독성이 너무 안좋기 때문이다.
정규표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용하는 방법 2가지가 있다. 일반적으로는 정규 표현식 리터럴을 사용한다.
정규 표현식 리터럴은 패턴과 플래그로 구성된다.
const target = "Is this all there is ?";
const regexp = /is/i;
// 패턴 : is
// 플래그 : i => 대소문자를 구분하지 않는다.
regexp.test(target);
test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값(true, false)으로 반환한다.
String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.
const target1 = "Is this all there is?";
const regExp1 = /is/;
const target2 = "Is this all there is?";
const regExp2 = /is/g;
console.log(target1.match(regExp1));
console.log(target2.match(regExp2));
패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다. 플래그는 총 6개인데 가장 많이 쓰이고 중요한 3개만 살펴보자.
i (ignore case) : 대소문자를 구별하지 않고 패턴을 검색한다.
=> i 플래그가 없다면 대소문자를 구별한다.
g (global) : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
=> g 플래그가 없다면 첫 번째 매칭 결과만 반환한다.
m (multi line) : 문자열의 행이 바뀌더라도 패턴 검색을 계속한다.
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?";
const regExp = /.../g;
target.match(regExp);
// (7) ['Is ', 'thi', 's a', 'll ', 'the', 're ', 'is?']
{m,n}은 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다.
<< 콤마 뒤에 공백이 있으면 정상 동작하지 않는다 >>
{n}은 패턴이 n번 반복되는 문자열을 의미한다.
{n,}은 패턴이 최소 n번 이상 반복되는 문자열을 의미한다.
+는 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.
?은 패턴이 최대 한번(0번 포함) 이상 반복되는 문자열을 의미한다.
const target ="A AA B BB Aa Bb AAA";
const regExp1 = /A{1,2}/g;
console.log(target.match(regExp1));
// (5) ['A', 'AA', 'A', 'AA', 'A']
const regExp2 = /A{2}/g;
console.log(target.match(regExp2));
// (2) ['AA', 'AA']
const regExp3 = /A{2,}/g;
console.log(target.match(regExp3));
// (2) ['AA', 'AAA']
const regExp4 = /A+/g;
console.log(target.match(regExp4));
// (4) ['A', 'AA', 'A', 'AAA']
const target1 = "color colour";
const regExp5 = /colou?r/g;
console.log(target1.match(regExp5));
// (2) ['color', 'colour']
| 은 OR의 의미를 갖는다.
const target ="A AA B BB Aa Bb AAA";
const regExp = /A|B/g;
console.log(target.match(regExp));
// (11) ['A', 'A', 'A', 'B', 'B', 'B', 'A', 'B', 'A', 'A', 'A']
분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용한다.
const target ="A AA B BB Aa Bb AAA";
const regExp = /A+|B+/g;
console.log(target.match(regExp));
// (7) ['A', 'AA', 'B', 'BB', 'A', 'B', 'AAA']
위의 정규 표현식은 아래와 같이 표현 가능하다.
[ ] 내의 문자는 OR로 동작한다. 그 뒤에 +를 사용하면 앞선 패턴을 한 번 이상 반복한다.
/A+|B+/g => /[AB]+/g
[ ] 안에 있는 ^은 not의 의미를 갖는다.
const target ="A AA B BB Aa Bb AAA";
const regExp = /[^0-9]+/g;
console.log(target.match(regExp));
// ['A AA B BB Aa Bb AAA']
[] 밖에 있는 ^은 문자열의 시작을 의미한다.
const target = "https://naver.com";
const regExp = /^https/;
regExp.test(target); // true
$은 문자열의 마지막을 의미한다.
const target = "https://naver.com";
const regExp = /com$/;
regExp.test(target); // true
잘 안쓰이기 때문에 문법을 전부 외울 필요는 전혀 없다고 생각한다. 갑자기 필요한 상황이 올 수 있으니 필요할 때 검색해서 바로 바로 쓸 수 있게 폼이나 문법 정도만 잘 이해해놓자.