정규표현식 예제로 살펴보기

박동건·2022년 9월 11일
0

JavaScript

목록 보기
8/8
post-thumbnail
post-custom-banner

정규표현식(Regex)은 Regular Expression로 텍스트에서 우리가 원하는 특정한 패턴을 찾을 때 혹은 백엔드로 정해진 형태로 넘기기 전 한 번 유효성 검사를 하는 경우 등 유용하게 사용할 수 있다.

실무에서 자주 사용하거나 요긴하게 쓰일 것 같은 패턴으로 정리할 것이다. (선정기준이 주관적이기에 여기에 있는 것이 전부가 아님!)

우선, 정규표현식은 패턴+플래그로 이루어 진다.

패턴은 슬래쉬( / )로 감싸면서 시작을 한다. 그리고 패턴 뒤에 플래그를 활용하여 옵션을 줄 수 있다.

//기본형태
const regex = /pattern/flag

Pattern

  1. Groups and ranges
cat과 매칭되는 부분 필터
/cat/  

cat 또는 dog 중 하나라도 매칭되는 부분 필터 (or 연산자)
/cat|dog/ 

cat 또는 dog 중 하나라도 매칭되는 그룹을 필터하거나 bird와 매칭되는 부분 필터(소괄호로 그룹핑)
/(cat|dog)|(bird)/ 

gr로 시작하고, e 또는 a로 매칭되면서 y로 끝나게 매칭되는 부분 필터 1
/gr(e|a)y/ 

gr로 시작하고, e 또는 a로 매칭되면서 y로 끝나게 매칭되는 부분 필터 2
/gr[ea]y/

gr로 시작하고, e 부터 f 까지 중에서 매칭되면서 y로 끝나게 매칭되는 부분 필터 
/gr[e-f]y/

gr로 시작하고, e 부터 f 까지 중에서 매칭되지 않으면서 y로 끝나게 매칭되는 부분 필터 (not sign)
/gr[^e-f]y/
  1. Quantifiers
gr로 시작하고, a가 있거나 없어도 되면서 y로 끝나게 매칭되는 부분 필터 
/gra?y/

gr로 시작하고, a가 있거나 많거나 없어도 되면서 y로 끝나게 매칭되는 부분 필터 
/gra*y/

gr로 시작하고, a가 있거나 많아도 되면서 y로 끝나게 매칭되는 부분 필터 
/gra+y/

gr로 시작하고, a가 2개에서 3개까지 이면서 y로 끝나게 매칭되는 부분 필터 
/gra{2,3}y/
  1. Boundary-type
맨 앞에 ko로 시작하는 단어 부분 필터
/\bko/

맨 뒤에 ko로 끝나는 단어 부분 필터
/ko\b/

맨 앞에 ko로 시작하는 문장 부분 필터
/^ko/

맨 앞에 ko로 시작하는 문장 부분 필터 
/ko$/
  1. Character classes
정규표현식에서 쓰이고 있는 문자열을 찾을 때에는 escape해줘야 한다.(백슬러쉬 ( \ ) )
/\[\]/ -> []

모든 숫자(digit) 
/\d/

숫자가 아닌 모든 character
/\D/

모든 문자열(word)
/\w/

문자가 아닌 모든 character
/\W/

모든 띄어쓰기(space)
/\s/

띄어쓰기를 제외한 모든 character
/\S/

Flag

i 플래그는 대소문자 구분 없이 검색
g 플래그는 일치하는 모든 패턴을 검색
m 플래그는 다중 행모드를 활성화

자주 사용될 만한 표현식 및 꿀조합

전화번호 + 휴대폰번호 1 (-)
/\d{2,3}-\d{3,4}-\d{4}/

전화번호 + 휴대폰번호 2 (.)
/\d{2,3}.\d{3,4}.\d{4}/

전화번호 + 휴대폰번호 3 (only digit)
/\d{2,3}\d{3,4}\d{4}/

이메일
/[a-zA-Z0-9._+-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/
검색
str.match(regexp)

위치검색
str.search(regexp)

치환
str.replace(regexp, replacement)

일치여부
regexp.test(str)
테스트
let reg = /\d{2,3}[-.]?\d{3,4}[-.]?\d{4}/ 

reg.test('01012345678') // true
reg.test('010-1234-5678') // true

reg.test('010-1234.5678') // true ... ? 구분자를 설정하자.

참고
모던 javaScript 튜토리얼
드림코딩
어떤이의 블로그
정규표현식 테스트 사이트

profile
박레고의 개발 블로그
post-custom-banner

0개의 댓글