31장 RegExp

31.1 정규 표현식이란?

---

• 정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (자바스크립트 고유 문법이 아님)
• 문자열을 대상으로 패턴 매칭 기능 제공

const tel = '010-1234-567팔';

const regExp = /^\d{3}-\d{4}-\d{4}$/;

regExp.test(tel); // -> false

31.2 정규 표현식의 생성

---

• 정규 표현식 리터럴은 패턴과 플래그로 구성됨
  

const target = 'Is this all there is?';

// 패턴: is
// 플래그: i => 대문자를 구별하지 않고 검색함
const regexp = /is/i;

// test메서드는 target문자열에 regexp을 검색하여 매칭 결과를 불리언 값으로 반환
regexp.test(target); // -> true

• RegExp생성자 함수를 사용하여 RegExp객체생성 가능 (ES6)

new RegExp(pattern, [, flags])

• RegExp생성자 함수를 사용하면 변수를 사용해 동적으로 RegExp객체생성 가능

const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;

count('Is this all there is?', 'is'); // -> 3
count('Is this all there is?', 'xx'); // -> 0

31.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.test(target); // -> true

31.3.3 String.prototype.match

• match메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭결과를 배열로 반환
• g플래그가 지정되면 모든 매칭 결과를 배열로 반환

const target = 'Is this all there is?';
const regExp = /is/;

target.match(regExp);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

31.4 플래그

---

• 플래그는 옵션이며, 하나 이상의 플래그를 동시에 설정할 수 있음
• 플래그를 사용하지 않을 경우 첫번째 매칭한 대상만 검색하고 종료함

1. 많이 쓰는 플래그

• i(Ignore case) : 대소문자를 구별하지 않고 패턴 검색
• g(Global) : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
• m(Multi line) : 문자열의 행이 바뀌더라도 패턴 검색을 계속함

31.5 패턴

---

• 패턴은 /로 열고 닫으며 문자열의 따옴표는 생략함

31.5.1 문자열 검색

• 검색대상 문자열과 플래그를 생략한 정규 표현식의 매칭 결과를 구하면 대소문자를 구별하여 정규표현식과 매치한 첫번째 결과만 반환함
• 대소문자를 구별하지 않고 검색하려면 플래그 i 사용
• 패턴에 매치하는 모든 문자열을 검색하려면 플래그 g 사용

const target = 'Is this all there is?';

const regExp = /is/;

regExp.test(target); // -> true
target.match(regExp);
// -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

31.5.2 임의의 문자열 검색

• .은 문자의 내용과는 상관없는 임의의 문자 한개를 의미함,

const target = 'Is this all thered is?';
const regExp = /.../ g;

target.match(regExp); // -> ["Is ", "thi", "s a", "ll " , "the", "re ", "is?"]

31.5.3 반복 검색

• {m, n}은 앞선 패턴(다음 예제의 경우 A)이 최소 m번, 최대 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"]

• {n,}은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미함
• +는 {1,}과 같음

const target = 'A AA B BB Aa Bb AAA';

const regExp = /A{2,}/g;

target.match(regExp); // -> ["AA", "AAA"]

• ?는 {0,1}과 같음.

const target = 'color colour';

const regExp = /colou?r/g;

target.match(regExp); // -> ["color", "colour"]

31.5.4 OR검색

• |은 or의 의미를 가짐
• 분해하지 않은 단어 레벨로 검색하려면 +를 함께 사용

// 'A'또는 'B'가 한 번 이상 반복되는 문자열 검색
const regExp = /A+B+/g;
// 이렇게도 사용 가능
// const regExp = /[AB]+/g;
target.match(regExp); // -> ["A", "AA", "B", "BB", "A", "B"]

• 범위를 지정하려면 []내에 -를 사용함

// 'A' ~ 'Z'가 한번 이상 반복되는 문자열을 전역검색
const regExp = /[A-Z]+/g;
// 'A' ~ 'Z', 'a' ~ 'z'가 한번 이상 반복되는 문자열 전역검색
const regExp = /[A-Za-z]+/g;
// '0' ~ '9'가 한번 이상 반복되는 문자열 전역검색
const regExp = /[0-9]+/g;

31.5.5 NOT검색

• []안의 ^은 not의 의미를 가짐

// 숫자를 제외한 문자열을 전역검색
const regExp =[^0-9]+/g;

31.5.6 시작 위치로 검색

• []밖의 ^은 문자열의 시작을 의미함

// 'https'로 시작하는 지 검사
const regExp = /^https/;

31.5.7 마지막 위치로 검색

• $는 문자열의 마지막을 의미함

const regExp = /com$/;

31.6 자주 사용하는 정규표현식

---

31.6.1 특정 단어로 시작하는지 검사

// 'http://'또는 'https://'로 시작하는지 검사함
/^https?:\/\//.test(url);
/^(http|https):\/\//.test(url);

31.6.2 특정 단어로 끝나는지 검사

// 'html'로 끝나는지 검사
/html$/.test(filename);

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

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

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

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

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

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사함
/^[A-Za-z0-9]{4,10}$/.test(id);

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

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z]*@[0-9a-zA-Z](-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email);

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

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

31.6.8 특수 문자 포함 여부 검사

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

• 특수문자 제거 시에는 아래의 코드를 쓰면 됨

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