Regular_Expressions 정규표현식

Regular_Expressions

정규표현식 = 정규식

• 원하는 패턴에 일치하는 내용이 존재하는지 검증한다.

• 문자열 데이터가 현재 페이지에 적합한 용도로 사용되는지 체크하는데 유용한 JS 기능이다.

• String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드를 사용할 수 있다.

사용 방법

생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일된다.
바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 이렇게 사용한다.

const re = new RegExp('ab+c')

메서드

• test
  /조건/.test("검증할문자열") : true / false를 반환한다.

• match
  "검증할문자열".match(정규식) : 일치하는 문자열의 배열을 반환한다.

• replace
  "검증할문자열".replace(정규식, 대체할문자열) : 일치하는 문자열을 대체하고, 대체된 결과를 반환한다.

1. 이스케이핑

• \: 특수문자를 있는 그대로 탐색(특수문자가 아닌 문자 리터럴로 취급)
• RegExp 생성자에 문자열을 넣어서 사용하는 경우, 역슬래시도 이스케이프 해줘야 한다.
  /a\*b/ 패턴을 생성하려면 👉🏻 new RegExp("a\\*b")

2. 플래그

• g : 전체 문자열을 탐색해서 모든 일치 반환
• i : 대소문자 무시
• m : 여러 줄 매칭
• ^ : 부정

/* i */
const re = /a/i // 대소문자 구분 없이 a가 있는 문자

/* ^ */
const re = /[^a-z]/  // a~z가 아닌 문자

3. Assertions 어서션

시작과 끝을 정해주지 않으면, 조건의 내용이 어딘가에 포함만 되어있으면 true가 나온다.

• ^ : 시작
• $ : 끝
• \b : boundary 문자와 공백 사이의 문자
• \B : 문자와 공백 사이가 아닌 문자

4. Quantifiers 수량자

• ?: 0개 또는 1개
• *: 0개 이상
• + : 1개 이상
• {자릿수}: 반복 횟수
  👉🏻 {3,4}: 3자리 또는 4자리

/\[email protected]/.test("[email protected]") // true
/^\w@a.com$/.test("[email protected]") // false : @ 전에 글자수가 하나가 아니라서 false
/^\w+@a.com$/.test("[email protected]") // true
/^\w?@a.com$/.test("[email protected]") // false
/^\w*@a.com$/.test("[email protected]") // true

5. Character classes 문자 클래스

• . : 1개의 모든 문자(.을 의미하고 싶다면 👉🏻 \. )
• \w: 알파벳, 숫자로 된 문자, 밑줄 기호() [A-Za-z0-9]
• \W: w의 반대 [^A-Za-z0-9_]
• \s : 공백(스페이스, 탭, 폼 피드, 라인 피드)
• \d : 숫자
• \D : 숫자가 아닌 문자 [^0-9]
• [a-zA-Z] : 문자만

/* . */
/^\w*@\w+.\w+$/.test("aaaa@a?com") // true
/^\w*@\w+\.\w+$/.test("aaaa@a?com") //false

핸드폰 번호

/^\d{3}-\d{3,4}-\d{4}$/.test("010-1234-5678")