JavaScript에서 정규 표현식 활용하기

정규표현식은 자바스크립트 외에도 수많은 언어에서 유용하게 활용할 수 있는 기술이다. 문자를 파싱할 일이 생겨서 각종 반복문, 분기문을 사용해서 힘들게 짜놓은걸 정규식 고수가 와서 한줄로 끝내버리면 그렇게 허탈할 수가 없다. 이번 포스팅에서는 자바스크립트에서 좀 더 다양한 정규표현식 활용법을 알아보자.

var phoneNumber = "010-1234-1234";

정규 표현식을 가장 흔하게 사용하는 때가 휴대전화번호, 이메일 등 양식을 맞출때가 아닐까싶다. -없이 입력한번호에 -를 붙인다거나, -를 붙여 입력한 번호의 -를 지운다거나 할것이다. 예제의 번호에서 -를 지워보자.

var phoneNumber = "010-1234-1234";
var pattern = /(\d{3})-(\d{3,4})-(\d{4})/;

console.log(phoneNumber.replace(pattern, "$1$2$3"));

이번 포스팅은 정규 표현식에 대한 포스팅은 아니므로 따로 정규 표현식을 설명하진 않는다(http://multifrontgarden.tistory.com/161).

1. replace

가장 흔히 사용하는 패턴이므로 정규 표현식을 아예 모르는 상태가 아니라면 낯설지않은 예제일것이다. replace()도 대중적인(?) API이므로 이해에 어려움은 없을 것이다. 정규 표현식을 사용할 대상(target) 문자열 객체의 replace() 메서드를 호출해서 첫번째 인자로 사용할 패턴을 넣고, 두번째 인자로 변경할 문자열을 넣는다. 이 예제에서는 역참조 기능을 사용하여 정규 표현식의 결과를 이용한다. 하지만 replace() 메서드의 두번째 인자가 함수를 받는것에 있어서는 낯선 분들도 많을 것이다.

var phoneNumber = "010-1234-1234";
var pattern = /(?:(\d+)-)/g;

phoneNumber.replace(pattern, function(){
    console.log(arguments);
});

좀 더 명확한 결과를 보기위해 패턴이 약간 변했다. 콜백에 어떤 인자가 전달되는지 모르는 상태이므로 따로 매개변수를 선언하진 않았다. arguments로 찍히는 내용을 보면

이런 내용들이 찍히게된다. 왜 3줄이 나왔는지는 후에 알아보고 일단 첫번째 줄을 이해해보자.

["010-", "010", 0, "010-1234-1234", callee: function, Symbol(Symbol.iterator): function]  "010-" : 예제의 정규 표현식 패턴은 '숫자-' 형태의 문자를 찾는 패턴이다. "010-"은 정확히 거기에 일치한다. 즉 첫번째 인자는 정규 표현식 패턴에 일치하는 문자열이 넘어온다. "010" : 얘는 어떻게 넘어온걸까? 위에 말했든 정규 표현식 패턴은 "010-"에 일치한다. "010"은 일치한 문자열 내에서 캡쳐된 문자열이 넘어온다. ?:는 캡쳐하지않는다는 의미로 내부에있는 (\d+)에 캡쳐된 문자열만 넘어오게되어 "010"이 인자로 전달된 것이다. 0 : 대상 문자열에서 정규 표현식의 일치한 문자가 나타나는 인덱스이다. "010-1234-1234" : 대상 문자열이 넘어온다. callee, Symbol : arguments에 기본적으로 담겨오는 인자들이므로 설명은 생략한다.

해당 예제는 대상 문자열 내에서 정규 표현식에 일치하는 문자열을 전부 탐색하는 전역 탐색이다. 때문에 해당 패턴에 일치하는 "010-", "1234-" 가 한번씩 콜백 함수를 호출시키게된것이다. 콜백을 이용해 -를 지워보자.

var phoneNumber = "010-1234-1234";
var pattern = /(?:(\d+)-)/g;

console.log(phoneNumber.replace(pattern, function(){
    return arguments[1];
}));

2. match

var phoneNumber = "010-1234-1234";
var pattern = /(?:(\d+)(-))/g;

phoneNumber.match(pattern);

대상 문자열에서 패턴에 일치하는 문자열을 배열로 반환해 준다.

3. exec

정규 표현식 객체(RegExp)에서 지원하는 API로 exec 이 있다.

var phoneNumber = "010-1234-1234";
var pattern = /(?:(\d+)(-))/g;

pattern.exec(phoneNumber);

위 다른 메서드들과 호출 객체가 다른점에 유의하자. replace, match는 string의 메서드들이지만 exec는 RegExp의 메서드이다.

exec은 배열을 리턴하는데

[패턴에 일치하는 문자열, [캡쳐된 문자열...]]

형태의 배열이 리턴되게 된다. 예제를 실행시켜보면 전역 탐색임에도 불구하고 첫번째 탐색결과인 "010-"만 리턴하는걸 볼 수 있다. exec의 특이점으로는 내부 상태를 갖고있다는 점이다. 무슨 말인지 모르겠으면

var phoneNumber = "010-1234-1234";
var pattern = /(?:(\d+)(-))/g;

pattern.exec(phoneNumber);
pattern.exec(phoneNumber);

실행시켜보면 두줄의 결과가 서로 다름을 알 수 있다. 문자열을 치환하는 경우라면 replace()를 사용하면 되겠지만 치환이 아니라 일치하는 문자열마다 반복적인 행위를 해야하는 경우라면 exec()이 유용할듯 하다.