JavaScript _tip / 정규표현식

정규표현식

정규표현식은 개발하면서 자주 사용되는 것이 아니고 그냥 검색해서 사용하는 용도로 쓰입니다. 복잡한 기호와 가독성이 아주 불편해서 그냥 지나쳐야징~@~@ 하지만 우리는 정규 표현식을 왜? 사용하는지는 알아야 합니다! 

 

이번 블로깅은 정규표현식에 대해 간단한 설명과 유용하게 쓰이는 정규표현식을 소개하고자 합니다!!!

 

---

정규표현식이란 ?

정규 표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 언어(패턴)입니다.

크게 문자검색(search), 문자 대체(replace), 문자 추출(extract) 을 수행합니다.

 

정규식 패턴은 가독성이 많이 떨어져 너무 어렵게 느껴지는 경향이 있습니다. 그래서 패턴을 이해하려는 것 보다 이미 제공 된 정규표현식을 가져다 쓰는 것을 권장합니다. 하지만 본인은 아주 세세하게 알아야 되겠다! 하면 정규식 생성자 함수, 리터럴 방식, 재할당 방식, 플레그 정규식 메서드 등 검색하면서 공부 해보는 것도 나쁘지 않습니다. (가볍게 보시길 추천합니당...)

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

---

정규표현식 왜 씀 ??

간단한 문자 검색부터 아이디, 비밀번호, 패스워드 등 복잡한 문자 일치 기능을 정규 표현식을 통해 수월하게 할수 있습니다. 

 

 

예를 들어 문자열이 매일인지 아닌지 확인하기 위해 코드를 적을때 매일의 핵심인 @표시를 통해 확인 할 수 있습니다.

 

function checkEmail(email){
    if(email.indexOf('@') < 0){
        console.log("이메일이 아닙니다");
    }else{
        console.log("이메일이 맞습니다");
    }
}
 
checkEmail('joycoding@gmail.com') // 이메일이 맞습니다.
checkEmail('joycodinggmail.com') // 이메일이 아닙니다.

 

하지만 이코드는 이메일의 도메인 형식(.com)이나 !$$^$#%& 이런 기호들이 들어갈 경우 다시 코드를 작성

하기 너무 어려워 집니다. 그래서 우리는 정규 표현식을 사용합니다.

 

function email_check(email) {   
    var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return (email != '' && email != 'undefined' && regex.test(email)); 
}
 
console.log(email_check('joycodeing@gmail')) // true

 

위 와같이 정규 표현식을 쓰면 @ 가 이메일에 있는지 없는지를 판별하면서 동시에 @ 기준으로 앞뒤에 특수문자가 들어가면 이메일이 아님을 알려주는 정규표현식입니다.

 

---

정규 표현식 테스트 사이트

정규 표현식을 실제로 적용해 어떤식으로 실행되는지 확인해보는 것을 권장합니다!

아래의 사이트를 활용해서 정규식을 테스트 해봅시다!!

 

https://regex101.com/

https://regexr.com/

https://regexper.com/

 

---

정규 표현식 함수

나중에 이메일이나 핸드폰번호, 비밀번호를 정규 표현식을 사용해야 된다면 아래와 같은 함수를 사용 해보시길 바랍니다!

 

이메일 체크 정규식
 
function isEmail(Value) {
 
    var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
 
    return regExp.test(Value); // 맞는 경우 true 리턴    
 
}
 
 
 
핸드폰 번호 체크 정규식
 
function isPhoneNum(Value) {
 
    var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
 
    return regExp.test(Value); // 맞는 경우 true 리턴
 
}
 
 
 
비밀번호 체크 정규식
 
function isPassword(Value) {
 
    var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합
 
    return regExp.test(Value); // 맞는 경우 true 리턴
 
}