[DEV]알고 있어야 할 8가지 정규식 표현 from nettuts+..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

nettuts+에 Vasili이 쓴 유용한 정규식 표현에 대한 글을 올려서 내용 정리합니다. 정규식만 잘 써도 Validation이나 String을 다루기가 무척 편할텐데 쓸때마다 헷갈리고 약간은 어렵게 느껴지고 쉽게 다가가지지 않는게 정규식인것 같습니다.

Vasili는 정규식에 대해서 잘 모르면 Regular Expressions for Dummies 스크린캐스트 시리즈를 보기 권하고 있습니다. 시간내서 보면 꽤 도움이 될듯 합니다. 자리 잡고 스크린캐스트 보게는 잘 안되는것 같습니다. 글을 읽어도... ㅎㅎ

정규표현식을 공부해도 막상 적용하려면 약간 막막하고 헷갈리기 마련인데 웹개발할 때 보통 많이 사용할 만한 내용을 위주로 설명해 주었기 때문에 이해하기도 쉽고 활용해서 쓰기에 꽤나 유용할 듯 보입니다. (위에도 간단히 밝혔지만 nettuts+의 올라온 포스팅을 번역,정리한 내용입니다.) 간단한 정규표현식 문법은 전에 올린 포스팅을 참고하시면 될 것 같습니다.

Matching a Username

C-like

1 2	// Pattern /^[a-z0-9_-]{3,16}$/

문자열의 시작부분을 찾는 ^ 다음에 소문자(a-z)나 숫자(0-9), 언더스코어(_), 하이픈(-)가 나올 수 있고 {3, 16}은 앞의 캐릭터들( [a-z0-9_-] )이 최소 3개에서 15개 이하로 나와야 하고 문자열의 끝을 의미하는 $가 마지막에 나옵니다.

Match되는 스트링 : my-us3r_n4m3
Match되지 않는 문자열 : th1s1s-wayt00_l0ngt0beausername   (너무 김)

Matching a Password

C-like

1 2	// Pattern /^[a-z0-9_-]{6,18}$/

username부분과 아주 유사합니다만 유일하게 다른 부분은 글자수가 3~16자가 아니라 6~18자라는 부분( {6,18} )입니다.

Match되는 스트링 : myp4ssw0rd
Match되지 않는 문자열 : mypa$$w0rd   (달러($)표시가 포함되어 있음)

Matching a Hex value

C-like

1 2	// Pattern /^#?([a-f0-9]{6}|[a-f0-9]{3})$/

