본문 바로가기

Front-End/HTML

[HTML] input pattern사용하기(정규표현식)

~ 목차 ~

웹만들기의 기초가 되는 로그인, 회원가입에 기본적으로 사용되는 input

input에 넣을 수 있는 다양한 속성중에 pattern을 이용하여 사용자가 입력할 수 있는 값을 제어할 수가 있다.

이걸 유효성 검사라고 보통 칭하며 입력한 값이 유효한 값인지 체크하는 것이다.

pattern을 제어할 때 정규표현식을 사용하며 정규표현식에 대해 알아보자.

[ 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '추출', '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단 ]

 

1. 콤마( . ) 

 : 어떤 문자 1개를 가리킨다. (줄바꿈문자(\n) 제외)

 

2. 대괄호[ ]

 :  [ ] 안에 있는 문자 중 하나를 가리킨다.

 

[abc]  a,b,c중에 하나

[a-z] 알파벳 소문자 중에 하나

[0-9] 숫자 중에 하나 (= ₩d )

[a-zA-Z] 알파벳 소문자, 대문자 중에 하나

 

3. 대괄호와 캐럿 [ ^ ]

 : [ ^ ] 안에 있는 문자를 제외한 하나를 가리킨다.

 

4. 별표( * )

 : 별표 앞에 있는 문자가 반복되는 것을 가리킨다.( 0번 반복도 가능)

 

5. 플러스 ( + )

 : 플러스 앞에 있는 문자가 반복되는 것을 가리킨다.( 0번 반복 불가능)

 

6. 물음표 ( ? )

 : 물음표 앞에 있는 문자가 0번 또는 1번 반복되는 것을 가리킨다.

 

7. {n}

 : 앞에 있는 문자가 n번 반복되는 것을 가리킨다.

 

8. {n,}

 : 앞에 있는 문자가 n번 이상 반복되는 것을 가리킨다.

 

9. {n,m}

 : 앞에 있는 문자가 n번 이상, m번 이하 반복되는 것을 가리킨다.

 

10. 캐럿( ^ )

 : 줄의 시작 위치를 가리킨다.

 

11. 달러( $ )

 : 줄의 마지막 위치를 가리킨다.

 

12. 그룹 ( )

 : 특정 패턴 묶기 (주로 반복 기호와 같이 사용)

 

13. 선택지정 ( | )

 : ()에 묶인 특정 패턴 중에 | 으로 나눈 것 중에 하나를 가리킨다.

 

14.  ( )\숫자

 : 그룹으로 지정된 내용을 뒤에 '\숫자' 형식으로 재 사용

 

15. /

 : 정규표현식 패턴의 시작과 끝을 나타냄

 

16. ₩.

 :  .  을 표현

 

17. /u

 : 유니코드 모드를 나타내는 플래그

 

18. (?= ... )

 : 괄호 안에 있는 표현이 해당 위치에서 최소한 하나 이상 존재

 

19. 탐욕적 수량자(Greedy), 게으른 수량자(Lazy)

  • 탐욕적 수량자의 핵심은 조건에 맞지 않을 때까지 하나의 패턴으로 인식하는 것이고
  • 게으른 수량자의 핵심은 조건에 맞으면 욕심부리지 말고 거기서 끝내는 것이다.
Greedy Lazy
* *?
+ +?
? ??
{n} {n}?
{n,} {n,}?
{n,m} {n,m}?

 

<기본적인 정규식>

정규표현식 설명
^abc abc로 시작하는 것
abc& abc로 끝나는 것
^[0-9] 숫자 0~9 중 하나로 시작하는 패턴
[^0-9] 숫자가 들어있지 않는 패턴
^[^0-9] 숫자가 들어있지 않은 문자로 시작하는 패턴
a{3} aaa
a{3,] a가 3번 이상 반복인 것
[0-9]{2} 두 자리 숫자
abc[7-9]{2} abc를 포함하고 7~9까지 숫자 중 2자리가 포함하는 것

<대표적으로 많이 사용하는 정규식>

패턴 설명 정규표현식
이메일  "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+₩.[a-zA-Z]{2,4}$/"
집전화번호 "/^(070|02|031|032|033|041|042|043|051|052|053|054|055|061|062|063|064)-₩d{3,4}-₩d{4}$/u"
휴대폰 번호 "/^(010|011|016|017|018|019)-₩d{3,4}-₩d{4}$/u"
우편번호 "/^₩d{3}-?₩d{3}$/u"
아이디 "/^[a-zA-Z]₩d{2,7}$/u"
주민등록번호 "/^₩d{2}[0-1]₩d[0-3]₩d-?[1-6]₩d{6}$/u"
비밀번호 " ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$!%*?&])[A-Za-z\d@#$!%*?&]{8,}$ "

참고한 블로그 

[정규표현식] 정규표현식 정리, 정규식 : 네이버 블로그 (naver.com)

[ 스크랩 ] Regular Expression( 정규표현식 ) 총정리 : 네이버 블로그 (naver.com)

 

[정규표현식] 정규표현식 정리, 정규식

[정규표현식] 정규표현식 정리   정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는...

blog.naver.com

 

728x90