Regex Playground
Type a pattern and watch it highlight matches as you go.
IntermediateWeb appDev tool8–16hAI-buildable 5/5no setup
A pattern in one field, test text in another, and every match highlighted live with its capture groups broken out. The genuinely useful addition over existing tools is an explanation panel that describes each token of the pattern in words.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Pattern and flags input with live validation
- Matches highlight in the test text as you type
- Capture groups are listed per match, named groups included
- A match counter shows totals
- Invalid patterns report the error rather than clearing the highlight
- A token-by-token explanation of the pattern renders alongside
The interesting part
- Highlighting overlapping and zero-length matches without breaking layout
- Guarding against a pattern that hangs the tab
- Tokenising a regex well enough to explain it
Once it works
- Add a replace preview
- Add a library of common patterns
- Warn about patterns at risk of catastrophic backtracking
Suggested stack
reacttypescripttailwind