What did you make?

EzRegex is a regex playground that explains patterns in plain English while you type.
You enter a pattern, paste in some text, and it highlights matches live while breaking
the pattern into chunks with a card explaining each one. Hover a chunk and its
explanation lights up, and the other way around too.

The idea came from FBLA. I was competing in Mobile Application Development and one of
the rubric criteria was input validation. I knew regex and I was using it, but when I
sat down to explain it to a judge who might not be technical, I couldn’t. It took me a
while to work out a one line explanation that actually landed. A few weeks later I’d
forgotten it.

That stuck with me. If I had to fight that hard to explain it once, what about
developers who touch regex every day? Nobody is memorizing those patterns. And the
stakes aren’t small. Input validation is what stands between a login form and a SQL
injection. It’s the thing you skip when it’s annoying, and skipping it is how sensitive
pages break.

So I built the tool I wished I’d had while prepping for that event.

What was challenging?

The tokenizer. I went in thinking “split the regex up, write a description for each
piece, done.” That is not what it is. I ended up writing the front end of a small
compiler: walking the pattern character by character, holding state, deciding where one
token ends and the next begins, handling escapes inside character classes where the
rules change, attaching quantifiers backwards onto whatever they modify.

A few rules ate hours on their own. A ] as the first character inside a character
class is a literal ], not a closing bracket. A hyphen at the start or end of a class
is literal, but in the middle it’s a range. {2,6} never stands alone, it belongs to
the token before it. Every one of those I had to discover and then handle.

Rendering had its own problem. The highlighting is a transparent textarea sitting on top
of a div, and if the two layers wrap text even slightly differently, the highlights
slide off the words. Getting both layers to agree on every metric that affects wrapping
took longer than I want to admit.

What are you proud of?

The tokenizer is mine. I used AI for scaffolding and boilerplate and I say so openly in
the repo, but the parser is hand written and I understand every line of it. That was the
whole point of building this instead of just using regex101.

I’m also proud that I scoped it. Recursive group expansion would have been cool. I cut
it, wrote down why in the roadmap, and shipped. Knowing what isn’t in v1 turned out to
matter as much as knowing what is.

How to test it

Open https://ezregex.vercel.app. There’s no signup or install, and nothing you type
leaves your browser.

If you don’t have a pattern in mind, use the examples panel on the left. There are 29 of
them across validation, extraction, cleanup, and code. Click one and it loads with a
test string that actually produces matches.

Worth trying:

• Type your own pattern and watch the breakdown update on every keystroke
• Hover a coloured chunk in the pattern to see its card highlight, then hover a card to
  see the chunk highlight back
• Break a pattern on purpose ([a- works) to see the error handling
• Toggle the flags and switch themes
• Shrink the window under 768px, the panels turn into tabs and the examples become a
  drawer

Source and build notes: https://github.com/Yuv1s/EzRegex