Regular Expression

정규 표현식은 주로 문자열 데이터가 있을 때
이 데이터가 현재 페이지에 적합한 용도로 사용이 되는지를
체크하는데에 매우 유용한 Javascript 기능이다.

회원가입 페이지에서 사용자의 비밀번호를 체크하는 함수를 만들때
아래와 같은 부분들을 체크한다고 가정해보자.

1. 첫 문자가 영문자로 시작해야 한다.
2. 총 길이는 8글자 이상, 16글자 이하여야 한다.
3. 비밀번호에 숫자가 하나 이상 들어와 있어야 한다.
4. 비밀번호에 특수문자가 하나 이상 들어와 있어야 한다.

흔한 생각으로 여러개의 if문 혹은 반복문으로
함수를 만들 수 있지만
정규 표현식을 사용하면, 한 줄짜리 코드로도 구현가능하다.

/^(?=.*[a-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,20}$/.test("비밀번호")

위 처럼 정규 표현식에서 test() 메서드를 사용할 수 있는데,
인자값으로 넣은 데이터가 조건에 해당되면(비밀번호 체크 사항에 하나라도 불일치)에는 false, 조건에 해당되지 않으면 true를 리턴한다.

1. 정규 표현식 만들기

정규 표현식은 두 가지 방법으로 만들 수 있다.

바뀔 일이 없는 패턴의 경우 다음과 같이 리터럴을 사용하면 성능 향상에 도움이 될 수 있다.

const re = /ab+c/   

바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우에는
RegExp 객체의 생성자 호출방식이 더 좋을 수 있다.

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

2. 정규 표현식 사용법

표현식과 의미

표현식	의미
^x	문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다.
x$	문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다.
.x	임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다.
x+	반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다.
x?	존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다.
x*	반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다.
x	y
(x)	그룹을 표현하며 x 를 그룹으로 처리함을 의미한다.
(x)(y)	그룹들의 집합을 표현하며 앞에서 부터 순서대로 번호를 부여하여 관리하고 x, y 는 각 그룹의 데이터로 관리된다.
(x)(?:y)	그룹들의 집합에 대한 예외를 표현하며 그룹 집합으로 관리되지 않음을 의미한다.
x{n}	반복을 표현하며 x 문자가 n번 반복됨을 의미한다.
x{n,}	반복을 표현하며 x 문자가 n번 이상 반복됨을 의미한다.
x{n,m}	반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미한다.
[xy]	문자 선택을 표현하며 x 와 y 중에 하나를 의미한다.
[^xy]	not 을 표현하며 x 및 y 를 제외한 문자를 의미한다.
[x-z]	range를 표현하며 x ~ z 사이의 문자를 의미한다.
\^	escape 를 표현하며 ^ 를 문자로 사용함을 의미한다.
\b	word boundary를 표현하며 문자와 공백사이의 문자를 의미한다.
\B	non word boundary를 표현하며 문자와 공백사이가 아닌 문자를 의미한다.
\d	digit 를 표현하며 숫자를 의미한다.
\D	non digit 를 표현하며 숫자가 아닌 것을 의미한다.
\s	space 를 표현하며 공백 문자를 의미한다.
\S	non space를 표현하며 공백 문자가 아닌 것을 의미한다.
\t	tab 을 표현하며 탭 문자를 의미한다.
\v	vertical tab을 표현하며 수직 탭(?) 문자를 의미한다.
\w	word 를 표현하며 알파벳 + 숫자 + _ 중의 한 문자임을 의미한다.
\W	non word를 표현하며 알파벳 + 숫자 + _ 가 아닌 문자를 의미한다.

플래그와 의미

Flag	의미
g	Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미한다.
i	Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자를 식별하지 않는 것을 의미한다.
m	Multi line을 표현하며 대상 문자열이 다중 라인의 문자열인 경우에도 검색하는 것을 의미한다.

1. /패턴/플래그
   슬래시(/) 사이에는 매칭시킬 패턴을 작성한다.
   슬래시(/) 다음에는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 플래그를 써준다.
   아래의 의미 없는 문장을 정규 표현식으로 체크하자.
   "가나다라마바사, abcdef 010-1234-5678 가~나다!"
   • /가/ : '가'를 하나만 찾는다.
     "가 나다라마바사, abcdef 010-1234-5678 가~나다!"
   • /가/g : '가'를 모두 찾는다.
     "가 나다라마바사, abcdef 010-1234-5678 가 ~나다!"

3. 정규 표현식 사용 예제

• /[0-9]/g
  전체에서 0 ~ 9사이에 아무 숫자 '하나'를 찾는다.

• /[to]/g
  전체에서 t 또는 o를 모두 찾는다.

• /filter/g
  전체에서 f 따로 i 따로 찾는 것이 아닌 'filter'라는 단어에 매칭되는 것을 찾는다.

• /\b(?:(?!to)\w)+\b/g
  전체에서 'to' 단어가 아닌 것에 매칭되는 단어를 찾는다. / "Tutorial"도 제외이다.
  하지만 \b(?!\bto\b)\w+\b으로 체크하면 "Tutorial"은 제외되지 않는다.

• /^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$/i
  이메일 체크하는 정규 표현식이다.

  • 0~9 사이 숫자 or a-z A-Z 알파벳 아무거나로 시작하고
  • 중간에 - _ . 같은 문자가 있을수도 있고 없을수도 있으며
  • 그 후에 0~9 사이 숫자 or a-z A-Z 알파벳중 하나의 문자가 없거나 연달아 나올수 있으며
  • @ 가 반드시 존재하고
  • 0-9a-zA-Z 여기서 하나가 있고
  • 중간에 - _ . 같은 문자가 있을수도 있고 없을수도 있으며
  • 그 후에 0~9 사이 숫자 or a-z A-Z 알파벳중 하나의 문자가 없거나 연달아 나올수 있으며
  • 반드시 . 이 존재하고
  • [a-zA-Z] 의 문자가 2개나 3개가 존재
  • 이 모든것은 대소문자 구분안함

• /^\d{3}-\d{3,4}-\d{4}$/
  전화번호를 체크하는 정규 표현식이다.

  • 숫자 3개로 시작하며
  • 중간에 -하나 존재
  • 숫자가 3~4개 존재하며
  • - 하나 존재
  • 숫자 4개로 끝난다.

• /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
  핸드폰 번호를 체크하는 정규 표현식이다.

  • 숫자 3개로 시작하며
  • 중간에 - 하나 존재
  • 숫자가 3~4개 존재
  • - 하나 존재
  • 숫자 4개로 끝난다.

• /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/
  핸드폰 번호를 체크하는 정규 표현식이다.

  • 숫자 01로 시작하며 그 후에 0, 1, 6, 7, 8, 9 중에 하나가 나올수도 있으며
  • - 하나가 존재할 수도 있으며
  • 숫자 3~4개 이어지고
  • - 하나가 존재할 수도 있으며
  • 숫자 4개가 이어진다.

참조