Regular expressions can be wondrous and terrifying beasts. Back in 2008, I hadn't been exposed to regexes much in my previous life as a Windows developer. So I wrote this applet to help me learn regexes (as well as immerse myself in JavaScript). Recently I refurbished it to take advantage of jQuery, and also to upgrade some of its functionality.

This runs completely in the browser, and lets you test out regex expressions against your own text. It makes use of JavaScript's RegExp.exec method to find all the matches.

The UI for the page is rather straightforward. When you click [Analyze], it runs the regex against the text and displays the result. Each time you analyze the text, it also checks the text and the regex against their respective history lists. If either of those text fields (or the I/G/M options) have changed, it adds that snapshot to the history list. It displays Back & Forward buttons to let you go back to earlier versions to play with again.

The only really difficult part of the project was in building the highlighted result string. When you call RegEx.exec, it tells you which substrings matched the regex & which ones matched the subexpressions, but it doesn't tell you where in the source text these matches are! If it did, you'd know where to place the necessary html codes to form the highlights. But at least it places the matches in order in the array. With that information as a clue, we're able to walk through the source text, searching for each matched string in turn. At that point we append onto the result string the "prefix" highlight html, the matched text, then the "suffix" html, and then any plain text in the source that comes before the next match.

I think it's an ugly solution, but I don't see any more elegant way of building up the result string given the limitations of the info that Regex.exec returns. It might be a bit simpler to call String.replace with the regex, passing it a callback function to process each match in turn. Then the callback would return (htmPrefix + sMatched + htmSuffix). However, there is no callback available to highlight the subexpressions. We'd still have to search the matching text to locate those ourselves. Besides, you can't programmatically tell String.replace which attributes (i/g/m) to use—and we want the user to be able to specify these on the fly. So I think this code is as simple as it's ever going to get.