JS 정규표현식

강정우·2023년 4월 27일
0

JavaScript

목록 보기
37/53
post-thumbnail

1. 정규표현식 작성 법

/패턴/플래그

  • 패턴 : 어떤 것을 찾을지 패턴을 작성함
  • 플래그 : 패턴에 해당하는 것을 찾아올 때의 옵션을 정함 (ex:하나만 or 모두)

2. 패턴 작성법

/[a-zA-Z0-9]/g

  • 위의 응용으로 - 를 붙이면 간한하게 charCode를 기준으로 찾아온다.
    패턴 의미
    a-zA-Z 영어알파벳(-으로 범위 지정)
    ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정)
    0-9 숫자(-으로 범위 지정)
    . 모든 문자열(공백을 포함한 모든 문자, 줄바꿈X)
    \d 숫자
    \D 숫자가 아닌 것
    \w 영어 알파벳, 숫자, 언더스코어(_)
    \W /w 가 아닌 것
    \s space 공백
    \S space 공백이 아닌 것
    \특수기호 특수기호

/내용/

  • / / 사이에 있는 어떠한 한 단어를 하나만 찾는다. 이는 char가 될 수 있고 혹은 string이 될 수 있다.

/내용/g

  • g 는 global 속성으로 찾고자 하는 내용을 모두 찾아준다.

/[내용]/g

  • 만약 내용이 ,없이 그냥 가A0 이렇게 연결되어있다면 각각 가, A, 0을 모두 찾아온다. 즉, []or의 기능을 한다.

3. 검색 패턴

예시 /[^a-zA-Z0-9]/g

  • ^ 는 not의 기능으로 해당 내용을 기준을 제외한 모든 것을 찾아온다.
    기호 의미
    | OR
    [] 괄호안의 문자들 중 하나
    [^문자] 괄호안의 문자를 제외한 것
    ^문자열 특정 문자열로 시작(괄호 없음 주의!)
    문자열$ 특정 문자열로 끝남
    () 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
    (?: 패턴) 그룹 검색(분류X)
    \b 단어의 처음/끝
    \B 단어의 처음/끝이 아님

4. 정규표현식 수량 패턴

  • 특정 패턴이 몇번 반복되는지도 필터링 가능하다.
    기호 의미
    ? 최대 한번(없음 || 한개)
    * 없거나 있거나 (없음 || 있음): 여러개 포함
    + 최소 한개(한개 || 여러개)
    {n} n개
    {Min,} 최소 Min개 이상
    {Min, Max} 최소 Min개 이상, 최대 Max개 이하

5. 정규표현식 플래그

  • 플래그는 동시에 여러개 사용할 수도 있다. 예) gi, gm 등
    플래그 의미
    g Global: 모든 문자 검색(안 쓰면 매칭되는 첫 문자만 검색)
    i Ignore Case: 대소문자 구분 안함
    m Multi line: 여러 행의 문자열에 대해 검색

6. 정규표현식 주요 메서드

  • JS 상에서 아래 메서드를 통해 패턴을 검사하고, 매칭되는 문자열을 추출, 변환한다.
    ("문자열").match(/정규표현식/플래그) "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
    ("문자열").replace(/정규표현식/, "대체문자열") "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
    ("문자열").split(정규표현식) "문자열"을 "정규표현식"에 매칭되는 항목으로 쪼개어 배열로 반환
    (정규표현식).test("문자열") "문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
    (정규표현식).exec("문자열") match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환)

예제

  • 아래 짧은 식은 프로젝트를 진행하며 프론트 엔드상에서 input값을 제어할 때 매우 유용한 코드이다.
this.inputValue.replace(/[^\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F]/gi, '');
this.inputValue.replace(/[^a-z0-9]/gi, '').substring(0, 10);
  • 짧게 첨언하자면 /[^a-z0-9]/gi 는 입력된 문자열에서 영문 대/소문자(a-z, A-Z)와 숫자(0-9) 이외의 모든 문자를 찾아서 삭제('공백' 으로 치환)하는 역할을 한다.
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글