toggle menu

[JavaScript] 자바스크립트에서 정규식을 사용해 치환하기

2013. 3. 27. 18:52 JavaScript
정규식 자체는 어느 언어나 동일하기 때문에 한번 익혀놓으면 편리하게 사용할 수 있지만, 이 정규식을 실행하는 함수나 메서드는 언어마다 모두 다르기 때문에 언어마다 모두 각각 기억해두어야 한다.

자바스크립트 역시 독자적인 방식이 존재한다.
정규식에 익숙한 사람이라면 아래 정도만 알면 충분히 자바스크립트에서도 정규식을 활용할 수 있을 것이다.


var aaa = "korea.html";

aaa.replace(/(.+)\.html/,"\\$1");
//결과 : "\korea"

aaa.replace(/(.+)\.html/,"$1");
//결과 : "korea"

/.+\.html/.test(aaa);
//결과 : true



자바스크립트 정규식에서 Multiline을 제대로 지원하지 못하는 문제가 있는데, 예를들어 /<div>.*<\/div>/i 로 매칭을 시키고 싶어도 여러 줄에 걸쳐있으면 i flag 가 동작하지 않으며 . 에 리턴은 잡히지 않아 제대로 매칭이 되지 않는 문제이다. 이때는 아래와 같이 약간의 꼼수를 동원해야 한다. 


//여러 줄에 걸쳐 있는 내용을 매칭할 때, 아래는 동작하지 않는다.
multilineString.replace(/<div>(.+)<\/div>/i, "$1");

//아래와 같이 해야한다.
multilineString.replace(/<div>([\s\S]+)<\/div>/i, "$1");



자바스크립트의 정규식 문법에 대한 보다 정리된 글은 MDN(모질라 개발자 네트워크)의 문서에서 찾을 수 있다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

정규식 패턴을 미리 테스트할 때는 아래 사이트를 사용하면 편리하다.

regex101.com


JavaScript 관련 포스팅 더보기