본문 바로가기
  • 프론트엔드 개발자 세오세오 | Frontend dev Seo
Learn to Code

[JS] 정규표현식 (2)

by CEOSEO 2021. 10. 2.
728x90
반응형

 

최근에 코딩테스트를 보았는데, 이메일 유효성 검사를 구현해야했었다. 그런데 문제는... 정규표현식을 안써본지 너무 오래되서 도대체 기억이 나지 않는다는 것이었다 ㅠ_ㅠ.... 시간은 흐르지, 기억은 안나지, 게다가 시험 시작하고 15분 이후부터 왜 그렇게 화장실은 가고 싶은지 ㅠ_ㅠ... 총체적 난국에 그냥 코드로 길게 풀어서 구현하고 얼른 submit한 뒤 화장실로 달려갔었다. (코딩테스트 과정을 녹화해야 했는데 나의 시급함이 정말 말그대로 15분부터 영상에 그대로 나왔다...ㅋㅋㅋ....ㅋㅋㅜㅜ...🥲)

 

그래서 이번 기회에, 다음에 비슷한 문제를 또 겪게 되더라도 화장실 급함의 정도가 얼마나 위대한지에 영향받지 않고 정규표현식을 예쁘게 작성할 수 있게 되기 위해 다시 한번 정규 표현식을 되돌아보려고 한다.

 

아래는 이전에 정규표현식 관련하여 포괄적으로 커버를 했던 글이다:

2021.03.26 - [Learn to Code] - [JS] 정규 표현식 (Regular Expression, RegExp)

 

[JS] 정규 표현식 (Regular Expression, RegExp)

정규 표현식은 문자열의 집합을 나타내는 패턴을 뜻한다. 정규 표현식을 사용하면 유저가 회원가입 페이지에 정보를 작성할 때, 핸드폰 번호나 이메일 등이 특정 패턴 모양에 맞게 작성이 되었

seo-tory.tistory.com

 

 

 

 

문자열 길이로 검색하기

간혹 문자열의 길이에 유의하며 검색을 해야할 때가 있다. 이때 사용할 수 있는 것이 . 이다. .은 어떠한 것이든 문자 한 개를 의미한다.

 

const regex1 = /...../g
const str1 = 'apple'
regex1.test(str1) // true

const regex2 = /a...b/g
const str2 = 'acccb'
regex2.test(str2) //true

 

문자의 반복 횟수로 검색하기

{n,m}

앞에 나오는 문자 패턴이 최소 n번, 최대 m번 반복될 경우

n과 m은 둘다 양의 정수여야하며, n <= m를 만족해야 함.

 

{n}

앞선 패턴이 n번 반복되는 문자열.

{n, n}과 동일한 의미

 

 

{n,}

앞의 표현식이 n회 이상 반복될 경우. {n,m}에서 m이 생략된 경우로, 이럴땐 m을 무한대 취급함.

 

+

앞의 패턴이 1회 이상 연속으로 반복될 경우.

{1,}와 동일한 의미

 

*

앞의 표현식이 1회 이상 연속으로 반복될 경우.

{0,}와 동일한 의미

 

 

?

앞의 표현식이 0 또는 1회 등장할 경우.

{0, 1}과 동일한 의미

 

 

 

아이디 유효성 검사하기

아래는알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~15자리인지 검사하는 정규표현식이다. ^는 문자의 맨 앞 글자를 뜻하며, $는 문자의 맨 끝 글자를 뜻한다.

const idRegex = /^[A-Za-z0-9]{4,15}$/

 

 

 

이메일 주소 형식 검사하기

이메일은 "________@______.____"와 같은 모양으로 생겼다. 이걸 정규표현식으로 얼추 옮기면 다음과 같다:

/      @    \.     /

 

정규표현식에서 .은 특별한 의미가 있는 기호이기 때문에 정말 문자열 그대로 .의 용도로 사용하기 위해선 앞에 \ 백스페이스를 추가해주어야 한다. 이메일의 아이디에 해당하는 부분은 @ 앞에 적어주면되고, 그리고 도메인이 \.으로 구분되어 앞뒤로 들어가게 된다.

 

먼저 가장 간단히 '.com'과 같은 것을 추가하면 다음과 같아진다. 이는 모든 소문자 and/or 모든 대문자로 이루어진 패턴이 최소 2번, 최대 3번 나온다는 것을 뜻한다.

/^      @    \.[a-zA-Z]{2,3}$/

 

 

아이디 부분을 알파벳 대소문자, 숫자, 그리고 특수문자 중에선 - _ . 를 허용한다고하면, 다음과 같이 작성할 수 있다:

 

/^[a-zA-Z0-9]([-_\.]?[a-zA-Z0-9])*@    \.[a-zA-Z]{2,3}$/

 

구조를 자세히 보면, " [알파벳 대소문자 & 숫자] (  - _ .가 아예 없거나 아니면 1번만 나오거나 + 알파벳 대소문자& 숫자 )가 1회 이상 반복" 으로 이루어진 것을 볼 수 있다. 이메일의 아이디 부분의 맨 끝에 - 또는 _ 또는 . 으로 끝나는 것은 허용하지 않는 것이다.

 

@ 뒷부분도 동일하게 채우면 완성된다:

 

/^[a-zA-Z0-9]([-_\.]?[a-zA-Z0-9])*@[a-zA-Z0-9]([-_\.]?[a-zA-Z0-9])*\.[a-zA-Z]{2,3}$/

 

 

핸드폰 번호 형식 검사하기

핸드폰은 "숫자3개-숫자3개 또는 4개-숫자4개" 형식으로 이루어진다. 이를 표현하면 아래와 같다:

 

/^\d{3}-\d{3,4}-\d{4}$/

 

\d는 [0-9]와 같은 의미로, 모든 숫자를 뜻한다. {3}은 앞선 \d의 패턴이 3번 반복해야한다는 뜻이다. {3,4}는 앞선 패턴 \d가 최소 3번, 최대 4번 반복되어야 한다는 뜻이다. 

 

 

 

특수 문자 포함 여부 검사하기

특수 문자는 알파벳도 숫자도 아닌 문자를 의미한다. 즉, [a-zA-Z0-9]에 반대되는 문자들이다. 이는 아래와 같이 not을 뜻하는 ^를 써서 표현할 수 있다:

 

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

 

 

 

 

 

728x90
반응형

댓글