정규 표현식(Regular Expression)

1. 정규 표현식

 

 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어로, 문자열 검색 / 치환 용도로 사용된다.

입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 복잡한 코드를 사용해야 하는데,

정규 표현식을 사용할 경우 매우 간단하게 문자열의 조건을 표현할 수 있다. 하지만 코드는 간단한데에 반해

정규 표현식을 짜는 데 사용되는 특수문자들의 의미를 이해하기 굉장히 난해하고 어렵다는 단점이 있다.

 

<!-- 정규 표현식 만드는 방법 -->

// 슬래쉬로 감싸는 패턴
var reg = /ab+c/;

// RegExp객체의 생성자 함수를 이용한 방법
var reg = new RegExp("ab+c");


<!-- 정규 표현식에 사용되는 메서드 -->

/정규식/.exec("문자열") //조건에 대응된다면 대응되는 부분의 정보를 배열로 반환 없다면 null

/정규식/.test("문자열") //조건에 대응된다면 true를 반환 없다면 false

"문자열".match(/정규식/||"문자열") //조건에 대응된다면 대응되는 부분의 정보를 배열로 반환 없다면 null

"문자열".search(/정규식/||"문자열") // 대응된다면 대응되는 부분의 인덱스를 반환 없다면 -1

"문자열".split(/정규식/||"문자열") // 정규식 혹은 문자열을 구분자로 이용해 문자열 배열로 나누어 반환

 

RegExp	Description
^x	문자열이 x로 시작합니다.
x$	문자열이 x로 끝납니다.
.x	'.'은 임의의 한 문자를 표현하며 임의의 한 문자로 시작해 x로 끝납니다.
(x)	괄호'()'안의 내용을 캡쳐하며, 그룹화  합니다.
\d	숫자인 값을 찾습니다.
\D	숫자가 아닌 값을 찾습니다.
\w	알파벳 + 숫자 + '_'를 찾습니다. ([a-zA-Z\d
\W	알파벳 + 숫자 + '_'를 제외한 모든 문자를 찾습니다.
[a-zA-Z]	알파벳을 찾습니다.

<표> 정규 표현식 표현방법

 

※ 정규 표현식 표현방법으로는 이 밖에도 너무나도 많아서 간단한 부분만 적어 놓았다.

 

 

 

## 자주 사용되는 정규식 ##

 

1) 암호 : /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/

2) 이메일 : /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/

3) URL : /^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/

4) HTML : /\<(/?[^\>]+)\>/

5) 전화번호 : /(\d{3}).*(\d{3}).*(\d{4})/

6) 확장자파일 : /([^\s]+(?=\.(jpg|gif|png))\.\2)/

 

※ 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

https://www.regexpal.com/

https://regexr.com/

https://regexper.com/

 

 

---

2. 제이쿼리 정규 표현식 플러그인

 

 jQuery 플러그인으로 기존의 자바스크립트를 이용해 클라이언트 측의 양식 유효성 검증을 하는 방법보다

좀 더 쉬운 방법으로 유효성 검증을 할 수 있다. 이 플러그인은 이메일 등 여러가지 검증 메서드를 내장하고 있으며,

개발자가 새로운 검증 메서드를 정의하여 사용할 수 있도록 API도 제공하고 있다.

 

<!-- 제이쿼리 정규식 플러그인 이용한 정규표현식 사용 방법 -->

$.('Form Tag').validate(); //내장된 검증방법 사용

$.('Form Tag').validate({ //사용자 정의
    //요소에 대한 규칙
    rules:{
        name:"required",
        name:{
            required:true,
            equalTo:"#name",
            remote:{ //$.ajax({})의 역할
                url:'url',
                method:'post',
                data:{
                    userId:function(){
                        return $('#userId').val();
                    }
                }
            },
            customMethod:true
        },
    //조건 불일치 메시지"
    message:{
        name:"message"
        name:{
            required:"message",
            equalTo:"message",
            remote:"message",
            ...:"message"
        },
    //메시지 위치 지정
    errorPlacement:function(error, element){
        //error(메시지), element(요소/태그) 이용해 특정태그에 메시지 추가
    }
});



<!-- 정규식 메서드 새로 만들기 -->

$.validator.addMethod("메서드이름", function(value, element){
    return /정규식/.test(value);
}, "조건 불일치 메시지");

 

## 내장된 검증방법 목록 ##

 

1) required : 요소를 필수로 만듦

2) remote : 요소의 유효성을 점검할 자원을 요청 ($.ajax 활용가능)

3) minlength : 요소의 최소 길이 설정

4) maxlength : 요소의 최대 길이 설정

5) rangelength : 요소의 길이 범위 설정

6) min : 요소의 최소값 설정

7) max : 요소의 최대값 설정

8) range : 요소의 값 범위 설정

9) email : 요소가 유효한 이메일 패턴을 사용

10) url : 요소가 유효한 url 패턴을 사용

11) digits : 요소는 숫자만 가능

12) equalTo : 요소가 다른 요소와 동일

등등...

 

 

※ 참고자료

https://jqueryvalidation.org/

 

※ 스크립트 소스

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.js

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js