Regular Expressions in JavaScript don't support the single-line mode
JavaScript, Regular Expressions, WebdesignToday, while working on a gadget involving some client-side development I have discovered that JavaScript doesn't support the single-line mode for Regular Expressions (Regex). Now why is that bad?
What is the Regular Expression Single-line mode?
As you know Regular Expressions work with patters. Using various metacharacters you can match pieces of a text string. One of such characters is a "." (dot) which by default matches any character except newline characters (\n on *nix and \r\n on Windows).
Now imagine that you have a multiline string like:
<div id="wrapper"> <h2>Title</h2> <div id="content"> Lorem ipsum </div> </div>
and you want to grab the contents of the content div. Normally you would use the following Regex:
<div\s*id="content">.*</div>
In this case however the match would be empty because of the newline characters. In many programming languages the Regular Expression engine allows you to match the expression in the Single-line mode where the "." (dot) matches every character including newline character.
XRegExp
Looking on the Internet on how to activate the Single-line mode in JavaScript will lead you to the Overview Of JavaScript Regex page at Fire Studios. According to the information on that page you can use the "/s" switch to activate the single-line mode in JavaScript Regex. The problem is, that the "/s" doesn't work and as soon as you use it, you will get a JavaScript parsing error. I have tested this in both Internet Explorer 7 and Firefox 3 and both browsers act the same. So is it even possible to run JavaScript Regular Expressions in the Single-line mode?
Looking on the Internet for a solution I have stumbled upon the XRegExp: An Extended JavaScript Regex Constructor by Steven Levithan. Steven has noticed the same problem as I and decided to provide some functionality to fill the gap among which supporting the "/s" switch.
Alternatives
Depending on what you want to do, you can download the XRegExp and use it in your project. Personally, all I wanted to have is the ability of running an expression in the Single-line mode, and therefore have decided to modify the regex I was using.
Looking at the Regex metacharacters you will find among others \s (white space) and \S which is equivalent of [^\s] (non-whitespace). Combining these two together into [\s\S] allows you to match any character including the newline character. The Regex should then look like:
<div\s*id="content">[\s\S]*</div>
Summary
JavaScript doesn't support Regular Expressions in Single-line mode as well as other very useful Regex concepts (like named matches for example). While there are many libraries available on the Internet you can achieve similar results by being creative and knowing how the engine works and which functionality is there to help you.
August 21st, 2008 at 6:45 pm
Nitpick: can\'t you use the DOM to manipulate a div tag? Maybe you were dealing with something else–but if your example above matches what you were really trying to accomplish, I\'d point out that you could have found a solution to your problem using the DOM.
August 21st, 2008 at 7:20 pm
In the situation above you could use DOM of course if you were actually working on the current document. In case you're obtaining the HTML source of a page somewhere internet you get a string response. While you could still create a new instance of DOMDocument and do the processing, creating and running a Regex is much less code and easier to maintain IMHO.
August 24th, 2008 at 4:27 pm
If you use the latest XRegExp ( http://stevenlevithan.com/regex/xregexp/ ) instead of the old version you linked to, you also get named capture and many other advanced regex features and cross-browser compatibility fixes.
August 24th, 2008 at 8:53 pm
Hey Steve, thanks for the update