본문 바로가기
JavaScript

정규식 표현

by Dodledd 2024. 3. 24.

정규식이란?

정규 표현식(REGEX / REGEXP : Regular Expression)이란?
특정 패턴을 가진 문저열을 찾거나 또는 찾아서 변경할 때 사용하는 형식
정규표현식을 이용하면 문자열에 대한 특정 패턴 조건을 검사할 때 복잡하지 않게 할 수 있다.

 

 

정규표현식 객체 생성 및 정규표현식과 관련된 메소드

RegExp 객체에서 제공하는 메소드
1) 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 true 없으면 false
2) 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 해당 값중 가장 처음에 찾으 값 반환
<button onclick="test1()">실행</button>
    <div class="area" id="area1"></div>

    <script>
        function test1(){
            const area = document.getElementById('area1');

            const str1 = "javascript jQuery ajax";
            const str2 = "java oracle html css";

            // 정규표현식 객체 생성
            //=> 검색조건으로 삼고자하는 문자열 또는 특정패턴 만듬

            const regExp1 = new RegExp("script"); //객체생성방법1
            const regExp2 = /script/; //객체생성방법2

            area.innerHTML += "regExp2.test(str1) : " + regExp2.test(str1) + "<br>";
            area.innerHTML += "regExp2.test(str1) : " + regExp2.test(str2) + "<br>";
            area.innerHTML += "regExp2.test(str1) : " + regExp2.exec(str1) + "<br>";
            area.innerHTML += "regExp2.test(str1) : " + regExp2.exec(str2) + "<br>";
            area.innerHTML += "str2.replace(regExp2, 스크립트) : " + str1.replace(regExp2, "*") + "<br>";

        }
    </script>

 

메타문자

메타문자를 이용해서 정규식으로 검색조건으로 삼을 '특정패턴'제시가능
문자열이 해당 정규식으로 제시한 특정 패턴에 만족하는지 test()를 통해 검사할 수 있다.
문자열의 replace함수와 함께 사용해서 사용할 수 있다.

 

<button onclick="test2()">실행</button>
    <div class="area" id="area2" style="height: 500px;"></div>

    <script>
        function test2(){
            const area2 = document.getElementById('area2');

            const str = "javascript jquery ajax";

            let regExp = /a/ //메타문자가 없음
            area2.innerHTML += '/a/ : ' + regExp.test(str) + "<br>"

            regExp = /^j/ // ^ : 시작을 의미
            area2.innerHTML += '/^j/ : ' + regExp.test(str) + "<br>"
            area2.innerHTML += '/^j/ : ' + str.replace(regExp, "*") + "<br>"

            //[] : []내에 여러문자들을 목록처럼 나열 가능
            regExp = /[abc]/
            area2.innerHTML += '/[abc]/ : ' + regExp.test(str) + "<br>"
            area2.innerHTML += '/[abc]/ : ' + str.replace(regExp, "*") + "<br>"

            regExp = /x$/ // $ : 끝을 의미
            area2.innerHTML += '/x$/ : ' + regExp.test(str) + "<br>"
            area2.innerHTML += '/x$/ : ' + str.replace(regExp, "*") + "<br>"

        }
    </script>

 

 

또 정규식은 비밀번호 검사할 때 유용하게 사용되는데

예를들어 비밀번호는 소문자 a부터 z 대문자 A부터 Z와 숫자로 이루어진 5자리 이상 12자리 이하만 가능합니다.

라고 하면 밑 처럼 코드를 작성하면 된다.

const regRxp = /^[a-zA-z0-9]{5,12}$/

 

'JavaScript' 카테고리의 다른 글

callback 함수에 대해  (2) 2024.04.28
Ajax에 대하여  (0) 2024.04.05
부트스트랩 사용법  (2) 2024.03.24
jQuery에 대하여  (0) 2024.03.21
[4일차] window용 객체, 이벤트  (0) 2024.03.20