이번에서 문자열의 시작을 찾는 ^로 시작합니다. 그 다음 number sign(#)은 뒤에 물음표(?)가 있기 때문에 옵션입니다. 물음표(?)는 그 앞에 나온 캐릭터가(여기서는 number sign)이 선택사항(있어도 되고 없어도 되는)임을 의미합니다. 그 다음에 나오는 그룹(괄호 안에 있는)에서 2가지 경우를 가질 수 있습니다. 첫번째는 a와 f사이의 소문자나 숫자가 6번나오는 것입니다. 세로바(|)는 3개의 a와 f사이의 소문자나 숫자가 대신 나올수도 있음을 으미합니다. 마지막으로 문자열의 끝을 의미하는 $가 위치합니다.

6개의 문자열을 앞에 둔 이유는 #ffffff같은 Hex값을 파서가 잡아내도록 하기 위한 것으로 반대로 3개의 문자열 검사를 앞에 두었다면  파서는 뒤의 3개의 f는 빼로 오직 #fff만을 잡아냈을 것입니다.

Match되는 스트링 : #a3c113
Match되지 않는 문자열 : #4d82h4   (h 가 포함되어 있음)

Matching a Slug

C-like

1 2	// Pattern /^[a-z0-9-]+$/

mod_rewrite나 pretty URL을 사용해 본적이 있다면 이 정규표현식을 사용하게 될 것입니다. 시작 문자열인 ^가 처음에 나오고 뒤이어 소문자, 숫자, 하이픈(-)이 한개 또는 한개이상(+기호)나오고 마지막으로 문자열의 끝인 $가 나옵니다.

Match되는 스트링 : my-title-here
Match되지 않는 문자열 : my_title_here   (언더스코어( _ ) 가 포함되어 있음)

Matching an Email

C-like

1 2 3

// Pattern /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

문자열의 시작인 ^로 시작하고 첫번째 그룹(괄호 안)에서 1개 또는 그 이상의 소문자, 숫자, 언더스코어( _ ), 점(.), 하이픈(-)가 나옵니다. escape하지 않은 점(.)은 다른  문자를 의미하기 때문에 점(.)은 이스케이프 해줍니다.(\.) 그 뒤에 앳 기호(@)가 나오고 그 다음 1개또는 그 이상의 소문자, 숫자, 언더스코어( _ ), 점(.), 하이픈(-)으로 구성된 도메인명이 옵고 그 후 점(이스케이프된)이 소문자와 점으로 된 2~6개의 문자열이 옵니다. 2~6개로 한 이유는 .co.kr이나 .ny.us같은 국가 TLD(Top-Level-Domain)때문이며 마지막으로 문자열의 끝($)인 옵니다.

Match되는 스트링 : john@doe.com
Match되지 않는 문자열 : john@doe.something   (TLS가 너무 김)

Matching a URL

C-like

1 2	// Pattern /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w_\.-]*)*\/?$/

이 정규표현식은 위에 나온 정규표현식의 최종본이라고 할 수 있습니다.

첫번째 그룹은 모두 옵션인데 이것은 URL이 "http://"나 "https://" 또는 둘다 없이 시작하도록 한다. s뒤에 물음표(?)는 URL이 http와 https를 모두 허용한다. 이 그룹전체를 선택사항으로 하기 위해서 뒤에 물음표(?)를 추가했습니다.

다음은 도메인명으로 한개이상의 숫자, 문자열, 점(.), 하이픈(-)뒤에 또다른 점(.)이 오고 그 뒤에 2~6개의 문자와 점이 옵니다. 이어지는 부분을 추가적인 파일과 디텍토리에 대한 부분으로 이 그룹에서는 갯수에 관계없이 슬래쉬(/), 문자, 숫자, 언더스코어(_), 스페이스, 점(.), 하이픈(-)이 나올 수 있으며 이 그룹은 많은 수의 디렉토리와 파일과 매치됩니다. 물음표(?)대신 별표(*)를 사용한 것은 별표는 0 또는 1이 아닌 0 또는 1개이상을 의미하기 때문입니다. 만약 물음표(?)를 사용했다면 오직 한개의 파일/디렉토리만 매치될 수 있었을 것입니다.

그 뒤에 슬래시(/) 매치되지만 이것은 선택사항이며 마지막으로 문자열의 끝($)이 나타납니다.

Match되는 스트링 : http://net.tutsplus.com/about
Match되지 않는 문자열 : http://google.com/some/file!.html    (느낌표가 포함되어 있음)

Matching an IP Address

C-like

1 2 3

// Pattern /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

자, 저는 거짓말을 하지 않습니다. 이 정규표현식은 제가(Vasili) 작성하지 않았고 이곳에서 가져왔습니다.

정규식이 첫번째로 잡아낸 그룹은 실제로 매치된(captured)된 그룹이 아닙니다. 왜냐하면 ?: 가 그안에 위치하고 있기 때문입니다. ?:는 파서가 이 그룹을 잡아내지 않도록 합니다. 또한 이 잡히지 않는 그룹은 3번 반복되기를 원합니다.(그룹의 끝에 {3}) 이 그룹은 또다른 서브그룹과 점(.)을 담고 있고 파서는 점(.)이 뒤에 있는 서브그룹을 매치하려고 찾습니다.

서브그룹은 또다른 잡히지 않는(non-captured) 그룹입니다. 이것은 0~5가 뒤에 오는 "25"거나 0~4와 모든 숫자가 뒤에 오는 "2"이거나 옵션이 0 또는 2개의 숫자가 이어지는 숫자들의 문자셋의 묶음입니다.

이 3가지가 매치된 이후에 다음 캡쳐되지 않는 그룹으로 들어갑니다. 이것은 0~5가 이어지는 "25" 또는 0~4와 함께 오는 "2" 그리고 마지막에 다른 숫자(0이나 두자리 숫자)가 옵니다.

마지막 문자($)와 함께 이 복잡한 정규표현식이 끝납니다.

Match되는 스트링 : 73.60.124.136
Match되지 않는 문자열 : 256.60.124.136    (첫번째 숫자는 250~255이어야 함)

Matching an HTML Tag

C-like

1 2	// Pattern /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/

이 포스팅에서 가장 유용한 정규표현식 중의 하나입니다. 이것은 어떤 HTML태그도 매치할 수 있고 일반적으로 라인의 첫번째에서 시작합니다.

첫번째로 오는 것은 태그이름입니다. 이것은 반드시 한개이상의 문자가 되어야 하며 첫번째로 잡히는 그룹이기도 합니다. 이것은 닫는태그를 잡았을 때 찾아야 할 값입니다. 다음에는 태그의 속성입니다. 이것은 >를 제외한 어떤 문자도 올 수 있습니다. 옵션사항이지만 1개이상의 캐릭터와 매치되기를 원하기 때문에 별표가 사용되었습니다. 플러스기호는 속성과 값을 이루고 별표는 원하는 만큼의 속성(attribute)가 매치될 수 있도록 합니다.

다음으로 세번째 non-capture그룹이 오는데 내부에 >기호가 담길 것이고 컨텐츠부분과 닫는태그가 있습니다.(공백과 슬래시(/), > 기호) 첫옵션은 문자들에 이어지는 >기호를 찾습니다. \1은 캡쳐된 첫번째 그룹에서의 내용을 표현하는데 사용됩니다. 이 경우에는 태그의 이름이 됩니다. 이제 태그이름이 매치되지 않으면 자신의 닫는태그를 찾기를 원합니다. 이것은 "/>"가 이어지는 한개이상의 공백이 필요합니다.

Match되는 스트링 : <a href="http://net.tutsplus.com/">Nettuts+</a>
Match되지 않는 문자열 : <img src="img.jpg" alt="My image>" />    (속성은 >기호를 가질 수 없음)

내용은 아주 좋은데 급하게 작성했더니 번역이 영 그렇네요. 원문가서 보시길....(은근슬쩍 급하게 해서 번역이 이런 척... ㄷㄷㄷ)

[JS]Live Validation 라이브러리 테스트..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

LiveValidation은 어찌보면 웹페이지를 만들때 꽤 짜증나는 작업중의 하나인 엘리먼트의 값을 체크하는 밸리데이션 작업을 자바스크립트 라이브러리로 만든 것이다.

요즘 자주 가는 파이어준님의 블로그에서 얼마전에 발견하고 실제로 써먹을만 한지를 벼르다가 지난주말에 테스트를 해보았다.(언어별로 파이어준님 같은 블로그 몇개만 있어두 진짜 대박일텐데....)

어쨌든 요즘의 추세로 보아 Submit버튼을 눌렀을 때 alert창을 통해서 밸리데이션과정을 거치는 것은 유저에게 꽤나 불편한 인터페이스였고 피드백도 불편했는데 라이브밸리데이션은 값을 입력할 때마다 바로바로 피드백을 주기때문에 꽤나 관심이 갔다.

과연 쓰기가 편할 것인가? 얼마나 기능을 지원할 것인가? 과연 한글은 될것인가 하는 고민을 가진채 테스트에 들어갔다.

처음 봤을때는 1.0버전이었는데 어느새 1.2버전이 되었다. 더군다나 prototype.js용 버전도 제공하는 것은 반가운 일이 아닐 수 없다. ㅎ

어쨌든 기대는 전혀 하지 마시고 테스트 페이지!!  클릭!!
뭐 대충 돌아가는게 저렇다... 기능을 볼라구 한거라서 딱히 디자인은 하지 않았다. 포스팅할라구 좀 이쁘게 해볼라다가 영 귀찮아서 그냥....

앞에 한글로 써놓지 않은 건 그냥 빈 input이다. 테스트로 넣다보니 그냥 넣어봤다. 에러메시지도 한글로 내맘대로 띄울수 있고 조건 다야하게 줄수 있고 입력하고 나서 바로바로 피드백해주고 submit버튼누르면 자동으로 밸리데이션 통과 안해준거를 표시해서 submit을 실행안시칸다.

자세한 내용은 라이브밸리데이션의 API 도큐먼트를 보면 된다. 영어라서 좀 압박이 있지만 약간만 만져보면 그닥 어렵지 않고 같은 패턴이 계속 반복되기 때문에 이해하기가 어렵지 않다. 사용법도 편하고. 예제소스랑 같이 비교해 보면서 해보면 금새 라이브밸리데이션의 동작을 이해할 수 있다.

머 상단에

<script src="livevalidation_standalone.js" type="text/javascript"></script>

라이브밸리데이션파일 인클루드 시키는 건 당연한 얘기고... 이렇게만 하면 일단 라이브밸리데이션을 사용하기 위한 준비는 끝이 났다. css가 있긴 하지만.. ㅎㅎ 이하소스는 모두 테스트파일에서 사용한 소스이다. 직접 소스보기를 하면 다 볼 수 있다.

JavaScript

// "헬로"라고만 입력받는 인풋
<script type="text/javascript">
    var validate = new LiveValidation('Text1', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Presence, {failureMessage: "필수 입력이야!"});
    validate.add(Validate.Format, {pattern: /^헬로$/i, failureMessage: "\"헬로\"라구 써줘" } );
</script>

원하는 위치에 위와같은 소스를 입력하면 된다. (유일하게 안좋은 점이라면 <input>태그 옆에 바로 자바스크립트가 들어가기 때문에 좀 지저분해 진다는 정도?) 저 소스는 에러메시지를 표시할 곳에 써주어야 한다.

대부분의 소스는 비슷한 형태를 띄우고 있다.

var validate = new LiveValidation('Text1', { validMessage: 'ㅇㅋ!', wait: 500});

위의 소스로 밸리데이션 객체를 만든다. validate의 이름은 뭐 개발자 맘대로이고 이걸 LIveValidation객체로 만들어 낸다. 그리고 첫번째 아규먼트로 체크할 인풋의 id를 준다. 두번째 아규먼트는 옵션인데 validMessage는 통과했을때 띄워줄 메시지이고 wait는 입력받고 500밀리세컨뒤에 표시해 준다. 두번째 아규먼트를 안주면 "Thanyou!"라는 메시지가 즉시 뜬다.

validate.add(Validate.Presence, {failureMessage: "필수 입력이야!"});

객체를 만든뒤 필요한 조건을 add로 추가하는 형태이다.(validate와 Validate는 물론 다르다.) Validate.Presence는 필수입력값이다. 이 조건을 넣으면 무조건 값을 입력받아야하고 아규먼트로(옵션) failureMessage를 주면 필수입력을 안받았을 경우에 띄워준다.

validate.add(Validate.Format, {pattern: /^헬로$/i, failureMessage: "\"헬로\"라구 써줘" } );

똑같은 형태로 조건을 추가한다. 이번엔 Format으로 정규식으로 패턴을 입력받았다. 포맷 패턴을 정규식으로 받기 때문에 활용도가 아주 막강하다. 여기선 간단히 했지만 정규식만 잘 사용하면 주민번호, 전화번호 등 다양한 값의 형식을 강제할 수 있다.

JavaScript

// 숫자만 입력받을 때
<script type="text/javascript">
    var validate = new LiveValidation('Text3', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Numericality, { minimum: 100, maximum: 2000, onlyInteger: true, tooLowMessage : "100보다 커!", tooHighMessage : "2000보다 작고", notAnIntegerMessage :"정수만"   } );
</script>

방식은 동일하다. 숫자일 경우에는 Validate.Numericality를 이요한다. minimum은 최소값이고 maximum은 최고값이다.(계속 봐서 알겠지만 보통 {}안에 들어간 값은 옵션값이라서 안주어두 상관없다.) onlyInteger를 true로 주면 정수값만 입력받고 tooLowMessage는 minimum보다 작을때 tooHighMessage는 maximum보다 클때의 에러메시지이고 notAnIntergerMessage는 정수가 아닐때의 에러메시지를 정해주는 것이다.

JavaScript

// 길이 제한 할 때
<script type="text/javascript">
    var validate = new LiveValidation('Text4', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Length, { maximum: 10, tooLongMessage : "최대 10" } );
</script>

 

계속해서 보듯이 같은 변수명으로 계속 객체를 만들어서 사용해도 아무런 문제가 생기지 않는다. 길이는 기본적으론 <input>에서 제한해 줄수 있기는 하지만 에러메시지를 띄워주는 것이 더 좋다구 생각한다. 길이는 Validate.Length를 이용한다. maximum은 최대 길이값이고 tooLongMessage는 최대값보다 많이 입력되었을 때의 에러메시지이다.

 

JavaScript

// 이메일 입력받을 때
<script type="text/javascript">
    var validate = new LiveValidation('Text5', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Email, { failureMessage : "이메일 양식 아님" } );
</script>

 

이메일을 위한 메서드도 제공하고 있다. Validate.Email을 이용하며 물론 실메일을 확인하는 건 아니고 양식만 확인해 준다. a@a.com나 메일@naver.com 등은 통과되고 메일@네이버.com은 통과되지 못한다. 복잡하고 귀찮은 메일체크를 아주 간단하게 해준다.

 

JavaScript

// 비밀번호 재입력 체크하기
<script type="text/javascript">
    var validate = new LiveValidation('pass2', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Presence);
    validate.add(Validate.Confirmation, { match: 'pass1', failureMessage : "패스워드 잘못 입력" } );
</script>

 

회원가입시에 항상 사용하는 비밀번호 재입력 확인하는 부분이다. 위에 했든이 Presence는 필수입력 여부이고 비밀번호를 재입력 받을때는 보통 <input>태그가 pass1, pass2처럼 2개가 있으므로 실시간으로 체크하는 라이브밸리데이션의 경우는 처음 객체생성할때 아래쪽에 있는 <input password>에 체크를 걸어주어야 한다.(아니면 첫 패스워드 입력할때 에러메시지가 계속 떠있으니까....)

비밀번호 체크는 Validate.Confirmation을 이용해서 match아규먼트로 첫 <input password>에 걸어주어서 두 값이 같은지를 비교한다.

 

JavaScript

// 약관동의 체크박스
<script type="text/javascript">
    var validate = new LiveValidation('Checkbox5', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Acceptance , { failureMessage : "약관에 동의하세요!!" } );
</script>

 

필수로 입력받는 약관 체크박스 사용이다. 필수체크이지만 Presence는 사용하지 않으며 대신에 Validate.Acceptance를 이용하면 자동으로 해당 체크박스가 반드시 체크되도록 확인한다.

테스트박스에는 만들어 놓기는 했지만 여러개의 체크박스와 라디오버튼에 대한 밸리데이션을 위한 메서드는 제공하지 않고 있다. 아마 다양한 환경이기 때문에 굳이 추가하지 않은듯 하다. 이부분만은 따로 스크립트를 작성해서 해결해야 할듯하다.


아직 자바스크립트도 다 모르는 와중에 대충 쓸만한지 어렵사리 확인해 봤는데 비교적 쓸만하다고 생각한다. 이정도면 실사이트에서도 바로 사용할 수 있을것 같다. 나같은 범인들에게는 이런 유용한 라이브러리는 참으로 행복한 일이다. 라이브러리를 쓴다고 자바스크립트를 고급까지 알지 않아도 된다는 것은 아니지만 좋은 기능을 쉽게 적용할 수 있다는 것은 행복한 일이다.

덧1) css를 적용하지 않으면 테스트페이지처럼 색이 적용되어서 나오지 않는다. 라이브밸리데이션 페이지에서 제공하는 css를 그대로 적용했는데 원한다면 css만 수정하면 원하는 색으로 출력해 줄수 있을 것이다.

덧2) 내 수준이 초급 수준이라 이런 소스의 설명을 한다는게 상당히 압박감이 있었다. 라이브러리소스를 설명한 건 아니지만..... 혹 잘못된 내용이 있으면 언제라도 덧글을 달아주시면 감사~