[JAVASCRIPT] 정규식

모든 공백 체크 정규식

var regExp = /\s/g;

숫자만 체크 정규식

var regExp = /^[0-9]+$/;

이메일 체크 정규식

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

핸드폰번호 정규식

var regExp = /^\d{3}-\d{3,4}-\d{4}$/;

일반 전화번호 정규식

var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;

아이디나 비밀번호 정규식 

var regExp = /^[a-z0-9_]{4,20}$/;

휴대폰번호 체크 정규식 

var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;

##############  정규표현식

1. 확장문자 (: backslash)

    - s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)

    - b : 단어의 경계

    - B 이를 제외한 모든 문자 매칭

    - d : 숫자

    - D : 숫자가 아닌 문자 [^0-9] 와 동일

    - w : 알파벳, 숫자로 된 문자, 밑줄 기호(_) [A-Za-z0-9]

    - W : w의 반대 문자 [^A-Za-z0-9]

    - 특수문자 : 특수문자 자체를 의미 예) + (+ 기호 자체)

 

2. 특수문자

    - * : 0회 이상 반복

    - + : 1회 이상 반복

    - ? : 0 또는 1개의 문자 매칭

    - . : 정확히 1개 문자 매칭

 

3. 플래그

    - g : 전역매칭

    - i : 대소문자 무시

    - m : 여러 줄 매칭

 

4. 기타

    - () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.

    - $1,...,$9 : 괄호로 갭처한 부분 문자열이 저장 됨.

    - | : ~또는~

    - {} : 반복 횟수

##############  간단한 정규 표현식

var re = /a/         --a 가 있는 문자열

var re = /a/i        --a 가 있는 문자열, 대소문자 구분 안함

var re = /apple/    -- apple가 있는 문자열

var re = /[a-z]/    -- a~z 사이의 모든 문자

var re = /[a-zA-Z0-9]/    -- a~z, A~Z 0~9 사이의 모든 문자

var re = /[a-z]|[0-9]/  -- a~z 혹은 0~9사이의 문자

var re = /a|b|c/   --  a 혹은 b 혹은 c인 문자

var re = /[^a-z]/  -- a~z까지의 문자가 아닌 문자("^" 부정)

var re = /^[a-z]/  -- 문자의 처음이 a~z로 시작되는 문장

var re = /[a-z]$/  -- 문자가 a~z로 끝남

상기에 정의된 간단한 표현식을 아래에 넣어 직접 해 보시기 바랍니다.

var str = "sample string";

re.test(str)?"true":"false";

