We just shipped a small but genuinely useful update to the Regex Tester: the Explain tab's rows are now hover-linked to the pattern input box, so you can see exactly which fragment of your pattern each row is talking about — and the reverse, too. Here's what changed and how to use it.
What's new in the Explain tab?
Short answerThe Explain tab's piece-by-piece breakdown table is now hover-linked to the pattern box above it. Hover a row and the exact fragment of your pattern it describes lights up inline, right inside the pattern input; hover a highlighted fragment in the pattern box and the matching row lights up back in the Explain tab.
The Explain tab itself isn't new — it's always broken a regex pattern down into individual pieces with a plain-language description next to each one. What's new is the connective layer on top: instead of reading a row's text and then manually scanning the pattern string to figure out which characters it's referring to, the tool now shows you directly. The pattern field gets a subtle inline highlight over the matching substring the moment you hover the corresponding row, and it clears the moment you move away.
It's a small addition in terms of surface area, but it removes a specific kind of friction: cross-referencing a written description against a dense string of regex punctuation by eye, especially once a pattern has several nested groups sitting close together.
How does the hover sync actually work?
Short answerIt works in both directions and needs no clicks — just move your cursor over a row in the Explain tab's table to highlight the matching piece in the pattern box, or hover the pattern text itself to highlight the row that explains it.
Say you're testing a URL-matching pattern and the Explain tab lists a row for the optional protocol group, another for the domain name portion, and another for the extension. Instead of counting parentheses to figure out where the "domain name" row's boundaries actually fall in the raw text, you hover that row and watch the corresponding slice of the pattern light up in place. Move the mouse to the next row down, and the highlighted slice shifts to the next fragment over — a much faster way to sanity-check that your mental model of the pattern's structure matches what the tool is actually seeing.
Two entry points, same feature: whether you start by hovering the Explain tab or hovering the pattern box, you land on the same synced pair — a table row and a highlighted fragment. Use whichever direction matches how you're already reading the pattern at that moment.
Nothing about this changes what the breakdown rows say, and it doesn't touch match highlighting in your test string, the Replace preview, or the generated code in the Generate Code tab — it's purely about locating a fragment inside the pattern text itself, faster.
Why does this matter for a messy or unfamiliar pattern?
Short answerOnce a pattern packs several groups, escaped characters, and quantifiers close together, visually locating which exact characters a given explanation refers to becomes genuinely error-prone by eye — a highlight that snaps directly to the substring removes that guesswork entirely.
Take a hypothetical pattern like (?:\+1[\s-]?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4} — a loose stand-in for a US-style phone number matcher, used here purely as an illustration. Reading that string cold, it's easy to lose track of exactly where the optional country-code group ends and the area-code group begins, especially with optional parentheses and separators packed in between. Hovering the Explain tab's row for "optional country code" now shows you, unambiguously, the exact span of characters it's describing — no manual counting of escaped parens required.
- Faster onboarding to someone else's pattern — when you inherit a regex you didn't write, hovering row by row is a quick way to build a mental map of the pattern without reading it cold.
- Catching mis-scoped groups — if hovering a row highlights a wider or narrower span than you expected, that's an immediate signal something about the group boundaries isn't what you assumed.
- Editing with more confidence — before deleting or rewriting a fragment, hovering its row first confirms exactly which characters you're about to touch.
A quick example to try
Open the Regex Tester, keep the default email pattern in the box, switch to the Explain tab, and hover down the rows one at a time. Watch how the highlighted span in the pattern box moves left to right as you go — the username character class, the @ literal, the domain class, the dot, and the extension class each light up in turn. Then try it in reverse: hover directly over a piece of the pattern text and watch the matching row highlight in the Explain tab below. It takes about ten seconds to get a feel for, and it's the kind of feature you'll likely keep using without thinking about it once it clicks.
Frequently asked questions
What exactly is new in the Regex Tester's Explain tab?
The Explain tab rows are now hover-linked to the pattern input box. Moving your mouse over a row in the piece-by-piece breakdown highlights the exact fragment of your pattern that row describes, directly inside the pattern field — and hovering a highlighted fragment in the pattern box highlights the corresponding row back in the Explain tab. Nothing about the breakdown's content changed; this is a navigation and comprehension feature layered on top of it.
Do I need to click anything to use the new hover highlight?
No clicking is required — it's a pure hover interaction. Move your cursor over any row in the Explain tab's table and the matching piece of your pattern lights up automatically in the pattern box above. Move the cursor away and the highlight clears. It's designed to be a glance-and-check habit you can use while scrolling down the breakdown, not an extra step you have to remember to trigger.
Does the hover sync work in both directions?
Yes. You can start from either side: hover a row in the Explain tab to see where it lands in the pattern, or hover a piece of the pattern text itself to see which row in the Explain tab describes it. Which direction is more useful depends on the task — starting from the pattern is handy when you're staring at a confusing symbol and want its explanation, and starting from the Explain tab is handy when you're reading the breakdown top to bottom and want to confirm each row's boundaries.
Why does highlighting the exact fragment matter more than just reading the row text?
Reading a row's plain-language description tells you what a piece of a pattern means, but not precisely where that piece starts and ends in the raw pattern string — especially once nested groups, escaped characters, and quantifiers are packed close together. Seeing the literal substring highlighted removes that ambiguity in one glance, instead of requiring you to manually count parentheses and count characters to locate the boundary yourself.
Does this new hover feature change how matches or capture groups are computed?
No — it's purely a visual aid layered on the existing Explain tab and pattern input; it doesn't change how your pattern is compiled, how matches are highlighted in your test string, or what appears in the Matches, Replace, or Generate Code tabs. It only makes the relationship between a breakdown row and the pattern text easier to see while you're editing.