반응형

자바스크립트 개발 환경 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





정규 표현식(Regular Expression)은 많이 들어본 단어면서도 생소한 단어이기도 하다.



정규 표현식을 간단히 말하자면 검색 패턴을 형성하는 문자열을 의미한다.


검색 패턴이란 문자, 문자열 검색같은 것에 해당한다.


자바스크립트에서 정규 표현식은 search 혹은 replace같은 string 메서드에 의해 자주 사용된다.


간단한 예를 들어보기 위해 search() 메서드를 통한 정규 표현식을 이용해보자.



더 많은 정규 표현식 이용은 아래 링크를 참조하자.


https://www.w3schools.com/jsref/jsref_obj_regexp.asp




1. 대소문자를 구분하지 않는 정규 표현식을 이용하여 

특정 문자의 대소문자 관계없이 바로 소문자로 치환해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
 
        <button type="button" onmouseover="on(this)" onmouseout="off(this)"><< HeLlo World >></button>
 
        <script>
            var str = "<< HeLlo World >>";
            function on(handle) {
                /* /문자열/i 는 문자열의 대소문자를 무시한다. */
                var get = str.replace(/hello/i, "hello"); 
                handle.innerHTML = get;
            }
            function off(handle) {
                handle.innerHTML = str;
            }     
            
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



클릭하시면 결과 화면을 확인 할 수 있습니다.



위 코드는 우선 "HeLlo World"라는 문자열이 들어오게 된다.


이때 hello를 대소문자 관계없이 찾아내어 소문자 hello로 바꾸고 싶다.


이때 /hello/i 를 이용하면 어떤 현상이 나타나는지 알아보자.






2. 찾고자 하는 문자열이 존재하는지 정규 표현식을 통해 확인해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test">안녕하세요 저는 자바스크립트입니다.</p>
 
        <button type="button" onclick="testchk()"> << '저는'이 있는지 확인 해보기 >> </button>
 
        <button type="button" onclick="testchk2()"> << '쟈뱌스크립트'이 있는지 확인 해보기 >> </button>
        <p id="printtest"></p>
        <script>
            function testchk() {
                // test id에 있는 값을 가져온다.
                var get = document.getElementById('test').innerHTML;
 
                document.getElementById('printtest').innerHTML = /저는/.test(get);
            }
 
            function testchk2() {
                // test id에 있는 값을 가져온다.
                var get = document.getElementById('test').innerHTML;
 
                document.getElementById('printtest').innerHTML = /쟈뱌스크립트/.test(get);
            }
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.



/찾고자 하는 문자열/.test(텍스트) 를 이용하면 존재하면 true, 존재하지 않으면 false값을 받아 낼 수 있다.


이때 


/찾고자 하는 문자열/.exec(텍스트) 를 이용하면 존재하면 해당 문자열을, 존재하지 않으면 null값을 받아 낼 수 있다.



















반응형