ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자주 사용하는 정규식 패턴
    카테고리 없음 2019. 12. 26. 19:59

    들어가며

    정규식은 문자열 검색과 치환 용도로 쓰이며, 회원가입이나 이력서 같은 양식 입력 등에 많이 쓰인다.

    매번 정규식을 사용해서 개발하는 것이 아니다 보니, 개발자들 사이에서도 정규식을 다루는 사람이 드물고, 정신건강에 해로우니 필요할 때마다 찾아 쓰라고 조언하는 사람도 있다.

     

    매번 찾기도 불편 하니 개발 시에 자주 사용했던 패턴들을 소개한다.

     

    URL Parse

    크롤링 데이터 저장 시, API Cors, x-frame-option 등 URL Parse는 다양하게 사용된다.

    /^((\w+):)?\/\/((\w+)?(:(\w+))?@)?([^\/\?:]+)(:(\d+))?(\/?([^\/\?#][^\?#]*)?)?(\?([^#]+))?(#(\w*))?/g

     

    전화번호에 "-" 입력

    회원가입 시 전화번호 입력에 자주 사용되는 패턴이다.

    \d로 숫자(Digit)만 검사하고, {n}으로 자릿수를 지정할 수 있다.

    그리고,  Capture 된 순서대로 $1, $2,... 번호가 부여되니, 원하는 문자열과 번호를 응용하여 치환하면 된다.

    "01012345678".replace(/(\d{3})(\d{4})(\d)/, "$1-$2-$3");

     

    숫자 3자리마다 , (콤마) 입력

     

    HTML 속성 추출

    크롤링, 에디터 제작 시 매우 유용하게 쓰이는 패턴이다.

    "="을 기준으로 앞뒤로 Capture 하여 배열에 담아 출력한다.

    const regex = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))*.)["']?/g;
    const str = `<div><a href="http://www.domain.com" target="blank"><img src="https://www.image.com/image.jpg" alt="a" /></a></div>`;
    let m;
    
    while ((m = regex.exec(str)) !== null) {
        m.forEach((match, index) => {
            console.log(`${index}: ${match}`);
        });
    }

     

    Date format

    날짜 형식 변환은 정말 많이 사용되는 패턴이면서, 정규식 패턴도 쉽다.

    \d {n} 패턴만 기억하면 다양하게 응용할 수 있다.

    Database에서 datetime, timestamp 값을 읽어와 포맷 변환을 해야 한다면 moment.js를 사용 하자.

    "20200110".replace(/(\d{4})(\d{1,2})(\d{1,2})/, ($f, $1, $2, $3) => type.replace('YYYY', $1).replace('MM', $2).replace('DD', $3));

     

    Moment.js | Home

    Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

    momentjs.com

    HTML Encode

    블로그에 소스코드로 올리거나, Database에 Ascii 형태로 바꾸어 저장할 때 사용된다.

    "<div>Hello World</div>".replace(/[\u00A0-\u9999<>\&]/gim, (v) => '&#' + v.charCodeAt(0) + ';');

     

    HTML Tag 제거

    크롤링 데이터 정제할 때 유용하게 사용된다. 

    "<div><span>Hello</span> <span>World</span></div>".replace(/<[^>]*>/g, '')

     

    이메일 검증

    사용 가능한 문자의 종류와 @와.(점) 2가지가 들어갔는지 체크하는 패턴이다.

    const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g;
    const str = "uznam8x@gmail.com";
    regex.test(str);

     

    비밀번호 검증

    Database에서는 비밀번호가 SHA256 등으로 Hash로 처리하여 안전하게 관리된다.

    하지만, 실제 사용자 비밀번호는 대부분 유추하기 쉬운 패턴으로 되어 있는 경우가 많다.

    만약에 관리자의 패스워드가 쉬운 패턴으로 되어 있다면...

    상상하기도 싫다. 회원 가입부터 철저하게 비밀번호를 검증하여 서비스를 안전하게 보호 하자.

    const regex = /^.*(?=.{8,10})(?=.*[a-zA-Z])(?=.*?[A-Z])(?=.*\d)(?=.+?[\W|_])[a-zA-Z0-9!@#$%^&*()-_+={}\|\\\/]+$/g;
    const str = "aAzZ1!a_#";
    regex.test(str);

     

    IP 검증

    IP형태가 맞는지 검사한다.

    const regex = /^(?!.*\.$)((?!0\d)(1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/g;
    const str = "123.255.0.1";
    regex.test(str);

     

    Mac 주소 검증

    Mac address 형태가 맞는지 검사한다.

    const regex = /^([0-9a-fA-F]{2}[:.-]?){5}[0-9a-fA-F]{2}$/g;
    const str = "AA:BB:8c:DD:12:FF";
    regex.test(str);

     

    특정 문자만 가능

    회원가입 폼 검사 시 정말 많이 쓰이는 패턴이다.

    /^[0-9]+$/g.test(1234);
    /^[a-zA-Z]+$/g.test("abcd");
    /^[가-힣]+$/g.test("가나다라");

    국제 전화번호 검증

    (+) 포함 여부와 국가코드를 검사한다.

    const regex = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/g
    regex.test("+821012345678");

     

    첫 글자 변환 - Pascal case

    Post의 제목으로 변환하거나,

    개발 Code convension rule에 따라 Camel-case, Kebab-case, Snake-case 등으로 아래 정규식을 응용하여 함수명을 변환할 때도 사용한다.

    "hello world".replace(/\b[a-z]/g, (v) => v.toUpperCase())

     


    NPM

    https://www.npmjs.com/package/regexpjs

     

    regexpjs

    useful regular expression pattern

    www.npmjs.com


    정규식 테스트

    정규식을 테스트하는 여러 웹사이트가 있지만 regex101 이 사용하기가 편하다.

    Code 생성기도 있어 매우 유용하게 사용하고 있다.

     

     

    Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript

    Please wait while the app is loading...

    regex101.com

     

    참고 자료

     

    JavaScript Regular Expression Cheatsheet - Debuggex

     

    www.debuggex.com

     

    감사드립니다.

    의견 주신 페이스북 생활 코딩 그룹에 이보성 님, Chang Hyun Choi 님, 임승현 님, 이상준 님 감사드립니다.

    댓글 0

uznam8x