상세 컨텐츠

본문 제목

자바 스크립트 공부<3> - 정규 표현식 검사2 검증(아이디, 비밀번호, 이메일), 전방 탐색

html&css&js

by oimb 2018. 9. 28. 23:05

본문


오늘은 지난번에 이어 자바스크립트와 정규표현식을 이용해서 간단한 검증을 해보자

그전에 정규표현식의 전방탐색을 알고 가야 한다.


1. 전방 탐색


전방탐색은 이름과 같이 앞에서부터 검사하는 것을 의미힌다.



http://www.naver.com https://history1994.tistory.com https://abcdefg.co.kr


이런 문자열들이 있다고하자


여기서 http 와 https 를 뽑고 싶다면 어떻게 해야 될까?


정규표현식 = /.+(:)/g

결과 

http:

https:

https:

아쉽게도  ' : '  와 같이 나와서 정확한 식별은 아니다.

여기서 전방탐색을 이용하면된다.


정규표현식 = /.*(?=:)/g


결과

http

https

https


우리가 원하는 결과를 얻었다. 어떠한 패턴인지 느낌이 올것이다.


전방탐색(lookahead)패턴은 일치 영역을 발견해도 그 값을 반환하지 않는 패턴을 말합니다. 전방탐색은 실제로는 하위 표현식이며, 하위 표현식과 같은 형식으로 작성됩니다. 전방탐색 패턴의 구문은 ?=로 시작하고 등호(=) 다음에 일치할 텍스트가 오는 하위 표현식입니다.

(하위 표현식은 정규표현식 용어이므로 잘모를수 있다. 한 번 검색해 보자.)


지금은 정규표현식을 정의대로 사용해 보았다. 그렇다면 이제 심화하여 사용해보자 이 심화는 검증을 통해 보여드리겠다. 그전에 앞서 본 검증들을 다시한번 보자.


이메일 검증 - 5~12자 문자 / @ / 2~10자 소문자 / . / 2~3자 소문자 / . 0or1개/ 소문자 0~2개

var emailReg = /^\w{5,12}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/;

전화번호 검증 - 010 / 3 ~ 4자 숫자 / 4자 숫자

var phReg =  /^(010)\d{3,4}\d{4}$/;

아이디 검증 - 소문자 1개이상으로 시작 / 소문자 + 숫자 1~15자

var idRegExp =/^[a-z]+[a-z0-9]{1,15}$/g;


(주의) - 간단하게 짠 검증이니 결함이 존재할 수 있다는점 알아주세요!


지난번 밨던 검증들이다.


오늘본 검증은 전방 탐색을 이용한 패스워드 검증이다.


패스워드 검증 - 소문자 + 대문자 + 숫자 + 특수문자 들로 이루어진 8자 이상의 것들

var pwdRegExp =/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;


앞서 전방탐색은 일치영역을 발견해도 그 값을 반환하지 않는 패턴이라고 했다. 이게 핵심인데 이를 이용해 검색 용도로 사용할 수 있고 또 검색에서 그치지 않고 검색한 단어가 있는 문자열을 뽑아 낼 수 있다.

앞서 본 전방탐색과 차이점이라면 뒤가아닌 앞에 썻다는 점인데 ,  전방탐색은 앞이든 뒤든 상관없이 특정 문자를 찾아주는 역할을 한다는 점을 알고가자.


여기서 중요한점은 ' . ' (점) 이다. 이 점이 검색하려는 문자를 포함하는 표현식이어야만 한다. 


무슨말인지 아까 해본것을 다시 한번 해보자.



http://www.naver.com https://history1994.tistory.com https://abcdefg.co.kr


이번에는 : 이후에 문자열들을 한번 뽑아 볼것이다. 단 뽑는 문자는 특정문자 (여기서는 : 을 포함해야 한다.)


여기서 http 와 https 를 뽑고 싶다면 어떻게 해야 될까?


정규표현식 = /(?=:).*/g

결과 

://www.naver.com

://history1994.tistory.com

://abcdefg.co.kr


: 을 포함하는 문자열을 정확히 뽑아냈다 그렇다면 이번에는 이렇게 한번 해보자


정규표현식 = /(?=:).\w/g


결과



?! 아무것도 나오지 않는다. 


느낌이 오는가?


1. 먼저 전방탐색을 하여 해당 문자를 찾는다  

2. 찾았다... 하지만 이 값을 패턴에 포함하지 않는다. ( 문자열에 저장하지 않는다고 생각하면 된다. 또는 소비하지 않는다라고도 한다.)

3. 찾았으니 이제 뒤에 정규표현식을 실행하는데...

4. . (점) 인경우 : 을 포함하는 표현식이므로 : 부터 뒷 문장을 전부 저장한다. but \w 는 : 을 포함하지 않는 표현식이므로 저장 하지 않는다.



오늘은 여기까지 내 느낌대로 기록한것들이 도움이 되었으면 좋겠다.


아 참고로 전방탐색 말고도 많은 종류의 탐색이 존재하는데 전방탐색외에 탐색은 지원하지 않는 것들이 많으므로 주의해서 사용하자! 사실 전방탐색만 이용해도 될것 같긴하다.



관련글 더보기