자바스크립트 정규표현식으로 문자열 검증하기 [ TIL / JavaScript ]

배경

유저들에게 간단한 입력을 받을 때, 클라이언트-서버 둘 다 입력을 검증해야될 필요가 있다. 이를테면 이메일을 입력받으면, 이메일 형식의 입력이 필요하다. 이 때 이메일은 반드시 '@'가 포함되어 있어야 하고, 뒤따라오는 도메인 형식의 확인도 필요하다. 비밀번호도 보안을 위해 대문자나 특수문자의 입력을 요구하기도 한다. 이렇게 문자를 입력받을 때 필요에 의해서 검증을 하는 것을 구현을 해야될 때 어떻게 해야할지 알아보려고 한다.

사실 한 글자, 한 글자 입력이 들어오고 삭제될 때마다 체크하는 방법도 있다. 비밀번호 정도는 이렇게 구현할 수 있을 것이다. 하지만 이메일 같이 패턴을 요구하는 검증에는 알고리즘을 짜기 어려울 수 있다.

정규표현식

이를 간편하게 구현할 수 있는 것이 정규표현식이다. 정규표현식은 지정된 패턴이 등장하는 문자열을 검증할 수 있는 수단을 제공해준다.

예를 들면 abc가 등장하는지 여부를 확인하려고 한다면, aabcd, aaaabccccc, abcccccccc가 모두 해당되는 경우에 속한다.
하지만 a가 있고, 이어서 b가 문자열에 포함되어 있기만 하고, 이어서 c가 문자열에 포함되어 있기만 하면된다의 여부를 확인하려고 하면, abc, azbxc, aabzyc가 모두 이에 해당될 수 있다. 이를 문자의 패턴 형식으로 찾을 수 있게 하는 것이 정규표현식이다.

위의 조금 복잡했던 예시를 정규표현식으로 표현해보자면 다음과 같이 표현할 수 있다.

/.*a.*b.*c.*/

위에서 사용된 .은 모든 문자와 대응된다. 즉 해당 자리에는 어떤 문자가 와도 정규표현이 타당하다고 판단한다.
*은 앞선 패턴이 나타나지 않거나 무한히 나타날 수 있는 상태를 의미한다. . 뒤에 *이 왔다면 임의의 문자가 나타나지 않거나 무한히 표현되어도 인정이 된다.
그리고 나서 a가 등장한다. 이는 .*의 패턴 뒤에는 a가 반드시 나타나야 한다는 뜻이다. 만약 a의 뒤에도 *이 붙었다면 나타나지 않거나 무한히 나타나도 된다. 하지만 여기서는 a하나만 작성되어있기 때문에 반드시 그 자리에는 a문자 하나만 나타나야 한다.
그 뒷내용은 앞서 설명한게 반복되기 때문에 간추리도록 하겠다.

그렇다면 제일 처음 예시로 제시한 abc의 문자열이 이어서 등장하는 패턴을 정규표현식으로 표현하려면 어떻게 해야할까? 이는 다음과 같이 표현할 수 있다.

/.*(abc).*/

괄호로 감싸진 문자열은, 하나의 패턴이 된다. 즉 임의의 문자열에서 abc는 한 묶음처럼 표현되어야 위의 정규표현식에 부합하는 문자열이 된다.

그리고 또 하나 많이 사용하는 표현이 대괄호이다. 대괄호는 해당 자리에 어떤 문자가 올 수 있는지를 표현하는 수단이다.

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

위 표현식은 영어, 숫자의 단어가 문한대로 표현될 수 있는 정규표현식이다. 예를 들면 1a8b5c도 가능하고, b3A7Z도 가능하다.

간단하게 정규표현식을 사용하는 방법을 알아보았고, 여기서 정리한 정규표현식의 수단을 직접 이용해볼 수 있는 사이트를 하나 추천하도록 하겠다.

• 정규표현식 연습 사이트

정규표현식 예시

이메일 정규표현식 예시

/^[\w-_.]{0,32}@[\w]+(\.[\w]*)*\w$/

{}를 이용하여 해당 문자 패턴이 몇 번 등장하고, 몇 번까지 등장할 수 있는지 지정해줄 수 있다.

비밀번호 정규표현식 예시

/(?=.*[\d])(?=.*[A-Z])(?=.*[!@#$%^&*()])[\w!@#$%^&*()]{0,32}/

전방탐색을 통해서 해당 문자 패턴이 문자열에 등장하는지 확인할 수 있다.