Regex Colorizer GitHub

Regex Colorizer adds syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. Supports the JavaScript regex flavor (ES2022) with web reality. In other words, it highlights regexes as web browsers actually interpret them.

The API is simple. Just give the elements that contain your regexes (pre, code, or whatever) the class regex, and call RegexColorizer.colorizeAll(). See more usage examples below.


SSN, excluding invalid ranges


Quoted string, allowing escaped quotes and backslashes


Try it

Type a regex pattern


Several themes are available as stylesheets. Select an option to change the highlighting styles for all regexes on this page.

You don't need to add a stylesheet to your page to use the default theme. Just run RegexColorizer.loadStyles().

More examples

Regex with errors

Errors are highlighted in red, along with some edge cases that can cause cross-browser grief. Hover over errors for a description of the problem.

Oh h\i+?? x*+ |? a{1,2}b{2,1} ||(?:a|b)* (?<=(?<name>x))* (?>n)
[^1-59-6\b-\cX.a-\w!---] \xFF \x \uFF\uFFFF\z\v\1\\\

Octals and backreferences

Regex syntax is complex, so Regex Colorizer's highlighting is contextually aware of things that happen forward and backward in the regex. Here's an example of contextually-aware highlighting of regex syntax:

\+ Escapes are backreferences if num <= capturing groups
\1 \8 \9 \10 \k<1> \k<name>
\+ Octals: leading 0 extends length
\11 \100 \1234 \01234 \00123 \0 \00 \00000 \377 \400
\+ Non-octal digits
\18 \80 \90
\+ Leading 0 in character class doesn't extend length
[ \1234 is the same but not \0123; no backrefs \1 ]
\+ Capturing groups can appear after their backrefs

Some other examples of contextually-aware highlighting:


Here's how to highlight all your regexes like you can see running on this page:

// Don't run this line if you provide your own stylesheet

// Highlight all elements with class 'regex'

// Or provide a querySelectorAll value for elements to highlight
  selector: '.regex',

// Optionally provide flags
  // Flags provided in data-flags attributes will override this
  flags: 'u',

// You can also just get the highlighting HTML for a specific pattern
element.innerHTML = RegexColorizer.colorizePattern('(?<=\\d)', {
  flags: 'u',

In your HTML:

  This regex is highlighted inline:
  <code class="regex">(?&lt;=\d)\p{L}\8</code>.

  And here's the same regex but with different rules from flag u:
  <code class="regex" data-flags="u">(?&lt;=\d)\p{L}\8</code>.
<!-- Can include any valid flags. Ex: data-flags="gimsuyd" -->


This regex is highlighted inline: (?<=\d)\p{L}\8. And here's the same regex but with different rules from flag u: (?<=\d)\p{L}\8.