RegexplainRegex Explainer

Paste a regular expression and Regexplain tells you in plain English what every piece does. It highlights what the pattern matches in your own text, and when you hover over any piece, it lights up exactly the text that piece grabbed. There's an optional Claude mode for a friendlier walkthrough.

JavaScript flavor only, since the browser engine does the matching. The parser treats Unicode property escapes and the v flag too loosely. Claude mode's prompt builder and parser are tested with fixtures, but the live API was never called during the build.

This one spans the gap. I started it on June 23 right after QR Studio. The parser and a first UI existed, with 79 tests. Then I stopped building for almost three months.

When I came back on September 19 for the bulk one-shot night, Claude Code finished it to the shared brief in about 0.4 hours. That pass grew the tests from 79 to 132. It added hover-to-matched-text, a 12-pattern library, copy as JavaScript or Python, Markdown export, and share links. It moved the port from 5182 to 5112 to fit the brief's 5100 plus project number rule. It also moved the Claude call from a server proxy to a direct browser call with a settings panel, which turned serve.mjs into a plain static server. And it stripped every em dash out of the old copy.

My direction: the local explainer works fully with no key, Claude is an upgrade layer, and the hover feature is what makes it a teaching tool.

• An explainer needs a real parser, not a regex over the regex. Once every node in the tree carries its start and end position, error carets, token coloring, and hover ranges all come almost free.
• To show what one sub-pattern matched, we didn't write a matcher. The core wraps that piece in a new capture group, bumps any numeric backreference that shifts, and reads the span back with the d flag. The highlight is always what the real engine did.
• Same-position edits need a defined order. Claude Code caught its own bug here: (a)\1b came out as ((a)\21b because an insertion and a replacement landed on the same index. Replacements go first now, with a regression test.
• JavaScript and Python regex differ in small, breaking ways (named groups, backreferences, no g flag). A snippet generator has to convert, not just re-quote.
• Treat model output as untrusted even in a friendly feature. Ask for JSON, parse defensively, handle a refusal, and re-check any test string the model suggests against the real matcher before showing it.

It picked up the tested-core pattern from #9 to #11: one regex.js shared by the page and verify.mjs. The "local first, Claude on top, parse defensively, verify what you can" setup is the same shape the AI features in #15 and #16 took that same night. One gotcha also repeated: Git Bash heredocs mangled backslashes in a test script here, and shell heredocs broke edits again in #13 and #15 the same night. The fix each time was writing the file with the file tool instead.

I'd make the parser flavor-aware for PCRE and Python syntax, and add a step-through view of backtracking, since catastrophic backtracking is the regex failure people understand least.