Regex Tester Workbench with Live Match Highlighting

Regular expressions are one of those tools every programmer needs and almost nobody learns properly — most students copy patterns from the internet without understanding what each token does, then spend hours debugging why a pattern fails. Existing online testers show matches but rarely explain the pattern itself, and none combine testing, substitution preview and teaching in one place. This workbench closes that gap. As you type, matches are highlighted live in the test string with per-match timing, a match inspector breaks out every capture group (numbered and named), a substitution panel previews replacements with $1/$2 and named-group syntax, and an explainer pane translates each token of the pattern into plain English. A curated pattern library (email, IPv4, URL, Indian mobile numbers, strong passwords, hex colours, quoted strings) gives starting points, and a cheat sheet covers the full syntax. The whole thing runs as a single-file web app with zero dependencies.

1. The user types a pattern and test text; the app compiles the pattern with the selected flags using the JavaScript regex engine.
2. On every keystroke, the engine runs a match-all pass over the test string and records each match's index, text and groups.
3. Match spans are re-rendered as highlighted segments in the test-text view, alternating two highlight colours.
4. The inspector lists each match with its character span and expands every capture group, including named groups.
5. The substitution panel applies the user's replacement string to the same match set and previews the result with changed regions marked.
6. The explainer tokenizes the pattern (escapes, classes, groups, quantifiers, anchors, lookarounds) and renders a plain-English card per token.
7. Library entries load a vetted pattern plus matching sample text so each one demonstrates its use immediately.

Tech stack:

• HTML5 · CSS3 · JavaScript (ES6)
• JavaScript RegExp engine (V8)
• matchAll with capture-group introspection
• Custom pattern tokenizer for the explainer
• Single-file app, zero dependencies
• Git

• [Live match highlighting] Matches light up in the test text as you type, with alternating colours per match and a per-run timing readout.
• [Match inspector] Every match expands to show its span, full text and all capture groups — numbered ($1, $2) and named ($) — with their values.
• [Substitution preview] Type a replacement with $1/$2 or $ references and see the transformed text instantly, before copying it.
• [Token-by-token explainer] The pattern is parsed and each token (character classes, quantifiers, groups, lookaheads, anchors) is explained in plain English.
• [Pattern library] Eight ready-made, tested patterns — ISO dates, emails, IPv4, URLs, Indian mobiles, strong passwords, hex colours, quoted strings — each loading its own sample text.
• [Cheat sheet] A quick-reference grid of regex syntax always one click away inside the app.
• [Flag toggles] Global, ignore-case, multiline, dotAll and unicode flags toggle live with one click.
• [Syntax error reporting] Invalid patterns show the engine's exact error message instead of failing silently.

• Complete single-file regex workbench application
• Curated pattern library (8 patterns with documentation)
• User guide (regex tutorial chapter using the workbench)
• Project report PDF (background, regex theory, engine notes, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (automata basics, greedy vs lazy, backtracking, groups)