Regex Tester & Match Visualizer — Free HTML CSS JS Snippet

Regular expressions are notoriously hard to read back once written, and the fastest way to understand what a pattern actually matches is to see it highlighted against real text. This snippet is a real JavaScript regex engine test — every match shown is produced by the browser's native RegExp object running against whatever pattern and test string you type, not a simulated or approximated matcher.

Building the RegExp object safely

run() reads the raw pattern string and flags string, sanitizes the flags with flags.replace(/[^gimsuy]/g, '') to strip anything that isn't a real JavaScript regex flag, and wraps construction in a try/catch. An invalid pattern — unbalanced parentheses, a bad character class, an unsupported escape — throws a SyntaxError from the RegExp constructor itself, and the caught message is shown directly in the status line. This is real engine validation, not a hand-rolled regex syntax checker, so the error messages match exactly what you'd see in a browser console.

Forcing the global flag for iteration, without changing displayed intent

To collect *all* matches rather than just the first, the exec loop needs the g flag set internally regardless of whether the user's flag string includes it — otherwise RegExp.exec() always returns the same first match forever, since without g it doesn't advance lastIndex. The snippet handles this by constructing the working regex with flags.includes('g') ? flags : flags + 'g', so iteration always works, while the status line still displays the flags exactly as the user entered them for accuracy. The classic infinite-loop trap with zero-length matches (a pattern like x* matching an empty string) is guarded against explicitly: if (m.index === re.lastIndex) re.lastIndex++, which forces the engine to advance past a zero-width match instead of looping forever at the same index — combined with a hard 500-iteration cap as a second line of defense.

Building the highlighted view without a virtual DOM

The highlight box is built by walking the matches in order and slicing the original text between them: everything from the cursor position up to the next match's .index is escaped and appended as plain text, then the matched substring itself is wrapped in a <mark>, alternating a CSS class between two colors so adjacent matches remain visually distinguishable even when they're touching. escapeHtml() is applied to every literal text slice before insertion — including inside the <mark> — so a test string containing literal < or & characters can never break the rendered markup or, worse, get interpreted as HTML.

Capture groups shown per match

Each match object from exec() is an array where index 0 is the full match and indices 1+ are capture groups in pattern order; match.length > 1 signals the pattern actually has capture groups. The per-match detail row lists each group's value, explicitly labeling an unmatched optional group as (undefined) rather than silently omitting it — an easy source of confusion when a pattern has an optional group like (foo)? that sometimes doesn't participate in a given match.