Javascript :: 정규표현식

김병철·2022년 11월 26일
0

JavaScript

목록 보기
10/11

정규표현식(Regular Expression)

특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환)할 때 사용하는 형식 언어이다.

정규표현식을 이용하면 문자열에 대해 특정 패턴 조건 검사 또는 치환 시 복잡한 조건을 제시할 필요없이 간단하게 처리 가능하다.

자바스크립트뿐만 아니라 자바나 오라클 등 다른 언어에서도 사용 가능하다.

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

test1실행 버튼 클릭 시 regExp 결과와 regEpx2 두 방법을 통해 만들어진 문자열을 콘솔로 확인하고

str1과 str2에 담긴 문자열을 RegExp객체를 통해 비교한다.

<h3>정규표현식 객체 생성 및 정규표현식과 관련된 메소드</h3>
<button onclick="test1();">test1실행</button>

<div class="area" id="area1"></div>
<script>
    function test1(){
        // 정규표현식 객체 생성 == 정규변수를 선언
        // == 검색 조건으로 삼고자 하는 문자열 또는 특정 패턴 제시
        var regExp = new RegExp("script");  // 방법1
        var regExp2 = /script/;     // 방법2

        console.log(regExp);    // script
        console.log(regExp2);   // script

        // 비교할 문자열
        var str1 = "javascript jquery html";
        var str2 = "ajax oracle css java";

        /*
            RegExp 객체에서 제공하는 메소드(정규식.xxx(문자열))
            - 정규식.test(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 true/ 없으면 false
            - 정규식.exec(문자열) : 문자열에서 정규식값과 일치하는 값이 있으면 처음 매칭된 문자열 반환/ 없으면 null반환

            String 객체에서 제공하는 메소드(문자열.xx(정규식))
            - 문자열.match(정규식) : 문자열에서 정규식값과 일치하는 값을 찾아서 반환
            - 문자열.search(정규식) : 문자열에서 정규식값과 일치하는 값의 시작인덱스를 반환"(0부터 시작) 일치하는 값이 없으면 -1 반환
            - 문자열.replace(정규식, 바꿀값) : 문자열에서 정규식값과 일치하는 첫번째 부분을 바꿀값으로 변경해서 반환
            - 문자열.split(정규식) : 정규식에 지정된 값을 구분자로 해서 쪼개진 값들이 담겨있는 배열 반환
        */

        var area1 = document.getElementById("area1");

        // 정규식 메소드
        area1.innerHTML += "regExp.test(str1) : " + regExp.test(str1) + "<br>";     // true
        area1.innerHTML += "regExp.test(str2) : " + regExp.test(str2) + "<br><br>"; // false
        area1.innerHTML += "regExp.exec(str1) : " + regExp.test(str1) + "<br>";     // true
        area1.innerHTML += "regExp.exec(str2) : " + regExp.test(str2) + "<br><br><hr>"; // false

        // 문자열 메소드
        area1.innerHTML += "str1.match(regExp) : " + str1.match(regExp) + "<br>"; // script
        area1.innerHTML += "str1.search(regExp) : " + str1.search(regExp) + "<br><br>"; // 4
        area1.innerHTML += "str1.replace(regExp, '스크립트') : " + str1.replace(regExp, '스크립트') + "<br>"; // java스크립트 jquery html
        area1.innerHTML += "str1.split(regExp) : " + str1.split(regExp) + "<br><br>"; //  java, jquery html
            
    }
</script>
  • html 결과 :
  • 콘솔 결과 :

방법1과 방법2의 콘솔결과가 동일하다.

test() 메소드 실행 시 script가 포함되어있어 true가 출력되었다.

exec() 메소드 실행 시 script가 포함된 인덱스인 4가 출력되었다.

match() 메소드 실행 시 정규식과 일치하는 문자열인 script가 출력되었다.

search() 메소드 실행 시 정규식값과 일치하는 값의 시작인덱스인 4가 출력되었다.

replace() 메소드 실행 시 정규식과 일치하는 값을 변경할 문자열로 바꾸어 출력되었다.

split() 메소드 실행 시 정규식에 지정된 값을 구분자로 하여 쪼개진 값이 출력되었다.


# 메타 문자

메타 문자를 이용하여 정규식으로 검색 조건으로 삼을 특정 패턴을 제시할 수 있다.

문자열이 해당 정규식으로 제시한 특정 패턴을 만족하는지 test()를 통해 검사하거나, replace()를 통해 치환 가능하다.

test2실행 버튼을 클릭하면 regExp 객체에 담긴 특정 패턴을 만족하는지 검사하고, 해당 문자열로 치환하여 html로 출력한다.

