[JavaScript] 정규식 / 정규표현식 사용법 / 매서드 / 전화번호 예제

자바스크립트 / 제이쿼리(jQuery) 에서 정규식 사용하기

 

: JavaScript 나 jQuery 에서 정규식을 사용하려면 RegExp 생성자 또는 슬래시(/) 표기법을 사용하여 생성할 수 있다.

 

RegExp 생성자 사용시

var regExp = new RegExp('hello');

 

슬래시(/) 사용시

var RegExp = /hello/;

 

나는 주로 슬래시(/)를 이용하여 사용할 예정이다.

 

---

 

정규식을 만든 후 String 개체의 내장 메서드와 함께 사용할 수 있다.

주로 match(), test(), replace(), search() 함수를 사용한다.

 

1. match()

: 문자열에서 정규식과 일치하는 항목을 검색하고 일치하는 항목의 배열을 반환한다.

만약 일치하는 값이 없다면 null을 반환한다.

var blog = "Hello everyone! Welcome to the new world";
var regExp = /the/;

blog.match(regExp);
// return 값은 ["the"] 이다.

 

 

만약 정규식이 전역 플래그(/g)를 포함하고 있다면

match() 매서드는 문자열에서 일치하는 모든 항목을 배열로 반환한다.

var blog = "Hello everyone! Welcome to the new world. The sun is hot.";
var regExp = /the/gi;

blog.match(regExp);
// return 값은 ["the" , "The"] 이다.

 

/i 는 대소문자를 구별하지 않는다는 뜻이다 만약 i를 안넣었다면 대소문자를 구별하여 확인한다.

 

 

2. test ()

: 정규식과 일치하는지 테스트하고 true 또는 false를 반환한다.

var blog = "Hello everyone! Welcome to the new world";
var regExp = /the/;

blog.test(regExp);
// return 값은 true 이다.

 

 

3. replace()

: replace() 메서드는 문자열에서 패턴을 찾아 새 문자열로 바꾼다.

var blog = "Hello everyone! Welcome to the new world";
var regExp = /the/gi;

blog.replace(regExp,'A');
// return 값은 "Hello everyone! Welcome to A new world. A sun is hot"

 

	Replace()에서 치환을 당담하는것은, 정규식의 g 부분이다. 해당위치에 오는 문자에 따라서

	g : 문자열 내의 모든 패턴 체크

	i : 대소문자를 구별하지 않음

	m : 여러줄에 걸쳐서 체크

 

 

4. search()

: search() 메서드는 문자열에서 패턴을 검색하고 첫 번째 일치 항목의 인덱스를 반환한다.

var blog = "Hello everyone! Welcome to the new world";
var regExp = /the/;

blog.search(regExp);
// return 값은 27
// index는 0부터 시작한다

 

 

---

 

회원가입 정규표현식 예제

var userIdCheck = RegExp(/^[A-Za-z0-9_\-]{5,20}$/);
var passwdCheck = RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^*()\-_=+\\\|\[\]{};:\'",.<>\/?]).{8,16}$/);
var nameCheck = RegExp(/^[가-힣]{2,6}$/);
var nickNameCheck = RegExp(/^[가-힣a-zA-Z0-9]{2,10}$/);
var emailCheck = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
var birthdayCheck = RegExp(/^(19|20)[0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/);
var phonNumberCheck = RegExp(/^01[0179][0-9]{7,8}$/);

 

userIdCheck : 영문 대.소문자, 숫자 _,-만 입력 가능하고 5에서 20자리를 입력했는지 체크한다 {}사이에는 n과 m을 입력하여 n과 m사이의 값을 입력했는지 체크한다. n만 입력했을 경우 n자리 수 만큼 입력했는지 체크한다.

passwdCheck : 패스워드 체크에서는 영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자가 되는지 검사를 한다.

nameCheck : 2~6글자의 한글만 입력하였는지 검사

nickNameCheck : 한글과 영어, 숫자만 사용하였는지 검사

emailCheck : 이메일 형식에 맞게 썻는지 검사 ex)aa01@aa.aa

birthdayCheck : 생년월일을 형식에 맞게 썻는지 검사 19또는 20으로 시작하여 0~9까지의 수개 2개까지 하여 년도 그 뒤에 0이면1~9 1이면 1~2(1월부터 12월까지기 때문에) 이런식으로 검사를 해준다.

phonNumberCheck : 01로 시작하여 그 다음은 0,1,7,9 중 하나와 매칭되는지 체크한뒤 7~8자리인지 검사한다. 

 

 

---

 

정규식을 이용하여 내가 직접 해본 회원가입 유효성 체크

 

전화번호 체크

 

keydown시 숫자인지 확인 

: replace() 사용

// 전화번호 입력 체크
$('#us_tel').keydown(function() {
    var us_tel = $('#us_tel').val().replace(/[^0-9]*$/,''); //숫자를 제외하고 공백 처리
    $('#us_tel').val(us_tel);
});

 

그러나 영어는 인식을 잘했지만 한글로 적으면 적혔다...

그래서 한글일 경우 공백으로 바꿔주는 기능도 추가해줬는데 작동하지않아서

해결하진 못함 ㅜㅜ

 

keyup시 010으로 시작하고 총 11자인지 체크

: search() 사용

// 전화번호 길이 및 중복체크

// ^010 : 010으로 시작하고
// [0-9]{8} : 0~9 사이의 숫자만 8개 올수있다.
// 즉 앞의 010 3자와 8자 합쳐서 총 11자일 경우 통과
 var tel_reg_check = /^010[0-9]{8}$/; 

$('#us_tel').keyup(function() {

    if ( $('#us_tel').val().search(tel_reg_check) == 0) { 
    
		// 유효성 검사 통과
       
    } // if
    else {
    
		//유효성 검시 미통과
    }
    
}); // ('#us_tel').keyup 끝

 

원래는 test로 하려고 했는데

 

Uncaught TypeError: $(...).val(...).test is not a function

 

아무리해도 이 오류가 사라지지 않아서 포기했다...ㅠㅠ

다른 사람들은 정규식 선언부분을 고쳐서 해결했다는데 (var 부분) 

나는 절대 안사라져서 search를 사용하는 것으로 방향을 바꿨다.

 

+) test 오류 뜬 원인을 찾았다

,,,,바보같이,,,,,,...

정규식.test(검사할내용) <= 이렇게 써야하는데 

반대로 

변수.test(정규식) 을 사용해서 오류가 떴던것이다............................................해결했으니 속은 시원하다~

 

또 까먹을까봐 짧은 예시 적어놓고간다..

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

// 이름 체크(한글만 입력 가능)
$('#us_name').keydown(function() {
    var value = $('#us_name').val();
    if(regexp.test(value)){
        var us_name_check = $('#us_name').val().replace(/[^ㄱ-힣]*$/, '');
        $('#us_name').val(us_name_check);
    }else{
        console.log("한글입력ok");
    }

}); //('#us_name').keydown 끝

 

---

 

만약 필요한 정규식이 있다면

아래 사이트에서 검색해봐도 괜찮다

검색시 정규식을 알려줌!

 

Regular Expression Library (regexlib.com)

Regular Expression Library

 

---

 

참고한 글

 

jQuery 회원가입 정규식표현 유효성 검사(자주쓰는 정규표현식 정리) (tistory.com)

jQuery 회원가입 정규식표현 유효성 검사(자주쓰는 정규표현식 정리)

 

자바 스크립트(javascript) 기본 정규 표현식(match, test, replace, search) (tistory.com)

자바 스크립트(javascript) 기본 정규 표현식(match, test, replace, search)