자바스크립트 정규식 표현

2011-07-26

javascript

자바스크립트 정규식 표현

정규 표현식 해부
정규 표현식을 생성하는 것은 일종의 하나의 문자열을 생성하는것과 비슷한데
다른점이 있다면 정규 표현식은 큰따옴표나 작은 따옴표 대신 슬래시(//) 내부에 위치한다는 것 입니다
ex )
/ + 표현식 + /<- 두 개의 슬래시는 정규 표현식을 둘러싸는 데 사용됩니다.
표현식 내부에서 메타문자로 알려진 특정한 기호들의 묶음이 묘사적인
텍스트 패턴을 생성하기 위해 숫자와 문자를 조합해서 사용됩니다.
좋은소식은 이것이 실질적인 정규 표현식을 생성하기 위해서 정규 표현식 “언어”에
대한 뉘앙스까지는 알 필요가 없다는 점입니다.

1 . .(콤마) : newline이외의 어떤 문자와도 일치합니다.
2 . \d(역슬래시 d) : 어떤 숫자가 와도 일치합니다.
3 . \w(역슬래시 w) : 문자와 숫자가 결합된 어떤 문자가 와도 일치합니다.
4 . \s(역슬래시 s) : 공백문자와 일치합니다<-(공백문자는 공백, 탭, 줄바꿈, 그리고 리턴키(Enter)값을 포함)
5 . ^ : 이문자는 패턴의 시작을 알립니다<- 이 문자만이 패턴의 앞에 올수 있습니다.
6 . $ : 이 문자는 패턴의 끝을 알립니다.<- 문자열에서 패턴의 마지막 문자는 반드시 이 문자로 끝나야함

메타 문자들은 하나 이상의 리터럴 문자를 표현합니다
단일 문자와 일치시키는 정규 표현식에서 사용 가능한 몇 가지 다른 방법들이 있습니다.

ex )

우편번호 ###-###형태를 가진 대한민국식 우편번호에 맞는 정규 표현식

1	/^\d\d\d-\d\d\d$/

정규 표현식은 슬래시로 시작되며 패턴의 맨 앞은 ^ 문자가 와야하며 3자리의 \d로서 숫자일치하여하한다
- 은 단지 우편번호에 있는 숫자들을 분리하는 역할 외엔 특별한 의미는 없으며
패턴의 맨 끝은 $ 가 와야 한다 그리고 또다른 슬러시를 사용하여 정규 표현식을 끝냄

수량 한정자
메타문자가 아닌 임의의 텍스트는 정규 표현식에 나와 있는 그래도의 문자열과 매치되는데,
/howard/는 문자열 일부에 “howard”란 텍스트가 있는 문자열과 매치됩니다. 그리고 좀 더
다른의미로 패턴을 재정의 하는 수량 한정자(Quantifier)라 불리는 다른 형태로 정규 표현식을
구성하는 것이 있습니다. 수량 한정자는 정규 표현식 내부에서 선행하는 하위 패턴에
적용되며, 하나의 하위 패턴ㅣ 해당 패턴에서 몇 번이나 나타나는지를 제어합니다.

1 . * : 선행 하위 패턴은 0번 혹은 그 이상 나타나야 합니다<- 하위패턴은 선택적이며 여러번 나올수있다.
2 . + : 선행 하위 패턴은 1번 혹은 그이상 나타나야 합니다<- 하위패턴 반드시 필요 여러번 나올수 있다.
3 . ? : 선행 하위 패턴은 0 혹은 1번만 나타나야 합니다.<- 하위패턴은 선택적이지만 한번만 나올수 있다.
4 . { n } : 선행 하위 패턴은 정확히 n번 나타나야 합니다.<-하위 패턴이 얼마나 많이 나타날수 있는지 제어
5 . () : 그룹 문자는 메타문자와 함께 혹은 단일로 하위 패턴을 구성합니다

수량 한정자는 메타문자 홀로 있는 정규 표현식보다는 훨씬 더 명확하게 정규표현 식을
작성합니다. 하위 패턴을 명시적으로 반복하는 대신, 수량 한정자는 하위 패턴이 몇 번 나와야
하는지 그 횟수를 정확히 명시할 수 있습니다

ex )
우편번호 ###-###형태를 가진 대한민국식 우편번호에 맞는 정규 표현식

1	/^\d\d\d-\d\d\d$/

이것을 수량한정자로 바꾸어 말하면
/^\d{3}-\d{3}$/ 로 {}수량 한정자의 도움을 받으면 더 이상 각 자리 수를 일일이 나열할 필요가 없습니다
아주 창조적인 메타문자와 반복 연산자를 사용하여 문자열에서 나타날 수 있는
그 어떤 문자에 관한 것이라도 일치시킬 수 있는 아주 강력한 정규 표현식을 생성할수있습니다