<button onclick="test2();">test2실행</button>
<div class="area" id="area2"></div>
<script>
    function test2(){
        var area2 = document.getElementById("area2");
        var str = "javascript jquery ajax";     // 비교할 문자열

        // var regExp = /'a'/;	// 메타문자 없는 경우
        var regExp = /a/;    //이렇게 해야 replace에서 문자 찾을 수 있음.

        area2.innerHTML = "/a/ : " + regExp.test(str) + "<br><br>";     // true
        area2.innerHTML +="/a/ : " + str.replace(regExp,'b')+"<br><br>"; // jbvascript jquery ajax
        // 기본적으로 replace는 치환시 일치하는 값들 중 첫값만 변경해준다.

        // - 메타문자 - 
        // 1. ^ : 시작을 의미
        regExp = /^j/;        // 소문자 j로 시작하는 경우
        area2.innerHTML += "/^j/ : " + regExp.test(str) + "<br>";   // true
        area2.innerHTML += "/^j/ : " + str.replace(regExp, "***") + "<br><br>";  // ***avascript jquery ajax

        //2. [] : []있는 문자 중 하나라도 존재할 경우
        regExp = /[abc]/;   // 특정 문자열 중 a또는 b또는 c가 하나라도 존재할 경우
        area2.innerHTML += "[abc] : " + regExp.test(str) + "<br>";      // true
        area2.innerHTML += "[abc] : " + str.replace(regExp,"(**)") + "<br><br>";    // j(**)vascript jquery ajax

        regExp = /[kh]/;
        area2.innerHTML += "[kh] : " + regExp.test(str) + "<br>";   // false

        // ---------------------------
        // 1, 2 묶어서 판별
        regExp = /^[jsa]/;     // 시작하는 문자가 'j' 또는 's'또는 'a' 로 시작하는 것
        area2.innerHTML += "/^[jsa]/ : " + str.replace(regExp,"(***)") + "<br><br>"; // (***)avascript jquery ajax
        regExp = /^jsa/;     // 시작하는 문자가 'jsa'로 시작하는 것
        area2.innerHTML += "/^jsa/ : " + str.replace(regExp,"(***)") + "<br><br>";   // javascript jquery ajax

        // 3. $: 끝을 의미
        regExp = /x$/;     // 'x'로 끝나는 것
        area2.innerHTML += "/x$/ : " + str.replace(regExp,"(***)") + "<br><br>";   // javascript jquery aja(***)

        // 시작값은 j 끝값은 x
        regExp = /^jx$/;        // j와 x가 붙어있어서 문자열 jx로 시작하고 끝나는 'jx'일 경우만 만족한다.
        area2.innerHTML += "/^jx$/ : " + str.replace(regExp,"(***)") + "<br><br>";   // 만족하는 게 없음.

        // 4. . : 개행 문자를 제외한 모든 문자(영문자, 숫자, 한글, 특수문자)
        // 5. + : 한글자 이상(0글자는 안됨)
        // .+ : 어떤 문자든지 한 글자 이상일 경우
        regExp = /^j.+x$/;        // j로 시작하고 어떤 문자든 한 글자 이상이고 x로 끝나는 경우
        area2.innerHTML += "/^j.+x$/ : " + str.replace(regExp,"(***)") + "<br><br>";   // (***)
        
</script>
  • html 출력결과 :

# 연습문제

  • 시작부터 끝까지 오로지 숫자로만 이루어진 경우
  • 숫자의 개수는 상관없이 적어도 한 글자 이상 있어야 되는 경우
  • 숫자로 시작하고 숫자로 끝나고 적어도 한 글자 이상인 경우
//regExp = /^[0123456789]+$/;
regExp = /^[0-9]+$/;        // 이렇게 표기 가능  [0123456789] ==[0-9]
area2.innerHTML += "/^[0-9]+$/ : " + str.replace(regExp,"(***)") + "<br><br>";   // (***)
  • html 출력 결과 :
/^[0-9]+$/ : javascript jquery ajax

  • 처음부터 끝까지 오직 숫자, 영문자로만 이루어진 경우
regExp = /^[0-9].+[0-9]$/;
area2.innerHTML += "/^[0-9].+[0-9]$/ : " + "1231231231234".replace(regExp,"(***)") + "<br><br>";   // (***)
area2.innerHTML += "문자열+숫자/ : " + (str+"1231523").replace(regExp,"(***)") + "<br><br>";   // 변화없음
area2.innerHTML += "문자열만 : " + str.replace(regExp,"(***)") + "<br><br>";   // 변화없음
  • html 출력 결과 :
/^[0-9].+[0-9]$/ : (***)

문자열+숫자/ : javascript jquery ajax1231523

문자열만 : javascript jquery ajax

  • 시작부터 끝까지 오직 한글로 이루어진 경우(자음,모음,결함) - 힣
regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
area2.innerHTML += "/^[ㄱ-ㅎ|가-힣]+$/ : " + "ㄴㅇㄴ".replace(regExp,"(***)") + "<br><br>";   // (***)
area2.innerHTML += "/^[ㄱ-ㅎ|가-힣]+$/ str대입 : " + str.replace(regExp,"(***)") + "<br><br>";   // 변화없음
  • html 출력 결과 :
/^[ㄱ-ㅎ|가-힣]+$/ : (***)

/^[ㄱ-ㅎ|가-힣]+$/ str대입 : javascript jquery ajax

# 플래그 문자

i : 대소문자를 가리지 않고 비교를 수행한다.

g : 문자열 내의 모든 패턴을 찾는다.

m : 여러줄 비교를 한다.

플래그 실행 버튼 클릭 시 RegExp 객체에 담긴 패턴을 i,g,m 조건에 따라 찾는다.

<button onclick="test2();">test2실행</button>
<div class="area" id="area2"></div>
<script>
    function test3(){
        var str = "JavaScript jQuery Ajax";

        var regExp = /a/;
        console.log("/a/ : " + str.replace(regExp,"(***)"));
        // 결과 : /a/ : J(***)vaScript jQuery Ajax
        // 첫 a 하나만 바뀜.

        regExp = /a/g;
        console.log("/a/ : " + str.replace(regExp,"(***)"));
        // 결과 : /a/ : J(***)v(***)Script jQuery Aj(***)x
        // 소문자 전부 다 변경됨

        regExp = /a/ig;
        console.log("/a/ : " + str.replace(regExp,"(***)"));
        // 결과 : /a/ : J(***)v(***)Script jQuery (***)j(***)x

        str = "JavaScript\nJquery\nAjax";
        regExp = /^J/;
        console.log("/^J/ : " + str.replace(regExp,"(***)"));
        // 결과 : 첫 J로 시작하는것만 변경
        // /^J/ : (***)avaScript
        // Jquery
        // Ajax

        regExp = /^J/g;
        console.log("/^J/ : " + str.replace(regExp,"(***)"));
        // 결과 : 첫 J로 시작하는 것만 대소문자 상관없이 변경
        // /^J/ : (***)avaScript
        // Jquery
        // Ajax
        regExp = /^J/gm;
        console.log("/^J/ : " + str.replace(regExp,"(***)"));
        // 결과 : J로 시작하는 것 모두 대소문자 상관없이 변경
        // /^J/ : (***)avaScript
        // (***)query
        // Ajax
    }
</script>
  • 콘솔 출력 결과 :

# 정규표현식을 활용한 주민번호 확인

앞서 배운 정규표현식을 활용하여 주민번호를 확인한다.

<h3>정규표현식을 활용한 주민번호 확인</h3>

주민번호 : <input type="text" name="" id="pno" placeholder="-포함해서 입력">
<button onclick="test4();">주민번호 버튼</button>
<script>
    function test4(){
        var pno = document.querySelector("#pno").value;
		console.log("입력된 값 : "+pno);
  
        // 000101-3322333
        // 1단계 : 6글자-7글자
        // . : 개행문자를 제외한 모든문자 (영문,숫자,한글,특수문자) 중 한글자
        var regExp = /^......-.......$/;
        // 2단계 : 숫자여야한다.
        // [0-9]6번 - [0-9]7번 이렇게 쓰면 비효율적
        // /^[0-9][0-9][0-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/
  		console.log(regExp.test(pno));

        /*
            메타문자 사용

            \d : 숫자([0-9]) 와 동일
            \D : 숫자를 제외한 모든 문자
            \w : 영문자, 숫자, _
            \W : 영문자, 숫자, _ 를 제외한 모든 문자
            \s : 공백문자(띄어쓰기, 탭, 줄바꿈)
            \S : 공백문자를 제외한 모든 숫자

            *수량문자
            + : 1글자 이상(최소 1글자는 있어야 한다.)
            * : 0글자 이상(0글자도 가능)
            ? : 0글자 또는 1글자만 가능

            {5} : 5글자
            {2,5} : 2글자 이상 5글자 이하
            {2,} : 2글자 이상
            {,5} : 5글자 이하
        */

        // 3단계 : 성별자리에 해당하는 부분에 1,2,3,4만 들어가야 한다.
        regExp = /^\d{6}-[1-4]\d{6}$/;
  		console.log(regExp.test(pno));
    }
</script>
  • html 출력 결과 :

profile
keep going on~

0개의 댓글