정규표현식은 패턴을 형성하는 문자들의 집합으로 문자열 내에서 검색, 대체, 추출 등을 할 때 사용한다. 대부분의 프로그래밍 언어와 같이 자바스크립트도 정규표현식을 지원한다. RegExp 객체를 사용하면 정규표현식을 명시적으로 생성할 수 있다. 다음은 명시적 사용의 예다.

var searchPattern = new RegExp(‘+s’);

RegExp 문자열 리터럴의 사용 방법은 다음과 같다.

var searchPattern = /+s/;

두 가지 경우 모두에서 덧셈 기호(+)는 문자열 내에서 한 개 이상의 s 문자와 일치함을 의미한다. 그리고 슬래시(/)로 감싸면(/+s/) 그 안의 식이 정규표현식이라는 뜻이다.

RegExp 메소드 : test 와 exec

RegExp 객체에는 test 와 exec 의 두 가지 메소드가 있다. test 메소드는 입력된 문자열이 정규표현식에 부합하는지를 판단한다.

var re = /JavaScript rules/;
var str = “javaScript rules”;
if(re.test(str)) document.writeln(“true”);
else document.writeln(“false”);

매 칭은 대소문자를 구분한다. 위 예에서 매칭 패턴이 ‘/Javascript rules/’ 라면 false 라는 결과를 얻을 것이다. 패턴 매칭 함수가 대소문자를 구분하지 않게 하려면 다음과 같이 오른쪽의 / 옆에 i 를 추가로 표시한다.

var re = /Javascript rules/i;

이런 것들을 플래그라고 한다. g 는 전역 매칭, m 은 여러 줄 매칭 플래그다. RegExp 를 사용해서 정규표현식을 생성하는 경우엔 플래그를 두 번째 인자로 넘겨준다.

var searchPattern = new RegExp(‘+s’, ‘g’);

다음 코드에서 RegExp 메소드인 exec 는 ‘/JS*/’ 라는 패턴을 찾는다. 그런데 플래그를 보면 g 와 i 가 설정되어 있으므로 문자열 전체에 대하여 대소문자를 구분하지 않고 찾는다.