ex )
/\w*/ : 빈 문자열을 포함해서 어떤 문자나 숫자와도 일치
/.+/ : 임의의 문자가 한번 혹은 그이상 나타나야 하는데… 비어있지 않은 문자열 이라면 그어떤것과도 일치.
/(Hot)? Donuts/ : “Donuts”와 “Hot Donuts”둘 모두 일치합니다.

ex ) 날짜형식에 대한 정규식 표현 방법

function validateNonEmpty(inputField, helpText){
    //아무값이 입력되지 않았을때 리턴하는 function
    if(inputField.value.length == 0){
        //alert("입력해주세요");
        if(helpText != null) {
            helpText.innerHTML = "입력해 주세요 !!";
            return false;
        } else {
            if(helpText != null)
            helpText.innerHTML = "";
            return true;
        }
    }
}
function validateRegEx(regex, inputStr, helpText, helpMessage) {
    //inputStr변수에 데이터가 문제가 없는지 체크
    if(!regex.test(inputStr)){
        //데이터가 문제가 있다면 도움말 메시지를 설정하고 false를 반환
        if(helpText != null) {
            helpText.innerHTML = helpMessage;
            return false;
        } else {//데이터 체크에 이상이 없다면 도움말 메세지는 지워진다 .
            if(helpText != null)
            helpText.innerHTML = "";
            return true;
        }
    }
}
function validateDate(inputField, helpText){
    //날짜형식을 HTML의 Input에서 입력받아
    //적합한지 유효 체크
    //먼저 입력 값에 데이터가 있는지 체크
    if(!validateNonEmpty(inputField, helpText)) {
        return false;
        return validateRegEx(/^\d{4}-\d{2}-\d{2}$/,inputField.value,helpText,
        "형식이 맞지 않습니다 ex ) 2011-01-01");
        //매개변수로 정규식에대한 값이 맞는지 보낸다 적합하면 true 아니면 false리턴
    }
}

최소와 최대값 일치시키기

{} 수량 한정자는 문자열에서 하위 패턴이 얼마나 많이 나타나는지를
결정하는데 사용됩니다 . 두 자리 수를 가진 이러한 수량 한정자의 또
다른 버전이 있는데, 이는 하위 패턴이 나타나는 최소와 퇴대 횟수를 명시합니다.
이는 하위 패턴의 풀현 횟수를 다듬는 데 있어 매우 편리한 방법을 제공하고 있습니다.

- { min, Max } :
하위 패턴은 최소한 min 번 나타나거나 , 최대 Max번 이상 나타날수 없습니다
하위 패턴이 최소와 최대 범위 사이에서 몇 번 나타날 수 있는지를 제어합니다

Ex )
/^\w{5, 8}$/ <- 일부 패스워드는 5자리에서 8자리까지의 문자와 숫자가 섞이는
것을 허용하는데 , 이는 min/max{}수량 한정자의 완벽한 예라고 할 수 있습니다.

this를 사용해서 세자리 년도 제거하기

정규 표현식 공구박스에 있는 또 다른 매우 유용한 메타문자는 일종의 메타문자의
대용품인데 , 자바스크립트에서 사용하는 논리 OR 연산자와 매우 비슷한 모양을 하고 있습니다.
자바스크립트 OR 연산자와는 달리 이 대안 메타문자는 오직 하나의 수직바인 | 만
갖고 있는데 대체 하위 패턴의 리스트를 명시하는 데 있어 오직 하나의 패턴만 허용합니다.
다시말해서 대한 하위 패턴이 하나라도 일치한다면 해당 패턴이 성공적으로 일피한다는
것을 의미합니다. 이는 기본적으로 이것 아니면 저것 이라고 표현할수 있기 때문에 논리
OR 연산자와 많은 면에서 흡사합니다.

this / that :
this 하위 패턴 혹은 that하위 패턴이 일치하면 전체 패턴은 일치합니다
대체문자는 대안적인 매치를 명시하기 위한 간편한 방법을 제공합니다.

Ex )
/(red | blue) pill/<- 둘중의 하나릉 선택하는 것이며 이 패턴은 “red pill” 과 “blue pill” 두가지 모두 일치

ex )날짜형식 2011-01-01 or 11-01-01

function validateNonEmpty(inputField, helpText){
    //아무값이 입력되지 않았을때 리턴하는 function
    if(inputField.value.length == 0){
        //alert("입력해주세요");
        if(helpText != null) {
            helpText.innerHTML = "입력해 주세요 !!";
            return false;
        } else {
            if(helpText != null)
            helpText.innerHTML = "";
            return true;
        }
    }
}

function validateRegEx(regex, inputStr, helpText, helpMessage) {
    //inputStr변수에 데이터가 문제가 없는지 체크
    if(!regex.test(inputStr)){
        //데이터가 문제가 있다면 도움말 메시지를 설정하고 false를 반환
        if(helpText != null) {
            helpText.innerHTML = helpMessage;
            return false;
        } else {//데이터 체크에 이상이 없다면 도움말 메세지는 지워진다 .
            if(helpText != null)
            helpText.innerHTML = "";
            return true;
        }
    }
}

