Regex Tester
Test regular expressions with live match highlighting, capture groups, and substitution preview.
The Regex Tester runs a JavaScript RegExp against a test string with live highlighting, numbered matches, named groups, and a substitution preview. Enter the pattern, toggle any of the six flags (Global is on by default), type the Test String, and the Test tab updates on every keystroke — matches light up in the highlighter while "Matches (n)" lists each hit with Index: n and, when present, Groups: name: value. Invalid patterns surface the engine's own error message in a destructive Alert.
Three tabs cover the workflow: Test for inspection, Replace for a "$1, $2, …" substitution with a Result preview, and Cheatsheet with 34 pattern rows — each with an "Insert" button that appends tokens like \d, \b, or (?=...) to your current pattern instead of replacing it. Matches and replaced text copy out or download as regex-matches-{ts}.txt / replaced-{ts}.txt. Everything is pure RegExp in the browser; nothing is sent anywhere.
How it works
The page duplicates the lib logic locally: testRegexLocal builds new RegExp(pattern, flags), loops regex.exec when Global (g) is set, or runs a single exec without it, then collects match.groups (named captures) and match.indices when available (falling back to index..index+len). replaceRegexLocal uses String.replace. A highlighter segments the test string around match ranges with bg-brand/30 so overlaps stay readable.
Matching recomputes via useMemo on every pattern, flag, or text change — no submit button. The Cheatsheet reads FLAG_DESCRIPTIONS and CHEATSHEET from lib/regexTester.ts, and Insert appends to the existing pattern box. escapeRegex in the lib escapes .*+?^${}()|[]\ for literal matching when you need it. Invalid patterns throw from the RegExp constructor and render as the Alert message (or "Invalid regular expression").
How to use
- Enter the pattern under "Pattern" (placeholder "Enter regular expression...").
- Toggle flags — "Global (g)" (default on), "Ignore case (i)", "Multiline (m)", "DotAll (s)", "Unicode (u)", "Sticky (y)".
- Enter the "Test String" (placeholder "Enter test string...").
- Read the Test tab: highlighted matches in the pane plus the "Matches ({n})" list with per-match cards ("Match {i}", "Index: {n}", optional "Groups: {k}: {v}").
- Handle invalid patterns via the destructive Alert showing the RegExp engine's message.
- Switch to the Replace tab, type a replacement using $1, $2 group refs, and preview "Result".
- Open the Cheatsheet and click "Insert" (title "Insert pattern") to append patterns like \d, \b, or (?=...) to the pattern box.
- Copy or download matches (regex-matches-{ts}.txt) or the replaced text (replaced-{ts}.txt).
Tips
- Without Global (g) only the first match is found — the single-exec path runs once, so Matches (1) is expected.
- Named groups appear under each match card as "Groups: name: value", making (?<year>…) captures easy to verify.
- The Cheatsheet Insert button appends to your current pattern rather than replacing it — build up complex expressions token by token.
- escapeRegex in lib/regexTester.ts escapes .*+?^${}()|[]\ when you need to match a literal string instead of a pattern.
Regex Tester FAQ
Does it support named groups?
Yes — match.groups is copied into each result and shown in the Groups line of the match card.
Why do I only get one match?
With the Global flag off, testRegexLocal takes the single regex.exec path instead of looping until null.
What flags are supported?
All six: g, i, m, s, u, y (FLAG_OPTIONS), defaulting to "g".
Is my text sent anywhere?
No — matching is pure RegExp evaluation in the browser; both pattern and test string stay local.
Credits
- JavaScript RegExp — Native RegExp exec/replace used in RegexTesterPage and lib/regexTester.ts