JavaScript :: 정규 표현식

1. 정의

문자열에서 문자 조합에 일치시키기 위해 사용되는 패턴

정규식 또한 객체이다

특정 규칙을 가진 문자열의 집합을 표현하는데 사용되는 형식의 언어

(단점 : 가독성이 떨어져서 표현식을 숙지하지 않으면 이해가 힘들다)

 

* 정규 표현식은 정규 표현식의 메소드를 바로 사용하는 것보다 문자열 객체의 메소드와 함께 사용하는 것이 일반적임

 

주로 js 파일에 넣어서 form이 submit 되기 전 유효성을 검사하는 데에 사용된다

 

 

2. 메소드 종류

메소드	의미
test()	일치하는 문자열이 있을 시 true, 없을 시 false
exec()	일치하는 문자열을 리턴
match()	일치하는 부분을 리턴
search()	일치하는 부분의 위치를 리턴  (index : 0부터 시작, 숫자로 리턴함)
split()	정규 표현식을 기준으로 문자열을 잘라 배열을 리턴  (정규 표현식과 일치하는 부분만 뺌)
replace()	일치하는 부분을 새로운 문자열로 바꿈  대체 문자 사용 가능  (default : defined)

 

ㄱ. replace() 메소드 대체 문자

- $& : 일치

- '$ : 일치하는 앞 부분

- $' : 일치하는 뒷부분

- $1, $2 : 그룹

 

* replace 메소드 대체 문자 부분에서 callback 함수 호출 가능

 

 

3. 플래그 문자

문자	의미
g	전역 비교 수행
i	대소문자 안 가리고 비교
m	여러 줄 검사 수행

 

 

4. 앵커 문자

문자	의미
^ABC	맨 앞 문자가 ABC인 경우
ABC&	맨 뒤 문자가 ABC인 경우

 

 

5. 메타 문자

문자	의미
.	아무거나
[a]	괄호 안의 글자만
[a^]	괄호 안의 글자를 제외한
[a-z]	a에서 z까지
[A-Z]	A에서 Z까지
[0-9]	0에서 9까지
\d	숫자만
\w	아무 단어
\s	공백 문자
\D	숫자를 제외한
\W	아무 단어가 아닌
\S	공백이 아닌

 

 

6. 수량문자

문자	의미
a+	1개 이상
a*	0개 or 여러개(1개 제외)
a?	0개 or 1개(여러개 제외)
a{5}	a가 5개
a{2, 5}	a가 2~5개
a{2,  }	a가 2개 이상
a{  , 2}	a가 2개 이하

 

 

7. 선택문자

문자	의미
{abc | def}	abc or def

 

 

8. 정규식 응용

정규식	의미
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 = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;	휴대폰번호 유효성 검사
var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;	전화번호 유효성 검사
var regExp = /^[a-z0-9_]{4,20}$/;	아이디, 비밀번호 유효성 검사

 

 

9. 예제

function updateMemberSave() {
//    alert('####');
    
    var form = document.update_member_form;
    
//    alert('member_update_form : ' + member_update_form);
    
    if (!form.memberEmail.value) {
        alert("이메일을 입력하세요.");
        
        form.memberEmail.focus();
        
        return false;
    }
 
//    function validateSmartEmail 함수를 불러와서 유효성 검사를     
    if (validateSmartEmail(form.memberEmail.value) == false) {
        alert("이메일 형식이 맞지 않습니다. \n ex) abcde@gmail.com");
        
        form.memberEmail.focus();
        
        return false;
    }
    
    if (!form.memberTel.value) {
        alert("전화번호를 입력하세요.");
        
        form.memberTel.focus();
        
        return false;
    }
 
//    function validateSmartPhone 함수를 불러와서 유효성 검사를 함    
    if (validateSmartPhone(form.memberTel.value) == false) {
        alert("전화번호 형식이 맞지 않습니다. \n ex) 010-1234-5678");
        
        form.memberTel.focus();
        
        return false;
    }
}
 
//휴대폰번호 체크 정규식
function validateSmartPhone(phone) {
    
    var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
    
//    test() : 비교해서 문자열 있으면 true, 없으면 false
//             유효하면 true, 아니면 false
    return regExp.test(phone);
}
 
//이메일 체크 정규식
function validateSmartEmail(email) {
    
    var regExp =  /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 
//    test() : 비교해서 문자열 있으면 true, 없으면 false
//             유효하면 true, 아니면 false
    return regExp.test(email);
}

 

회원을 추가할 때, form에서 휴대폰 번호와 이메일의 유효성을 검사하는 함수로 응용해봤다.