Regex Colorizer

Fork me on GitHub

Do you want RegexPal-style regex syntax highlighting on your webpages? This library takes care of it for you, so you can spend more time writing powerful regular expressions and less time deciphering them. Currently, JavaScript (with web reality) is the only supported regex flavor. Any regex features not supported by JavaScript are marked as errors, along with some edge cases that cause cross-browser grief.

The API is simple: just give your regexes the class "regex", call a couple functions (see below), and you're done. The syntax highlighting, however, is quite advanced, and handles all valid JavaScript regex syntax and errors. Errors are highlighted in red—hover over them for a description of the problem.

Sexy examples

SSN

^(?!000|666)(?:[0-6]\d{2}|7(?:[0-6]\d|7[012]))-(?!00)\d{2}-(?!0000)\d{4}$

ZIP codes

\b[0-9]{5}(?:-[0-9]{4})?\b

Regex with errors

Following are some examples of the kinds of syntax errors and cross-browser headaches that are detected and flagged in red. Hover over red text for a description of the error:

Hello+?? x*+ |? a{1,2}b{2,1} ||(?:a|b)* (?=x)* (?<=n) (((((((a)))b.c)d|x(y)z{65536,}))))
[1-59-6\b-\cX.a-\w!---] \xFF \x \uFF\uFFFF\z\v\\\

Themes

Source code

Here's the code running on this page to highlight all of the above regexes:

// Don't run this line if you provide your own stylesheet
RegexColorizer.addStyleSheet();

// Can provide a class name for elements to process (defaults to 'regex')
RegexColorizer.colorizeAll();

There is also a RegexColorizer.colorizeText() method that returns HTML with highlighting for the provided regex pattern string.

To see and test this regex highlighting as you type, check out my regex tester, RegexPal. Other hip things to do include following code updates or contributing on GitHub, posting feedback on my related blog post, and following me on the tweeter.