[HTML] 정규식 패턴

안녕하세요. 

 

오늘은 값을 입력받을 때의 정규식 패턴으로 유효성검사(validation)하는 방법을 알아보겠습니다.

프론트앤드쪽에서는 간단히 코드로 작성할 수 있지만 서버측에서도 검증이 필요한 작업임을 말씀드립니다.

 

우선 정규표현식에 대해 알아보겠습니다.

 

# 정규 표현식(Regular Expression: Regex)

정규 표현식이란 특정 패턴의 문자열을 찾기 위한 표현 방식입니다. 이런 것을 formal language라고 합니다.

이를 이용하면 특정 패턴에 매칭되는 문자열을 찾을 수 있습니다.

 

예를 들어 '010-1234-5678' 이라는 휴대폰 번호는

"숫자 3개", "-" , "숫자 4개" , "-" , "숫자 4개"로 이루어져있는데 이를 정규 패턴으로 만들어주면

특정 문자열이 해당 패턴에 맞는지 체크할 수 있습니다.

아래 코드에서 확인해보세요.

참고로 \d는 숫자를 의미합니다. {3}은 숫자의 갯수를 의미합니다.

const regex = /\d{3}-\d{4}-\d{4}/;


regex.test('010-1111-2222'); // T

regex.test('01011112222'); // F

 

문자열 속에서도 휴대폰 번호만 끄집어 낼 수 있습니다.

const str = "안녕하세요. 유진입니다. 제 번호는 010-1234-4567 입니다.";

str.match(/\d{3}-\d{4}-\d{4}); // 010-1234-4567

 

예시는 이렇게 보여드릴 수 있겠고 이제 정규 표현식의 기초를 정리해보겠습니다.

패턴	내용
a-zA-Z	영어 알파벳 (-로 범위를 지정)
ㄱ-ㅎ가-힣	한글 문자(-로 범위를 지정)
0-9	숫자(-로 범위를 지정)
.	모든 문자열(줄바꿈은 x)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어( _ )
\W	\w 가 아닌 것
\s	스페이스 공백
\S	스페이스 공백이 아닌 것
\특수기호	특수기호

 

정규 표현식 검색 패턴

기호	의미
|	or
[]	대괄호안의 문자들 중 하나
[^문자]	해당 문자를 제외한 것
^문자	해당 문자열로 시작하는 것 (괄호 없음)
문자열$	특정 문자열로 끝나는 것
()	그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색(분류 x)
\b	단어의 처음과 끝
\B	단어의 처음과 끝이 아님

등등 알아야할 게 많습니다...

 

 

필요한 것들만 간략하게 알아보자면

이메일 주소 정규표현식 입니다. 자주 사용해봐야 알 것 같습니다.

const str = "이메일 주소는 yoojin@yoo.co.kr 입니다만?"

str.match("/[\w\-\.]+\@[\w\-\.]+/g"); //yoojin@yoo.co.kr

 

 

 

감사합니다.