자바스크립트 - 정규표현식

정규표현식

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

정규 표현식을 이용하면 입력 된 문자열에 대하여 특정 조건 검색, 치환 복잡한 조건문 대신 간단하게

처리 가능

 

정규 표현식 객체 생성

자바스크립트에서는 RegExp 객체와 문자열 메소드를 조합해 정규 표현식 사용

정규 표현식은 패턴과 선택적으로 사용할수 있는 플래그로 구성되어있음

 

<script>
        // 정규식 생성 문법 1
        // 상황에 따라 동적으로 생성 된 문자열을 정규식으로 만들어야 할 때 사용
        let regExp = new RegExp('pattern', 'gmi');
        // 정규식 생성 문법 2
        // 코드 작성 시 이미 패턴을 알고 있는 경우 사용
        regExp = /pattern/;
        regExp = /pattern/gmi;
    </script>

 

정규식 메소드

test : 문자열에서 정규식 변수의 값과 일치하는 값이 있으면 true, 없으면 false 반환

match : 문자열에서 정규식 변수의 값과 일치하는 모든 값 반환

replace : 문자열에서 정규식 변수의 값과 일치하는 부분을 새로운 값으로 변경

search : 일치하는 부분의 시작 인덱스 반환

split : 정규식 변수에 지정된 값을 구분자로 하여 배열 생성

<button id="test1">확인하기</button>
<div id="area1" class="area"></div>

<script>
        document.getElementById('test1').addEventListener('click', () => {
            // 검색 대상 문자열
            let str = 'javascript jquery ajax';

            // 정규식 변수(검색 조건으로 삼을 문자열)
            let regExp = /script/;

            // area에 표현할 html
            let html = '';

            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "match : " + str.match(regExp) + "<br/>";
            html += "replace : " + str.replace(regExp, '스크립트') + "<br/>";
            html += "search : " + str.search(regExp) + "<br/>";
            html += "split : " + str.split(regExp) + "<br/>";

            document.getElementById('area1').innerHTML = html;
        });
    </script>

문자 검색, 치환

^ : 텍스트의 시작

ex. /^a/ : 소문자 a로 시작하는 패턴

[] : 범위 표현

ex /[ab]/ : 소문자 a또는 b, /[a-z]/ : 소문자 a~z 

$ : 텍스트의 끝

. : 어떤 문자가 오던 매칭

ex. /a.c/ : a와 c 사이의 문자 아무거나 하나

+ : 앞의 문자를 1개 이상 찾음

ex. /a+/ : a또는 aa또는 aaa...

button id="test2">실행확인</button>
    <div id="area2" class="area"></div>
    <script>
        document.getElementById('test2').addEventListener('click', () => {
            let str = 'javascript jquery ajax';
            let regExp = /a/;
            let html = "";

            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += ""

            // 문자열에서 정규식과 일치하는 값이 있는지 검사
            html += "test : " + regExp.test(str) + "<br/>";

            // 문자열에서 정규식과 일치하는 값들 중 첫 번째 값 대체
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // ^ : 텍스트의 시작을 의미
            regExp = /^j/;
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // [] : []내의 문자 중 하나로도 존재할 경우
            regExp = /[ab]/;
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // j 또는 s로 시작
            regExp = /^[js]/;
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // $ : 텍스트의 끝을 의미
            regExp = /x$/;
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // . : 개행 문자를 제외한 모든 문자
            // + : 한 글자 이상
            // j로 시작해서 x로 끝나는 패턴(중간에 최소 1개 이상의 문자는 있음)
            regExp = /^j.+x$/;
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // 숫자만(시작^ 부터 1글자 이상+ 끝$ 까지 [0-9]일때)
            regExp = /^[0-9]+$/;
            str = "1234567890";
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // 영어 대소문자만
            regExp = /^[a-zA-Z]+$/;
            str = "javascript123";
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            // 한글만
            regExp = /^[ㅏ-ㅣㄱ-ㅎ가-힣]+$/;
            str = "ㅎㅇ";
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "test : " + regExp.test(str) + "<br/>";
            html += "replace : " + str.replace(regExp, '(***)') + "<br/><br/>";

            document.getElementById('area2').innerHTML = html;
        });
    </script>

 

플래그 문자

g : 전역 비교를 수행

i : 대소문자를 가리지 않고 비교

m : 여러 줄의 검사 수행

 <button id="test3">실행확인</button>
    <div id="area3" class="area">

    </div>
    <script>
        document.getElementById('test3').addEventListener('click', () => {
            let str = 'Javascript JQuery Ajax'
            let regExp = /a/;
            let html = '';
            
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";
            // $& : 대체 문자열에 일치하는 전체 문자열의 본사본을 포함

            regExp = /a/g;
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";

            regExp = /a/gi;
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";

            str = "Javascript\nJQuery\nAjax";
            regExp = /^j/gi;
            html += "str : " + str + "<br/>";
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";

            regExp = /^j/gim;
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";

            regExp = /[^j]/gim;
            // 대괄호 안에서 ^는 부정
            html += "regExp : " + regExp + "<br/>";
            html += "replace : " + str.replace(regExp, "($&)") + "<br/><br/>";

            document.getElementById('area3').innerHTML = html;
        });
    </script>

 

추가 메타 문자

\d : 숫자

\w : 알파벳 + 숫자

\s : 공백문자,띄어쓰기, 줄바꿈

\D : 숫자가 아닌 문자

\W : 알파벳 + 숫자 _ 가 아닌 문자

\S : 공백 문자가 아닌 문자