I Built a Real-Time Regex Tester in the Browser (Capture Groups, Flags, No Libraries)

#javascript #regex #webdev #devtools

Writing regular expressions without instant visual feedback is like writing code without a compiler — you're guessing until you run it.

I built a Regex Tester that highlights matches in real time as you type, with full capture group support and flag toggles.

👉 https://regex-tester-dfe.pages.dev

The Problem With Most Regex Tools

Most online regex testers work fine, but they require a button press to see results. You type your pattern, fill in test text, then click "Match" or "Test." When you're iterating quickly on a complex pattern, that friction adds up.

Real-time feedback changes how you work with regex.

What It Does

Live Match Highlighting

The moment you type a character in the pattern field, matches highlight in the test string. No button needed.

Test string: "Hello World 2026-06-17"
Pattern: \d{4}-\d{2}-\d{2}

→ "2026-06-17" highlights instantly

Multiple matches get distinct colors so you can see at a glance whether your pattern catches the right things.

Capture Group Inspector

See exactly which text each group captured:

Pattern: (\d{4})-(\d{2})-(\d{2})
Test:    "Today is 2026-06-17"

Match #1: "2026-06-17"
  Group 1: "2026"
  Group 2: "06"
  Group 3: "17"

Named capture groups ((?<year>\d{4})) work too — essential for log parsing and data extraction patterns.

Flag Toggles (With Instant Preview)

Toggle flags with one click; results update immediately:

Flag	Effect
`g`	Global — match all occurrences
`i`	Case-insensitive
`m`	Multiline — `^`/`$` match per line
`s`	Dotall — `.` matches newlines
`u`	Unicode mode

Pattern: \d+  |  Test: "abc 123 def 456"

g off → only "123" highlights
g on  → both "123" and "456" highlight

Match Count & Error Display

Total match count updates live. If your pattern has a syntax error, you see it immediately:

Pattern: (unclosed group
→ "Invalid regex: Unterminated group"

Real-World Examples

Extract IPs from logs:

Test:    "2026-06-17 12:34:56 [ERROR] Request from 192.168.1.100"
Pattern: (\d{1,3}\.){3}\d{1,3}

→ "192.168.1.100" highlighted

Parse URL segments:

Test:    "https://example.com/users/42/profile"
Pattern: /users/(?<id>\d+)/(?<page>\w+)

Group id: "42"
Group page: "profile"

Validate email format:

Pattern: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
Flags: i

"user@example.com" → match ✅
"not-an-email"     → no match ❌

Under the Hood

The highlight system uses contenteditable with span-based coloring — no framework, pure vanilla JS. The key challenge was preserving cursor position on every keystroke while re-rendering the highlighted DOM. The PRD I gave the AI agent explicitly forbade execCommand and required cursor position preservation.

Built with AI-assisted implementation, validated with 37/37 passing tests.