카군입니다.
오늘은 정규식에 대해 다뤄봤습니다.
이유이니 즉슨 jquery UI 로 시간을 입력 받게 해놓다가 사용자의 입력이 필요할 수도 있다고 해서 시작 했습니다.
혹시.. 사용자가 제대로 입력 하지 않으면 어쩌지??
그래서 input 창에 있는 문자열의 패턴을 검증 하기 위해 알아 봤습니다.
String 문을 검색 하거나 치환, 추출 예를 들어 전화번호 형식이나 주민번호 검증 할때 주로 쓸수도 있겟군요
처음 정규식을 찾을땐 자바, 오라클, 자바스크립트 에 대한 정규식이 한꺼번에 나와 햇갈리고,,
지금도 햇갈리고,,,
하도 자료를 모으다 보니 엉키고 또 엉켜 이게 자바인지... 자바스크립트인지 ...
우선 문제를 제기한 패턴은 00:00 (분:초) 입니다. 저런 형식의 패턴을 검색해보겠습니다.
그전에 어떤 식들이 있는지 찾아보죠
^ : 첫부분 매칭에 적용
$ : 끝부분 매칭에 적용
[] : 문자열 ex) [0-9] 는 0~9까지 숫자 [A-Z] 는 A 부터 Z 까지(소문자 X)
* : 0번 이상 반복
+ : 1번 이상 반복
? : 0 또는 1회
{} : 횟수 표시
\d : 숫자, [0-9]와 같음
\D : 숫자가 아닌 것들 [^0-9]와 같음
| : Or의 뜻
이건 뭐죠 ㅎㅎㅎㅎㅎ
이것을 var reg = /rules/옵션 으로 써줍니다.
예를 들어 첫글자가 숫자로 시작하는 패턴을 만들어보죠
/^[0-9]/ 참 쉽죠?
하지만 도중에 \d 라는 높이 더 좋아 보이니까 /^[\d]/ 라고 하는게 좋겠네요
^ 는 첫부분 매칭이니까요
만약 /[\d]$/ 라고 했으면 마지막 문자가 숫자로 끝났어야 합니다.
해서 00:00 의 패턴을 만들어 보죠
우선 분을 가르키는 위에 00 입니다.
var re = /^\d\d/ 이렇게 하면 시작부터 순서대로 숫자숫자의 식이 만들어 집니다.
다음 콜론 : 이녀석을 한참 고민 했습니다. 하지만 고민한게 바보 스러울 정도로 걍 써주면 문자로 인식한다는;;;
해서 /^\d\d:/ 까지 00: 이 나왔습니다.
문제는 이겁니다. 초는 59가 최대 입니다. 즉 다음 숫자는 0~5 까지 하나와 0~9까지 숫자가 필요합니다.
\d 는 0~9 까지 랬으니 이건 못쓰겟네요 초부분의 00 은 [0-5]\d 로 합니다.
해서 나온 식은!
/^\d\d:[0-5]\d/ 마지막에 $를 안붙인 이유는 뒤로 몇개 더 생길지도 모르거든요.
저게 맞는지 ... http://regexr.com/ 이 사이트에 가셔서 정규식 써보고 밑에 테스트 문구가 맞는지 알수 있습니다.
식에 ^ 를 안붙여준 이유는 여러 가지를 테스트 한걸 보여 드리고 싶어서 입니다.
파랑 부분이 매치된 것이고 매치가 안되면 반응이 없죠 ㅎㅎ
저도 정규식 짜다가 발견 한 사이트인데 .. 만들어주진 않지만 테스트로 제격입니다.
정규식이란 말이 긴 식을 줄여 주는 느낌이니 제 식도 줄여보죠
{} 의 설명이 횟수를 표현 한다고 했습니다.
첫 00 이 숫자 두번이니 /^\d{2}:[0-5]\d/ 하면 첫시작부터 숫자 두번 반복 그리고 : 5까지한번 숫자
뭐 해도 되는지 필요없는지 모르지만 앞에놈 횟수를 붙였으니 뒤에놈도 하죠
/^\d{2}:[0-5]{1}\d{1}/ 줄이려다 ;; 더 늘어 났네요 ;;; 뭐 이것도 근데 식은 맞는데 더 알아보기 쉬워졌다는 장점이 있네요 저는 심화로 정규식을 다룰 필요는 아직 없어서 저 간단한 패턴만 가지고 정규식을 짜봤습니다.
더 심화 과정은 개발을 하다 필요하게 되면 공부해서 다시 포스팅 하도록 하겠습니다.
그럼 이만
'JQUERY' 카테고리의 다른 글
| 유투브 같은 웹플레이어 만들기 jPlayer (0) | 2015.06.03 |
|---|---|
| jquery 에서 undefined 체크 (0) | 2015.05.13 |
| jquery에서 load 함수 쓰는방법 - html include (0) | 2015.05.08 |
| radio 버튼 체크유무 (0) | 2015.04.16 |
| jquery 암호체크 루틴 (0) | 2015.04.01 |
