31장. RegExp

🔎 이 파트를 공부하는 이유와 목적

회사에서 jsp로 개발을 하는데, 정규식을 쓸 일이 많다. 구글링으로 몇 번 봐서 했기 때문에, 대충 할 줄은 아는데, 대충 공부해서 그런지 자꾸 까먹어서 다시 공부한다.

🚩 명언

파이팅

1. 정규 표현식이란?

• 정규표현식(regular expression) : 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다.
• 정규표현식은 문자열을 대상으로, 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 패턴 매칭 기능을 제공한다.
• 정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다.

2. 정규 표현식의 생성

• 정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있는데, 일방적인 방법은 정규 표현식 리터럴을 사용하는 것이다.
• 정규 표현식 리터럴은 패턴과 플래그로 구성된다. /regexp/i

3. RegExp 메서드

• 정규표현식을 사용하는 메서드는 다양하게 있는데, 우선은 아래의 메서드들만 살펴보자.

✧ RegExp.prototype.exec

• exec 메서드는 매칭 결과를 배열로 반환한다.
• 매칭 결과가 없는 경우 null을 반환한다.
• g플래그를 지정해도 첫 번째 매칭 결과만 반환하므로 주의한다.

✧ RegExp.prototype.test

• test 메서드는 매칭 결과를 불리언 값으로 반환한다.

✧ String.prototype.match

• match 메서드는 매칭결과를 배열로 반환한다.
• exec 메서드랑 다르게, g플래그를 지정하면 모든 매칭 결과를 배열로 반환한다.

✦ exec, test 는 문자열을 인수로 받지만, match는 정규표현식을 인수로 받는다.

const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target);
regExp.test(target);
target.match(regExp);

4. 플래그

• 플래그는 정규표현식의 검색 방식을 설정하기 위해 사용한다.
  플래그 순서 상관없이 쓰면 되고, 옵션이니 쓰지 않다도 된다.
• 6개의 플래그 중 중요한 3개의 플래그
  i(ignore case) : 대소문자 구별하지 않고 검색
  g(global) : 모든 문자열을 전역 검색
  m(Multi line) : 문자열의 행이 바뀌더라도 검색

5. 패턴

• 패턴은 문자열의 일정한 규칙을 표현하기 위해 사용한다.
• 사용 방법은, /로 열고 닫으면 된다. (따옴표를 포함하면 안됨)
• 어떤 문자열 내에, 패턴과 일치하는 문자열이 존재할 때 '정규 표현식과 매치한다'고 표현한다.

✧ 임의의 문자열 검색

• .은 임의의 문자 한 개를 의미한다.
  /.../ 을 하면, 문자의 내용과 상관없이 3자리 문자열과 매치한다.

✧ 반복 검색

• {m,n}은 최소 m번, 최대 n번 반복되는 문자열을 의미한다.
  콤마 뒤에 공백이 있으면 안된다.
  /A{2,3}/ 을 하면, 'A'가 최소 2번 최대 3번 반복되는 문자열을 의미한다.
  /A{2}/ 을 하면, 'A'가 2번 반복되는 문자열을 의미한다.
  /A{2,}/ 을 하면, 'A'가 최소 2번 최대 상관없이 반복되는 문자열을 의미한다.

• +는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미한다.
  즉, +는 {1,}과 같다.
  /A+/를 하면, 'A'가 최소 1번 최대 상관없이 반복되는 문자열을 의미한다.

• ?는 앞선 패턴이 최대 한 번(0번 포함)이상 반복되는 문자열을 의미한다.
  즉, ?는 {0,1}과 같다.
  /colou?r/를 하면, color 혹은 colour과 매치한다.

✧ OR 검색

• |는 or의 의미를 갖는다.
  /A|B/를 하면, 'A' 또는 'B'를 의미한다.

• []를 이용하면 더 간단하게 표현이 가능한데, 그 이유는 []내의 문자는 or로 동작하기 때문이다.
  /[AB]/를 하면, 'A', 'B'가 매치된다.

• 범위를 지정하려면 [] 내에 -를 사용한다.
  /A-Z/를 하면, 'A',...,'Z'가 매치된다.

• \d는 숫자를 의미한다. ( <-> \D는 숫자가 아닌 문자다.)
  즉, \d는 [0-9]와 같다.

• \w는 알파벳, 숫자, 언더스코어를 의미한다. ( <-> \W는 반대다.)
  즉, /[A-Za-z0-9_]/와 같다.

✧ NOT 검색

• ^은 not의 의미를 갖는다.
  [0-9]와 같은 의미의 \d와 반대로 동작하는 \D는 [^0-9]와 같다.
  [A-Za-z0-9_]와 같은 의미의 \w와 반대로 동작하는 \W는 [^A-Za-z0-9_]와 같다.

✧ 시작 위치/마지막 위치로 검색

• []밖의 ^은 문자열의 시작을 의미한다. []안의 ^(not)과 구분하도록 한다.
  즉, /^http/는 'http'로 시작하는지 검사한다.

• $는 문자열의 마지막을 의미한다.
  즉, /com/는 'com'으로 끝나는지 검사한다.
  (velog에러때매 $ 일부러 안해놈)
  

✦ 정리하면,
. 은 무슨 문자인지 상관없이 문자개수만 정하고 싶을 때 사용한다.
{m,n}은 원하는 문자열의 반복횟수를 정할 수 있는데, 만약 {1,}이라면 +로 대체가능하고, {0,1}이라면 ?로 대체가능하다.
|는 or역할인데, []안에서 적으면 생략가능하다. 여기서 범위를 지정하려면 -를 사용하면 된다. 추가로 부정하려면 ^을 사용하면 된다.
\d는 숫자, \D는 문자, \w는 알파벳과 숫자 _ , \W는 \w의 반대다.
[]밖에서 ^을 사용하면 문자열의 시작을 의미하고, 추가로 $를 사용하면 문자열의 마지막을 의미한다.

6. 자주 사용하는 정규표현식

✧ 특정 단어로 시작하는지 혹은 끝나는지 검사

• 'http:// ' 또는 'https:// '로 시작하는지 검사한다.
• 'html로 끝나는지 검사한다.

/^https?:\/\//.test(url);
/html$/.test(url);

✧ 숫자로만 이루어진 문자열인지 검사

• 처음과 끝에도 숫자여야한다. 그리고 여러 개가 와도 상관없도록 한다.

/^\d+$/.test(target);

✧ 하나 이상의 공백으로 시작하는지 검사

• \s는 여러가지 공백문자(스페이스, 탭 등)을 의미한다.

/^\s+/.test(target);

✧ 아이디로 사용 가능한지 검사

• 알파벳 대소문자또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.

/^[A-Za-z0-9]{4,10}$/.test(id);

✧ 메일 주소 형식에 맞는지 검사

• 패스

✧ 핸드폰 번호 형식에 맞는지 검사

/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone);

✧ 특수 문자 포함 여부 검사

• 특수문자는 A-Za-z0-9 이외의 문자다.

/[^A-Za-z0-9]gi/.test(target);

• 특수문자를 제거할 때에는 String.prototype.replace메서드를 사용한다.

target.replace([^A-Za-z0-9]gi, '');