function validateDate(inputField, helpText){
    //날짜형식을 HTML의 Input에서 입력받아
    //적합한지 유효 체크
    //먼저 입력 값에 데이터가 있는지 체크
    if(!validateNonEmpty(inputField, helpText)) {
        return validateRegEx(/^\d{2}|\d{4}-\d{2}-\d{2}$/,inputField.value,helpText,"형식이 맞지 않습니다 ex ) 2011-01-01");
        //매개변수로 정규식에대한 값이 맞는지 보낸다 적합하면 true 아니면 false리턴
    }
}

집합적으로 선택적인 문자들 일치시키기

이메일 주소 패턴의 직접적인 영향을 주는 아주 간편한 또다른 정규적인 특징이 있는데
바로 문자 클래스 가 그것입니다. 문자 클래스는 하나의 패턴 내부에 있는 하위 패턴들을
엄격히 제어하는데 사용됩니다. 좀 더 자세히 말하면 문자 클래스는 선택적인 문자들이
하위 패턴에서 중요한 역할을 수행하는 규칙을 확립하는데 매우 도움이 됩니다.
문자 클래스를 단일 문자를 일치시키기 위한 규칙의 집합으로 생각해 보세요.

[문자 클래스] :

문자 클래스는 단일 문자를 매칭하기 위한 정규 표현식 규칙의 집합을 말합니다.
문자클래스는 항상 각 괄호로 둘러싸여 있습니다.

문자 클래스 내에 있는 모든 문자 리스트는 메타문자들이 하위 패턴들의
리스트에 대해 대처되는 방법과 같은 방식으로 문자 매칭을 위해 사용됩니다.
하지만 문자 클래스에 수량 연산자가 사용되지 않으면 문자 클래스의 결과는
항상 단일 문자에 대해서만 일치합니다. 여기에 있는 몇 가지 예가 문자
클래스의 사용에 대한 이해를 도와 줄 것입니다.

ex )
/d[iu]g/<- “dig” OR “dug” 두 문자 모두 패턴과 일치합니다.
/\$\d[\d\.]*/<- “$5” OR “$3.50” OR “$19.95” 여기 있는 모든 문자들이 패턴과 일치합니다.

이메일 검증기 만들기
이제 이메일 아이디와 도메인 이름에서 나타날 수 있는 모든 선택적인 문자들을
이메일 주소를 구성하는 요소로 고려함으로써 이메일 주소에 대한
훨씬더 강력한 패턴을 만드는 것이 가능해졌습니다.

패턴 = LocalName@DomainPrefix.DomainSuffix
1 . LocalName : .,-,_,그리고 + 와 같은 문자나 숫자 포함
2 . DomainPrefix : -와 같은 문자나 숫자
3 . “.” : 마침표는 도메인 이름접미사로 취급됨
4 . DomainSuffix : 마침표 다음에 2, 3, 혹은 4자리 문자나 숫자

ex )

function validateEmail(inputField, helpText) {
    //먼저 입력값에 데이터가 있는지 체크
    if(!validateNonEmpty(inputField, helpText)){
        return false;
    }
    return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/,inputField.value,helpText," 형식이 맞지 않습니다.");
    //.,-_그리고 +와 같은 숫자나 문자를 포함한다 그다음 @ 로 다음을 비교 모든 문자나 숫자가 -포함한
    //문자열이나 숫자열이 포함된다 그다음 . 이후에 문자나 숫자열이 2자리위와 4자리 아래로 포함된다.
}

function validateRegEx(regex, inputStr, helpText, helpMessage) {
    //inputStr변수에 데이터가 문제가 없는지 체크
    if(!regex.test(inputStr)){
        //데이터가 문제가 있다면 도움말 메시지를 설정하고 false를 반환
        if(helpText != null) {
            helpText.innerHTML = helpMessage;
            return false;
        } else {//데이터 체크에 이상이 없다면 도움말 메세지는 지워진다 .
        if(helpText != null) {
            helpText.innerHTML = "";
            return true;
        }
    }
}

function validateNonEmpty(inputField, helpText){
    if(inputField.value.length == 0){
        //alert("입력해주세요");
        if(helpText != null) {
            helpText.innerHTML = "입력해 주세요 !!";
            return false;
        }else{
            if(helpText != null) {
                helpText.innerHTML = "";
            }
            return true;
        }
    }
}

<div class="field">
Enter your email address:
<input id="email" name="email" type="text" size="32"
-nblur="validateEmail(this, document.getElementById('email_help'))" /><span id="email_help" class="help"></span></div>

Programmingjavascript

자바스크립트 정규식 표현

최소와 최대값 일치시키기

this를 사용해서 세자리 년도 제거하기

집합적으로 선택적인 문자들 일치시키기

[문자 클래스] :