Regex Colorizer

• Current version: 1.0.0
• Size: 5 KB min/gzip, no dependencies
• License: MIT

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.

Examples

SSN, excluding invalid ranges

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

Quoted string, allowing escaped quotes and backslashes

(["'])(?:\\?.)*?\1

Try it

Type a regex pattern

Themes

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

Default No BG RegexPal RegexBuddy

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)
((((?:((a))b.c)d|x(y){65536,}))))
[^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
(1)(2)(?<name>3)(4)(5)(6)(7)(8)(9)(10)

Some other examples of contextually-aware highlighting:

• Named backreferences: \k<name> is only a named backreference if a named capture (with any name) appears in the regex, even if after or enclosing the backreference (so \k<n>(?<n>a) and (?<n>a\k<n>) are valid; the backreferences match empty strings). If there aren't any named captures in the pattern, it's an escaped literal \k<name> and matches the string 'k<name>'. When named backreference behavior is triggered, \k is an error if it's not a complete token (ex: (?<n>)\k), if the name is invalid (ex: (?<n>)\k<1>), or if there's no corresponding named capturing group anywhere in the regex (ex: (?<n>)\k<m>). Flags u and v enforce named backreference mode handling in all cases. And of course, named backreference syntax doesn't apply within character classes ([\k<n>]).
• Hypens in character classes: Hyphens only create ranges when preceded and followed by rangeable tokens in the correct order that aren't themselves part of ranges. Hyphens are literal - characters in other cases. Compare [----] (one range-hyphen), [-----] (still one), and [------] (two). Also handles errors (ex: [z-a] and [\w-z], but [\w-]) and metasequences or escaped literals that are used in valid ranges (ex: [a-\z] and [\b-\cZ], but [\cZ-\b]). Note: Within a character class, \b matches a backspace control character rather than a word boundary. Flag v changes the rules to make any unescaped, non-range hyphens in character classes become errors, and enables -- as the set substraction operator.

Usage

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
RegexColorizer.loadStyles();

// Highlight all elements with class 'regex'
RegexColorizer.colorizeAll();

// Or provide a querySelectorAll value for elements to highlight
RegexColorizer.colorizeAll({
  selector: '.regex',
});

// Optionally provide flags
RegexColorizer.colorizeAll({
  // 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:

<p>
  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>.
</p>
<!-- Can include any valid flags. Ex: data-flags="gimsuyd" -->

Output: