[Javascript] RegExp 정규표현식

오승현·2022년 8월 2일
0

[Javascript]

목록 보기
1/2

❓ 문의하기 페이지를 개발하면서 form을 만드는데
이메일 형식이 맞는지 여부를 검사하기 위해
평소처럼 구글링을 통해 이메일 정규 표현식을 가져다가 쓰려다가
정확한 이해 없이 쓰고있었던 것 같아서 한번 정리하고 넘어가려고 한다.

1. 정규 표현식이란?

Regular Expression

  • 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어

  • 다양한 프로그래밍 언어에서 지원

  • ex) 휴대폰 번호가 유효한지 체크하는 경우 -> 숫자 3개 + '-' + 숫자 4개 + '-' + 숫자 4개 라는 패턴을 정규 표현식으로 정의하고 사용자로부터 입력받은 문자열이 이 패턴에 매칭하는지 체크

  • ex) 긴 문자열에서 전화번호 패턴, 웹사이트 패턴에 체크되는지 체크


정규표현식 장점

  • 정규표현식을 사용하면 반복문이나 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크 가능

정규표현식 단점

  • 주석이나 공백을 허용하지 않고 여러 기호를 혼합하여 가독성이 떨어짐



2. 정규 표현식의 생성

  1. 정규 표현식 리터럴을 사용하는 방법(주로 사용하는 방법)
  2. RegExp 생성자 함수를 사용하는 방법

2.1 정규 표현식 리터럴

  • 패턴과 플래그로 구성됨
  • regexp = 패턴
  • i = 플래그

플래그

  • 정규 표현식의 검색 방식을 설정하기 위해 사용
  • 플래그는 옵션이므로 선택적으로 사용 가능
  • 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있음
플래그의미설명
iIgnore case대소문자를 구별하지 않고 패턴을 검색
gGlobal대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
mMulti line문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

패턴

  • 문자열의 일정한 규칙을 표현하기 위해 사용
  • 문자열 검색
  • 정규 표현식을 생성 후 RegExp 메서드를 사용하여
    검색 대상 문자열과 정규 표현식의 매칭 결과를 구함
  • RegExp
    : RegExp.prototype.exec(인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환),
    RegExp.prototype.test(인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환),
    String.prototype.match(대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환)

패턴에 사용되는 문법

Groups and ranges

Character
\|또는
()그룹
[]문자셋, 괄호안의 어떤 문자든
[^]부정 문자셋, 괄호안의 어떤 문가 아닐때
(?:)찾지만 기억하지는 않음

Quantifiers

Character
?없거나 있거나 (zero or one)
*없거나 있거나 많거나 (zero or more)
+하나 또는 많이 (one or more)
{n}n번 반복
{min,}최소
{min,max}최소, 그리고 최대

Boundary-type

Character
\b단어 경계
\B단어 경계가 아님
^문장의 시작
$문장의 끝

Character classes

Character
\특수 문자가 아닌 문자
.어떤 글자 (줄바꿈 문자 제외)
\ddigit 숫자
\Ddigit 숫자 아님
\wword 문자
\Wword 문자 아님
\sspace 공백
\Sspace 공백 아님

연습 사이트: https://regexone.com/

출처:
모던 자바스크립트 딥다이브
https://github.com/dream-ellie/regex

profile
갓생 내가 살아 볼란다 🌟

0개의 댓글