[JavaScript] 정규표현식

[정규표현식]

정규표현식을 생성하는 방법

1. RegExp객체를 생성자로 생성 -> new RegExp("정규표현식");

2. /정규표현식/

  var regExp = new RegExp('script'); // 객체를 생성 - script단어를 찾아라

        regExp = new RegExp(/script/);

        

        var regExp2 = /script/;

        var str = "javascript jquery ajax";

        //문자열을 정규표현식과 비교하여 확인하려면

        //RegExp객체의 함수를 이용함.

        //test() : 정규표현식에 해당이 되면 true, 아니면 false

        //exec() : 정규표현식에 해당이 되면 해당되는 문자를 출력,없으면 null

        var doc = document.getElementById('area');

        doc.innerHTML+="비교대상문자 : "+str+"<br>";

        doc.innerHTML+="정규표현식과 비교 test() : "+regExp.test(str)+"<br>"; //true

        doc.innerHTML+="정규표현식과 비교 exec() : "+regExp.exec(str)+"<br>"; //해당되는 문자 script 출력

      

//String 객체에서도 비교가 가능

        //match() : 일치하는 문자를 배열로 반환

        //replace() : 일치하는 문자를 변환

        //search() : 일치하는 문자의 시작 인덱스를 반환

        //배열로 반환해서 0번인덱스를 출력함

        doc.innerHTML+="String.match() : "+str.match(regExp)+"<br>"; //일치하는 인덱스 script 출력

        doc.innerHTML+="String.replace() : "+str.replace(regExp2,"스크립트")+"<br>"; //java 스크립트 jquery ajax

        doc.innerHTML+="String.search() : "+str.search(regExp2)+"<br>"; // 4

[대체문자로 변환해주는 표현]

$& : 제일처음 일치하는 문자열 -> 그 문자열 자체

$` : 매칭된 문자열의 앞 문자열

$' : 매칭된 문자열의 뒤 문자열

 

<button onclick="testStr();">실행</button>

    <div id="area2"></div>

    <script>

        function testStr(){

            var doc = document.getElementById("area2");

            var regExp = /as/;

            var str = "javascript jquery ajax sass";

// $& : jav(as)cript jquery ajax sass

doc.innerHTML+="$& : "+str.replace(regExp,"($&)")+"<br>";

// $& : jav(as)cript jquery ajax sass

 doc.innerHTML+="$` : "+str.replace(regExp,"($`)")+"<br>";

            

// $' : jav(cript jquery ajax sass)cript jquery ajax sass

doc.innerHTML+="$' : "+str.replace(regExp,"($')")+"<br>";

        }

       

[플래그문자]

정규표현식을 작성할 때 /정규표현식/flag를 작성함

문자열 검색에 대한 옵션을 의미한다

g : 전역비교수행 -> 한개찾고 끝나는것이 아니라 전체를 검색하는 것

i : 대소문자 구별없이 찾기

m : \n(개행)을 문장의 시작을 보고 찾기

<button onclick="test();">옵션 실행</button>

    <div id="area3"></div>

    <script>

        function test(){

            var reg=/a/;

            var reg2=/a/g;

            var reg3=/a/gi;

            var str = "Javascript Jquery Ajax";

            var doc = document.getElementById("area3");

            doc.innerHTML+="기본 : "+str.replace(reg,"-$&-")+"<br>";

            doc.innerHTML+="g옵션 : "+str.replace(reg2,"-$&-")+"<br>";

            // a 대소문자 다찾음

            doc.innerHTML+="i옵션 : "+str.replace(reg3,"-$&-")+"<br>";

        

            var reg4 = /^j/gi;

            var reg5 = /^j/gim;

            var str2 = str.replace(" ","\n");

            doc.innerHTML+="m전 : "+str2.replace(reg4,"-$&-")+"<br>";

            doc.innerHTML+="m후 : "+str2.replace(reg5,"-$&-")+"<br>";

기본 : J-a-vascript Jquery Ajax

g옵션 : J-a-v-a-script Jquery Aj-a-x

i옵션 : J-a-v-a-script Jquery -A-j-a-x

m전 : -J-avascript Jquery Ajax

m후 : -J-avascript -J-query Ajax

        }   

[정규표현식 메타문자 활용하기]

^ : 문자열의 맨앞에 오는 문자를 찾는것

$ : 문자열의 맨끝에 오는 문자를 찾는것

 <button onclick="test2();">^ $문자 확인</button>

    <div id="area4"></div>

    <script>

        function test2(){

            //앞글자 확인

            var reg = /^j/g;

            var reg2 = /y$/gm;

            var str = "javascript jquery ruby Ajax"

            var str2 = "aavascript jquery ruby" 

            var doc = document.getElementById("area4");

            doc.innerHTML+="^j : "+str.replace(reg,'-$&-')+"<br>";

            //문장의 첫시작이 a이기때문에 아무것도 못찾음

            doc.innerHTML+="^j : "+str2.replace(reg,'-$&-')+"<br>";

            doc.innerHTML+="y$ : "+str2.replace(reg2,'-$&-')+"<br>";

            var str3 = "javascript\njquery\nruby\nAjax"

            doc.innerHTML+="y$ : "+str3.replace(reg2,'-$&-')+"<br>";

        }

    ^j : -j-avascript jquery ruby Ajax

    ^j : aavascript jquery ruby

    y$ : aavascript jquery rub-y-

    y$ : javascript jquer-y- rub-y- Ajax

    </script>

[포인트]

임의의 한글자 / 자리수 한자리를 차지하는 것

 <button onclick="test3();">실행</button>

    <div id="area5"></div>

    <script>

        function test3(){

            var reg = /a..b/; //a와b사이에 두자리수만 찾는다

            console.log("ab : "+reg.test('ab')); //일치하는것 없어서 false

            console.log("a아ba01b : "+reg.exec('a아ba01b')); //a..->a다음 두자리수다음것 출력 a01b

            console.log("a아싸싸b : "+reg.test('a아싸싸b')); //a와b사이에 세자리가 있어서 false

            console.log("aq b : "+reg.test('aq b'));//true

        }

        

    </script>

[괄호]

한문자, 묶음안의 내용의 범위를 나타냄 -> 또는 | 으로 표시

예) [abc] -> a또는 b또는 c == a|b|c

 <button onclick="test4();">실행</button>

    

    <script>

        function test4(){

            var reg = /[aj]/gi;

            var reg2 = /[^aj]/gi;

            var str = 'Javascript jquery Ajax';

            console.log("========/[aj]/gi=======")

            console.log(str.replace(reg,"-$&-")); -J--a-v-a-script -j-query -A--j--a-x

            console.log(str.replace(reg2,"-$&-")); Ja-v-a-s--c--r--i--p--t-- -j-q--u--e--r--y-- -Aja-x-

            //[]안에 -표시로 범위로 설정

            reg = /[a-z]/g; //소문자 a~z까지 찾아라

            reg = /[A-Z]/g; //대문자 A~Z까지 찾아라

            //대소문자 전체 //알파벳 전체

            reg = /[a-zA-Z]/g; 

            //숫자

            reg = /[0-3]/g;

            str+='DVFD1DF3DFD';

            console.log(str.replace(reg,"-$&-")); Javascript jquery AjaxDVFD-1-DF-3-DFD

  

    </script>