惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

小众软件
小众软件
博客园_首页
M
MIT News - Artificial intelligence
雷峰网
雷峰网
GbyAI
GbyAI
博客园 - 叶小钗
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
V2EX
S
SegmentFault 最新的问题
H
Help Net Security
Apple Machine Learning Research
Apple Machine Learning Research
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - 【当耐特】
V
Visual Studio Blog
月光博客
月光博客
G
Google Developers Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
腾讯CDC
云风的 BLOG
云风的 BLOG
美团技术团队
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
有赞技术团队
有赞技术团队

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I Built a Real-Time Regex Tester in the Browser (Capture ...
Dev Nestio · 2026-06-28 · via DEV Community

Dev Nestio

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.

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.