var re = /JS*/ig;
var str = “cfdsJS *(&YJSjs 888JSSS”;
var resultArray = re.exec(str);
while (resuleArray) {
    document.writeln(resultArray[0]);
    resultArray = re.exec(str);
}    // 결과 : JS JS js JSSS

위 정규표현식은 J 자로 시작하고, 그 뒤에 0개 이상의 S가 들어가는 패턴을 의미한다. 그리고 i 플래그를 사용했기 때문에 대소문자를 구분하지 않고 매칭한다. 즉, js 도 매칭된다. 또한 g 플래그를 사용했기 때문에, 마지막으로 매칭된 위치를 기억하고 있다가 다음번에 exec 를 호출하면 그 위치의 다음부터 매칭되는 것을 찾는다. 결국, 네 개의 아이템을 찾아서 출력한다. 그리고 더 이상 매칭되는 것을 찾을 수 없으면 null 값이 반환되어 동작을 멈춘다.

응용 프로그램에서 정규표현식과 RegExp 객체에 RegExp 메소드를 사용하기도 하지만, 그보다는 String 객체의 regex 메소드인 replace(대체), match(메치), search(검색) 등을 주로 사용한다.

정규표현식의 실제 사용 예

첫 번째 문자는 역슬래시()로, 흔히 확장 문자라고도 한다. 왜냐하면, 그 뒤에 오는 모든 문자를 평소의 의미와 다른 의미로 해석하게 하기 때문이다. 자바스크립트 정규표현식에서는 두 가지로 쓰인다. 첫 번째로 역슬래시() 기호 다음에 일반 문자가 오면 특수 문자로 취급한다. 예를 들어 s 는 문자 s 가 아닌 공백 문자(스페이스, 탭, 폼 피드, 라인피드 등)를 의미한다. 두 번째로 역슬래시() 기호 다음의 특수 문자는 그 문자 자체를 의미한다. 즉, + 와 같이 표기한 경우 덧셈 기호(+) 자체를 의미한다.

다음 예제는 스페이스 문자 다음에 별표(*)가 오는 경우를 찾아서 대시 기호(-)로 대체한다. 일반적으로 별표는 0개 이상의 문자를 뜻하는 특수 문자이지만, 이 경우엔 역슬래시와 함께 사용했으므로(*) 별표 자체를 의미한다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html;charset=EUC-KR”>
    </head>
    <body>
        <script>
            var regExp = /s*/g;
            var str = “this *is *a *test *string”;
            var result = str.replace(regExp, ‘-‘);
            document.writeln(result);
        </script>
    </body>
</html>
결과 : this-is-a-test-string

정규표현식에는 문자열 매칭에 편리하도록 사용하는 네 가지의 특수 문자가 있다.

* : 0회 이상 반복
+ : 1회 이상 반복
? : 0 또는 1개의 문자 매칭
. : 정확히 1개의 문자 매칭

흥 미로운 매칭의 예로 욕심쟁이 매칭(.*)과 게으름뱅이 별 매칭(.*?) 을 들 수 있다. 욕심쟁이 매칭(.*) 의 경우, 점(.)은 하나의 문자를 지칭하고 별표는 그 매칭의 마지막까지의 반복을 뜻한다. 따라서 따옴표로 묶인 문자열 안에 있는 문자들을 빼내고 싶다면 /”.*”/ 를 사용한다. 예를 들어 다음 문자열이 있다고 가정 해보자.

test = “one” or this is also a “test”

첫 따옴표에서 매칭되기 시작해 마지막까지 계속되므로 결과는 다음과 같다.

“one” or this is also a “test”

게으름뱅이 별 매칭의 경우(/”.*?”/) 는 약간 다르게 마지막 매칭이 아닌 첫 번째 매칭을 결과로 내놓게 되므로, 그 결과는 다음과 같다.

“one”

다음은 월, 일, 년의 사이를 스페이스로 구분한 문자열(예를 들어, March 12 2005) 을 매칭하는 String 검색 메소드의 예다. 단, 날짜를 나타내는 문자열은 콜론(:) 다음에 나온다고 가정하였다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html;charset=”EUC-KR”>
    </head>
    <body>
        <script>
            var regExp = /:D*sd+sd+/;
            var str = “This is a date : March 12 2005”;
            var result = str.match(regExp);
            document.writeln(“Date ” + result);
        </script>
    </body>
</html>
결과 : Date : March 12 2005

정 규표현식을 조금 더 자세히 살펴보면, 첫 번째 문자는 콜론(:)이고 그 다음은 D 이다. D 는 ‘숫자가 아닌 문자’를 의미한다. 따라서 D* 는 숫자가 아닌 문자의 0회 이상의 매칭을 의미한다. s 는 공백 문자를 뜻한다. d 는 숫자를 뜻한다. 따라서 d+ 는 1회 이상의 숫자 매칭을 의미한다.

위 예에서 D 는 ‘숫자가 아닌 문자’ 를 의미했다. 또 다른 방법으로 ‘~을 제외한’ 이란 뜻의 캐럿 기호(^)를 사용해서 다음과 같이 사용할 수도 있다.

[^0-9]

이와 같이, D와 [^0-9] 는 동일한 패턴을 의미한다.

만약 숫자만을 뜻하고 싶다면, 캐럿 기호(^) 를 제외하고 다음과 같이 표기한다.

[0-9]

여러 문자를 매칭하고싶다면, 문자의 [] 안에 문자 범위를 나열한다. 다음은 알파벳 대소문자 전체를 매칭하는 예다.

[A-Za-z]

지금까지 익힌 방법을 사용해서 위 예제의 정규표현식을 다음과 같이 바꾸어 쓸 수 있다.

var regExp = /:[^0-9]*s[0-9]+s[0-9]+/;

캐럿 기호와 달러 기호는 한 줄의 시작과 끝에 위치한 패턴을 찾는데도 사용된다. 한 줄의 시작을 지칭하는 경우는 캐럿 기호(^)를 사용하고, 끝을 지칭하는 경우는 달러 기호($)를 사용한다.

다음 코드에서는 찾고자 하는 문자열이 시작 부분에 위치한 것이 아니기 때문에 실패한다.

var regExp = /^The/i;
var str = “This is the JavaScript example”;

하지만, 다음은 매칭에 성공한다.

var regExp = /^The/i;
var str = “The Example”;

여러 줄을 의미하는 플래그인 m 을 사용하면, 한 줄이 끝난 다음의 문자열에도 매칭된다.

var regExp = /^The/im;
var str = “This isnthe end”;

그리고 한 줄의 끝을 의미하는 달러 기호($)를 사용하면 당므은 실패한다.

var regExp = /end$/;
var str = “The end is near”;

하지만 다음 경우는 패턴 매칭에 성공한다.

var regExp = /end$/;
var str = “The end”;

m 플래그를 사용한 경우엔, 한 줄이 끝나기 직전의 문자열에 매칭된다.

var regExp = /The$/im;
var str = “This is really thenend”;

정규표현식을 사용한 패턴 매칭에 있어 괄호는 중요한 의미를 지닌다. 괄호로 묶은 패턴은 매칭된 다음, 그 부분을 기억한다. 여기서 기억한 값은 결과가 저장되는 배열에 같이 저장된다.

var rgExp = /(^D*[0-9])/
var str = “This is fun 01 stuff”;
var resultArray = str.match(rgExp);
document.writeln(resultArray);

위 예를 실행한 결과는 다음과 같다.

This is fun 0,This is fun 0

쉼 표 전까지의 문자열은 매칭된 문자열이고, 그 뒤의 문자열은 괄호로 묶어서 저장된 문자열이다. 패턴 전체를 괄호로 묶는 대신에 일부분만을 묶게 되면, 묶은 부분만 저장된다. 예를 들어, /(^D*)[0-9]/ 로 매칭시킨 결과는 다음과 같다.

This is fun 0,This is fun

즉, 쉼표 뒤의 문자열에서 알 수 있듯이 괄호로 묶은 부분만 저장된 것이다.

괄 호는 또한 문자열의 특정 부분을 변경하는 데도 사용한다. RegExp 에는 $1, $2, … $9 와 같은 특수 문자가 있다. 괄호를 사용해서 캡처한 부분 문자열이 이 특수 문자에 저장된다. 다음은 한 개 이상의 대시 기호(-)로 구분되는 문자열을 찾아서 바꿔치기 하는 예다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html;charset=EUC-KR”>
    </head>
    <body>
        <script>
            var rgExp = /(w*)-*(w*)/;
            var str = “Java—Script”;
            var result = str.replace(rgExp,”$2-$1”);
            document.writeln(result);
        </script>       
    </body>
</html>
결과 : Script-Java

대 시 기호(-)가 하나로 줄어들었다는 것에 주목하자. 그리고 위 예에서는 아주 널리 쓰이는 패턴 매칭 문자인 w 를 볼 수 있다. 이는 알파벳, 숫자로 된 문자, 밑줄 기호(_)를 의미한다. 즉, [A-Za-z0-9_]와 같다. 그리고 W는 이와 반대의 문자([A-Za-z0-9_]가 아닌 것)를 뜻한다.

마지막으로 살펴볼 정규표현식의 문자는 수직바 기호(|)와 중괄호({})다. | 는 ‘~ 또는 ~’를 뜻한다. 예를 들어, 다음은 a 또는 b 를 뜻한다.

a|b

여기에 여러 개의 | 를 조합해, 다음과 같이 ‘a 또는 b 또는 c 중 하나’를 의미할 수도 있다.

a|b|c

중괄호는 그 앞 문자의 반복 횟수를 지정할 때 사용한다. 예를 들어, 다음은 s의 두 번 반복(ss)을 뜻한다.

s{2}

정규표현식은 폼 내용의 검사에 아주 유용하다.

Leave a Reply

Post Navigation