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) 이외의 모든 문자를 찾아서 삭제('공백' 으로 치환)하는 역할을 한다.