[Javascript] 정규 표현식 컴파일하기(정규식_3)

정규 표현식 컴파일하기

정규 표현식은 여러 단계의 처리과정을 거친다.

두 가지 주요한 단계로 컴파일(compilation) 과 실행(execution)이 있다.

 

정규 표현식이 처음 만들어지면 컴파일이 일어나고, 컴파일된 정규 표현식으로 문자열 내의 패턴을 찾으려고 하는 것이 바로 실행(execution)이다.

일부 브라우저는 정규 표현식들의 컴파일 결과를 캐시해 두는 경우가 대부분이다. 그렇기 때문에, 복잡한 정규 표현식을 다루는 경우 나중에 사용할 표현식을 미리 정의해 두면 좋은 속도 향상을 얻을 수 있다.

 

컴파일된 정규 표현식을 만드는 두 가지 방법

var regex1 = /test/i;
var regex2 = new RegExp("test", "i");

console.log(regex1.toString() == "/test/i"); // 표현식의 내용을 검증
console.log(regex1.test("Test")); // 대소문자 구분x
console.log(regex2.test("Test"));
console.log(regex1.toString() == regex2.toString()); // 두 정규표현식은 같음
console.log(regex1 != regex2); // 객체는 다름

두 정규 표현식은 생성된 이후 컴파일된 상태에 있음

만약 regex1에 대한 참조를 모두 /test/i로 바꾼다면, 정규 표현식이 계속 컴파일될 가능성이 있다.

따라서 한 번만 컴파일 하고 나중에 사용할 수 있도록 변수에 저장해 놓는 방식이 중요한 최적화가 될 수 있다.

(각 정규 표현식은 모두 유일한 형태의 객체 표현을 갖으므로, 식이 갔더라도 다른 객체가 만들어진다.)

 

런타임에 정규 표현식을 컴파일하는 예제

<div class="corn sunghyun"></div>
<div class="sunghyun corn"></div>
<div></div>
<span class="sunghyun corn kang"></span>

<script>
    function findClassInElements(className, type){
        var elems = document.getElementsByTageName(type || "*");
        
        var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
        
        var results = [];
        
        for(var i=0, length = elems.length; i<length; i++){
            if(regex.test(elems[i].className)){
               results.push(elems[i]);
            }            
        }
        return results;
    }
</script>

매개변수로 전달된 클래스 명을 이용해서 정규 표현식을 컴파일(RegExp 생성자 사용)

(시작 또는 공백문자로 시작해서, 가운데는 매개 변수로 전달된 클래스 명이 오고, 문자열의 끝 또는 공백문자로 끝나는 문자열과 매치가 가능)