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

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

Enter fullscreen mode Exit fullscreen mode

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"

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Parse URL segments:

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

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

Enter fullscreen mode Exit fullscreen mode

Validate email format:

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

"[email protected]" → match ✅
"not-an-email"     → no match ❌

Enter fullscreen mode Exit fullscreen mode

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.

Try It

Whether you’re building log parsers, input validators, or text extractors — keep this one bookmarked:

👉 Regex Tester — devnestio

All tools: https://devnestio.pages.dev

Runs entirely in your browser. No data leaves your machine.