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

17 |

18 | Regex Colorizer 19 | 20 | 21 | 22 |

23 |

Size: 3.8 kB min/gzip, with no dependencies
License: MIT

27 |

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

28 |

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

29 | 30 |

Examples

31 |

SSN, excluding invalid ranges

32 |

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

33 |

Quoted string, allowing escaped quotes and backslashes

34 |

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

35 | 36 |

Try it

37 |

38 |

39 |

Type a regex pattern

40 |

41 | 42 | 43 | Flag u (unicode) 44 | 45 |

46 | 47 | 48 |

Themes

49 |

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

50 |

51 | 52 | 53 | 54 | 55 |

56 |

57 |

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

58 | 59 |

In 2007, RegexPal was the first web-based regex tester with regex syntax highlighting. Regex Colorizer started out by extracting RegexPal's highlighting code into a standalone library. This theme uses all black text, because RegexPal's implementation used highlighted text underneath a textarea with a transparent background. The RegexPal theme doesn't uniquely distinguish the following: escaped literal tokens, backreferences, and character class boundaries.

60 | 61 |

62 | 63 |

More examples

64 |

Regex with errors

65 |

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.

66 |

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

69 |

Octals and backreferences

70 |

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:

71 |

72 |

\+ Escapes are backreferences if num <= capturing groups
 73 | \1 \8 \9 \10 \k<1> \k<name>
 74 | \+ Octals: leading 0 extends length
 75 | \11 \100 \1234 \01234 \00123 \0 \00 \00000 \377 \400
 76 | \+ Non-octal digits
 77 | \18 \80 \90
 78 | \+ Leading 0 in character class doesn't extend length
 79 | [ \1234 is the same but not \0123; no backrefs \1 ]
 80 | \+ Capturing groups can appear after their backrefs
 81 | (1)(2)(?<name>3)(4)(5)(6)(7)(8)(9)(10)

82 |

83 | 84 | 85 | Flag u (unicode) 86 | 87 |

88 | 89 | 90 |

Some other examples of contextually-aware highlighting:

91 |

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.

95 | 96 |

Usage

97 |

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

98 |

import {colorizeAll, colorizePattern, loadStyles} from 'regex-colorizer';
 99 | 
100 | // Don't run this line if you provide your own stylesheet
101 | loadStyles();
102 | 
103 | // Highlight all elements with class `regex`
104 | colorizeAll();
105 | 
106 | // Or provide a `querySelectorAll` value for elements to highlight
107 | colorizeAll({
108 |   selector: '.regex',
109 | });
110 | 
111 | // Optionally provide flags
112 | colorizeAll({
113 |   // Flags provided in `data-flags` attributes will override this
114 |   flags: 'u',
115 | });
116 | 
117 | // You can also just get the highlighting HTML for a specific pattern
118 | element.innerHTML = colorizePattern('(?<=\\d)', {
119 |   flags: 'u',
120 | });

121 | 122 |

In your HTML:

123 |

<p>
124 |   This regex is highlighted inline:
125 |   <code class="regex">(?&lt;=\d)\p{L}\8</code>.
126 | 
127 |   And here's the same regex but with different rules from flag u:
128 |   <code class="regex" data-flags="u">(?&lt;=\d)\p{L}\8</code>.
129 |   <!-- Can include any valid flags. Ex: data-flags="gimsuyd" -->
130 | </p>

131 | 132 |

Output:

133 |

134 |

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

141 |

142 | 143 | 155 |