* 특수문자('''', ''^'', ''$'', ''*'', ''+'', ''?'', ''.'', ''('', '')'', ''|'', ''{'', ''}'', ''['', '']'')를 검색할 경우는 '''' 를 넣는다.

##############  간단한 응용예제

var re = /s$/;          -- 공백체크

var re = /^ss*$/;   -- 공백문자 개행문자만 입력 거절

var re = /^[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+@[-!#$%&'*+/0-9=?A-Z^_a-z{|}~]+.[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+$/; --이메일 체크

var re = /^[A-Za-z0-9]{4,10}$/ -- 비밀번호,아이디체크 영문,숫자만허용, 4~10자리

var re = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi") -- 홈페이지 체크

var re = "<[^<|>]*>";  -- 태그제거 

var re = /[<][^>]*[>]/gi;-- 태그제거 

str = str.replace(RegExpTag,""); 

var RegExpJS = "<script[^>]*>(.*?)</script>";  -- 스크립트 제거  

str = str.replace(RegExpJS,""); 

var RegExpCSS = "<style[^>]*>(.*?)";  -- 스타일 제거  

str = str.replace(RegExpCSS,""); 

var RegExpHG = "(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/)";  -- 한글 제거  

str = str.replace(RegExpHG,"");  

var RegExpDS = /<!--[^>](.*?)-->/g;   -- 주석 제거  

str6 = str.replace(RegExpDS,""); 

var regExp = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i; --이메일 체크

## 기타 응용

re = new RegExp("^@[a-zA-Z0-9]+s+","i");//문장의 처음이 @이고 문자가 1나 이상 있으면 ok

- 기타 상기와 동일하나 약간씩 다른 샘플

영숫자 조합책크

if ((new RegExp(/[^a-z|^0-9]/gi)).test(frm.loginid.value)) {

    alert("ID는 영숫자 조합만 사용하세요"); 

    frm.loginid.focus(); 

}

- 홈페이지 주소 체크

function chk(v){

str='';

re = new RegExp("^http://","i");  

re.test(v)?str='y':str='n';

alert(str);

}

- hanmail인지를 책크

function chk(v){

str='';

re = new RegExp("hanmail.net","i");  

re.test(v)?str=true:str=false;

return str

}

- 본문내에서 도메인 구하기

var patt = /(http(s)?://)?w+(.w+)+/gi;

var result = (aa.value.match(patt));

- 본문내에서 url구하기

var patt = /(http(s)?://)?w+(.w+).S*-gi;

########### 정규식 메소드 및 사용법

참조 http://eknote.tistory.com/1251

참조 http://www.javascriptkit.com/javatutors/redev3.shtml

RegExp.exec(string)

RegExp.test(string)

String.match(pattern)

String.search(pattern)

String.replace(pattern,string)

String.split(pattern)

* 특수문자 검증 및 제거

function regExp() {  

var str = "2011-12-27";

var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi

if(regExp.test(str)){

//특수문자 제거

var t = str.replace(regExp, "")

alert("특수문자를 제거했습니다. ==>" + t)

}else{

alert("정상적인 문자입니다. ==>" + str)

}

}

- 닉네임 체크 - 특문 제외 2자 ~ 20자

var pattern = /^[\w\Wㄱ-ㅎㅏ-ㅣ가-힣]{2,20}$/;

[\w]는 [A-Za-z0-9_] 이다

[\W]는 \w를 제외한 특수문자들이다.

[ㄱ-ㅎ] 은  ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ

[ㅏ-ㅣ]는 ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ

[가-힣]는 가나다라~~타파하 ~ 기니디리~ 티피히 ~ 각낙닥락 ~ 틱픽힉 ~ 깋닣딯맇 ~ 팋핗힣  이 된다.

즉 그냥 모든 문자열에 대한 {2,20} 글자 수 체크가 된다.

****

var pattern = 정규식;

var testee = "테스트 스트링";

var true_or_false = pattern.test( testee);  // 정규식 필터를 통과하면 true, 아니면 false 리턴.

다른 방법들도 있는데 나는 그냥 위와 같이 사용중이다.

아래는 내가 사용하는 정규식 몇 가지 예제..

1) 소수점 2자리 이하까지만 입력 가능

<input type="text" onkeypress="return checkDotUnder(this);" />

// 입력 항목에 숫자 및 '.' 만 입력

var dotUnderPattern = /^\d*[.]\d{2}$/;

functino checkDotUnder(obj) {

var val = $(obj).val();

var eCode = event.keyCode;

if (!((eCode > 47 && eCode < 58) || eCode == 46)) {

return false;

} else if (dotUnderPattern.test(val)) {

return false;

}

}

2) 숫자 및 x, X, P, E 만 포함한 스트링만 통과시키는 필터. 

예를 들어, 

x123 : true

XPE : true

125 : true

1234O : false

pXP : false

var pattern = /[^1234567890xXPE]/;

return !(pattern.test( testee));

3) 문자 전체에서 특수문자를 하나라도 포함하지 않아야만 함

예를 들어, 

@123 : false

12Hello5 : true

!!! : false

var pattern = /[^\w\s]/i;

return !(pattern.test( testee));

4) 다음과 같은 형식만 통과함. Q로 시작하면서, 0000~9999 까지의 숫자만 Q 뒤에 달고 있어야 함. 

즉, Q0001, Q0002, Q1234, Q9999  : true

Q00, Q194, Q1  : false

Q0001A  : false

QUESTION : false

var pattern = /^Q[0-9][0-9][0-9][0-9]$/;

return pattern.test( testee);

5) 정규식에서 g 플래그를 쓸 때 주의해야 한다. 최근에 매칭한 곳에서부터 다시 정규식 검사를 시작하는 속성이 있다.

이것때문에 다음 문제가 일어난다. 연속적으로 한 스트링에 대해 정규식 테스팅을 하면, 처음에는 필터가 잘 동작하다가 나중에는 통과하지 말아야 할 조건을 가진 스트링이 정규식 패턴을 통과했다고 나오게 된다. 구글에서 'regex g flag consecutive' 등으로 검색하면 이 문제로 매우 많은 질문과 답이 나온다. 해결 방법은.. 난 g 플래그 대신 i 플래그를 줘서 해결했다. 아래 링크도 도움이 될 것이다.

http://stackoverflow.com/questions/15610251/why-pattern-testname-opposite-results-on-consecutive-calls

http://stackoverflow.com/questions/6739136/consecutive-calls-to-regexp-test-fail-for-pattern-with-global-option

6) 문자열 양 끝에 공백문자를 없애 주는 정규식. 예를 들어 "   hi hello! "; 를 "hi hello!"; 로 바꿔 주는 코드.

(출처 : http://stackoverflow.com/questions/3000649/trim-spaces-from-start-and-end-of-string)

function trim_whitespace( str) 

{

    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

}

7) "[192.244.1.123]" 같은 string에서 안의 ip부분만 빼낸다("192.244.1.123" 을 빼내는 작업)

function main()

{

    var regex = /\[([.\d]+)]/;

    var str = "[192.244.1.123]";

    var res = regex.exec( str);

    

    // print res[1] = "192.244.1.123";

}

- 정규식 휴대폰 번호 마스킹

** 출처 : http://ironnip.tistory.com/15

- num  : '-' 문자가 들어있지않은 숫자로된 전화번호

- type : 0 을 보내면 가운데 자리 마스킹

function phoneFomatter(num,type){

var formatNum = '';

    if(num.length==11){

        if(type==0){

            formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-****-$3');

        }else{

            formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');

        }

    }else if(num.length==8){

        formatNum = num.replace(/(\d{4})(\d{4})/, '$1-$2');

    }else{

        if(num.indexOf('02')==0){

            if(type==0){

                formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-****-$3');

            }else{

                formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');

            }

        }else{

            if(type==0){

                formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-***-$3');

            }else{

                formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

            }

        }

    }

    return formatNum;

}

phoneFomatter('01000000000');   //010-0000-0000

phoneFomatter('01000000000',0); //010-****-0000

phoneFomatter('0100000000');    //010-000-0000

phoneFomatter('0100000000',0);  //010-***-0000

phoneFomatter('0200000000');    //02-0000-0000

phoneFomatter('0200000000',0);  //02-****-0000

phoneFomatter('0310000000');    //031-000-0000

phoneFomatter('0310000000',0);  //031-***-0000

phoneFomatter('16880000');      //1688-0000

// TEXTAREA 개행 표시

CLIENT -> SERVER 넘길 시 : SERVER 에서 replace("\r\n", "<br>"); 로 넣고

SERVER -> CLIENT 받을 시 : CLIENT 에서 SCRIPT 로 replace(/<br *\/?>/gi, '\r\n')

server -> client 시에는 server 에서 변경해줘도 된다. 근데 이 글을 javascript 정규식이니깐 .. 음.

// 한글, 띄어쓰기, 영문 제외 모두 삭제하기 (숫자, 특문 등..)

<input type="text" name="name_kor" onkeyup="check_name(this);" />

<input type="text" name="name_eng" onkeyup="check_name(this);" />

function check_name(obj) {

if ($(obj).attr('name').indexOf('kor') != -1) {

// 한글명 경우 특문, 숫자 삭제 ( \s 선언으로 공백도 허용 )

$(obj).val($(obj).val().replace(/[^가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z\s]/gi, ''));

} else {

// 영문명 경우 특문, 숫자, 공백 삭제

$(obj).val($(obj).val().replace(/[^a-zA-Z]/gi, ''));

}

}

또는

<input type="text" name="name_kor" onkeyup="this.value=this.value.replace(/[^가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z\s]/g, '');" />

<input type="text" name="name_eng" onkeyup="this.value=this.value.replace(/[^a-z|A-Z]/g, '');" />

** 여기서 주의 할 점은 

$('input[name="name_kor"], input[name="name_eng"]').each(function(idx, obj) {

if ($(obj).attr('name').indexOf('kor') != -1) {

$(obj).attr('onkeyup', 'this.value=this.value.replace(/[^가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z\\s]/g, "");');

} else {

$(obj).attr('onkeyup', 'this.value=this.value.replace(/[^a-zA-Z]/g, "");');

}

});

이런식으로 속성을 부여 할 시에는 공백 체크 로직에서 역슬러쉬를 2개를 넣어줘야 한다. \s 로만 넣을 시 역슬러쉬가 묻혀서 A-Zs 로 되기때문에 체크가 안됨. (html 에 직접 코딩할때는 \s, script 로 동적으로 부여할때는 \\s)

하지만, keyup 이나 keydown 만을 쓴다면 마지막에 입력한 자음의 경우 필터가 되지 않는다. name_eng 인풋박스에 ㅁㄴㅇㄹ 를 차례대로 입력 후 커서를 아웃시키면 ㄹ 이 남아있는 것을 볼 수 있다. 그런데 숫자의 경우는 정상적으로 필터가 된다. 이럴 경우, 커서가 아웃됨을 알리는 이벤트인 onblur 를 적용 시켜줘야 하는 데 아래와 같이 keyup, blur 를 모두 주면 해결이 된다.

$('input[name="name_eng"]').on('keyup blur', function() { if ($(this).val()) $(this).val($(this).val().replace(/[^a-zA-Z]/g, "")); });

** 추가 수정

위 처럼 할 시에 한글 체크의 경우 keyup 을 할 때마다 replace 가 되므로 받침이 있는 단어의 경우 정상적으로 입력이 불가능하다.

예를들면 `안녕하세요` 를 입력하고 싶지만 `아ㄴ녀ㅇ하세요` 라고 입력이 되어버린다. 한글 체크 정규식에는 위배가 되지 않지만 한글자씩 누를 때 마다 replace 가 되므로 발생하는 현상으로 보인다. 그러므로 한글 체크의 경우에는 아래와 같이 바꿔야 정상적으로 받침까지 입력이 가능하겠다. (아래 처럼 쓰지 않을 시 keypress 로도 정상적인 입력은 가능하지만 키보드를 누르고 띄었을 때는 화면에 위배되는 단어가 그대로 보이므로 깔끔하지 않다.)

<input type="text" name="name_kor" />

var korNameRuleRegExp = /^[가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z\s]+$/;

$('input[name="name_kor"]').on('keyup blur', function() {

if ($(this).val() && !korNameRuleRegExp.test($(this).val())) {

$(this).val($(this).val().replace(/[^가-힣ㄱ-ㅎㅏ-ㅣa-zA-Z\s]/g, ""));

}

});

-> 정규식에 위배될 경우에만 바꾸도록 하는 것이다.. 체크로직이 한번 들어가야 한다는 것..