Add Regex Tester tool

[02karthik]

What is this tool?

Regex Tester — a single-file, fully offline tool for anyone who works with text: developers, writers planning a find-and-replace, or note-takers building a search pattern. Type a regular expression, toggle its flags, and every match lights up in your test string in real time, with capture groups broken out below.

It's built entirely on the browser's own RegExp engine, so nothing leaves the device — a natural companion to the existing text utilities in the catalog (Diff Checker, Text Case Converter, Word Counter).

What it does

• Live matching — matches highlight as you type in either the pattern or the test string (debounced).
• Flag toggles — g i m s u y as pill buttons; the active flags mirror into the /…/gi delimiter display.
• Capture groups — each match card lists numbered ($1, $2, …) and named groups, marking empty vs. no-match cases distinctly.
• Honest validation — a valid pattern reports in green; a syntax error shows the engine's message inline and outlines the field in red, without clearing your text.
• Safe by construction — the highlighted preview is built with DOM text nodes (never innerHTML), so test input can't inject markup. A MAX_MATCHES guard and a zero-length-match lastIndex nudge keep the global loop from spinning.
• Seeds a worked example (an email pattern with two capture groups) on first run so the tool — and its catalog card — is self-explanatory; state persists in namespaced localStorage.

Checklist

• It's a single file: regex-tester/index.html with all CSS + JS inline.
• It is fully self-contained / offline — no remote fonts, scripts, styles, images, fetch, or import.
• No analytics, trackers, or phone-home behavior.
• Added a screenshot at screenshots/regex-tester.webp (via npm run screenshot regex-tester).
• Registered the tool in tools.json (dir matches the folder name).
• Bumped the top-level catalogVersion (24 → 25).
• For an update to an existing tool: N/A — this is a new tool (version: 1).
• npm run validate passes locally.

Notes for reviewers

• Colours are fully tokenised — every value (including match highlights, the valid/error states, and the focus rings) goes through a :root token with a prefers-color-scheme: dark override, so it flips cleanly between light and dark. Verified in both schemes.
• Single accent preserved: match highlights and all UI chrome use only Hillnote azure; the red/green in the status line are the design system's semantic error/success families, used only for state feedback.
• The tools.json card color is #7c3aed (violet) — picked to stay distinct from neighbouring gallery entries; it does not relate to the tool's own azure accent.
• Catastrophic backtracking on a pathological user-supplied pattern is a known limitation of every in-browser regex tester (a single exec can't be interrupted in JS); the match-count and iteration guards bound the common cases.

---

Generated by Claude Code