regex-tester

name	regex-tester
description	Live browser-based regex testing tool with match highlighting, capture group inspection, pattern explanation, and URL sharing
triggers	["regex tester","test regex","regex pattern","live regex","capture groups","regex flags","regex replace"]

regex-tester Skill

When to Use

Use this skill when you need to:

• Test a regular expression against sample text and see matches highlighted in real time
• Inspect capture groups and named groups from each match
• Understand what each token in a pattern does via the built-in explanation view
• Use common pre-built patterns from the pattern library (email, URL, date, UUID, etc.)
• Share a regex with test string via URL to colleagues or issue trackers
• Test replace templates using $1/$2/$<name> references

Prerequisites

• Node.js 20+
• pnpm 9+
• A modern browser (Chrome 90+, Firefox 90+, Safari 15+)

Quick Start

cd regex-tester
pnpm install
pnpm dev        # starts Vite dev server on http://localhost:5173
pnpm build      # production build to dist/
pnpm preview    # preview production build

The app is a pure SPA with no backend. All state lives in the URL hash and localStorage.

Core Features

Pattern Input

The pattern input field accepts raw pattern text without delimiters. Flags are toggled separately via the flag buttons (g, i, m, s, u, v).

• Invalid patterns show a red border and display the syntax error inline
• The input debounces 150ms before triggering a re-match
• Pattern and flags are synced to the URL hash on every change

Flag Reference

Flag	Name	Effect
g	Global	Find all matches, not just the first
i	Case-insensitive	Treat uppercase and lowercase as equal
m	Multiline	^ and $ match start/end of each line
s	Dotall	. matches newline characters
u	Unicode	Enable full Unicode matching
v	Unicode Sets	Extended unicode sets (ES2024), cannot combine with u

Match Highlighting

Matches are highlighted inline in the test area. When capture groups are present each group is shown in a distinct color (up to 6 group colors cycle). The color legend is shown in the capture groups panel.

Clicking any highlighted match scrolls the Groups panel to that match's row.

Capture Groups Panel

Displays a table with one row per match and one column per capture group. Columns are labeled by number ($1, $2, ...) or by name if the pattern uses named groups ((?<year>...)).

Named groups show the name as the column header instead of the index.

Replace Mode

Toggle the Replace tab to enter a replace template. The template supports:

• $1, $2, ... for positional groups
• $<name> for named groups
• $& for the full match
• $`` for the text before the match
• $' for the text after the match

The result panel shows the full substituted string with replacements highlighted.

Pattern Explanation

The Explain tab provides a token-by-token breakdown of the current pattern. Each token shows:

• The raw token text
• A plain-English description
• Whether it is a quantifier, anchor, group, character class, or literal

Example for (\d{4})-(\d{2})-(\d{2}):

• ( -- Start of capture group 1
• \d -- A digit (0-9)
• {4} -- Exactly 4 of the preceding element
• ) -- End of capture group 1 (captures the year)
• - -- Literal hyphen
• (\d{2}) -- Capture group 2: exactly 2 digits (month)
• - -- Literal hyphen
• (\d{2}) -- Capture group 3: exactly 2 digits (day)

Pattern Library

The Library tab contains pre-built patterns organized by category:

Category	Examples
Email	Basic email, strict RFC 5322 email
URL	HTTP/HTTPS URL, URL with path
Date/Time	ISO 8601 date, US date, 24-hour time
Numbers	Integer, decimal, negative, currency
Identifiers	UUID v4, hex color, IPv4 address, MAC address
Text	Capitalized word, slug, non-empty string
Code	Semantic version, variable name, HTML tag

Clicking a pattern loads it into the editor. Patterns can be copied without loading.

History

The last 50 used patterns are stored in localStorage keyed by pattern+flags. The History tab shows the list sorted by most recent. Clicking a history entry loads it. Individual entries can be deleted or the full history cleared.

URL Sharing

The full state (pattern, flags, test string up to 2000 chars, replace template) is encoded as base64 JSON in the URL hash. Sharing the URL with another user restores the exact session.

The Share modal provides:

• A copy-to-clipboard button
• Toggle for which parts to include (pattern, flags, test string, replace template)
• A QR code for mobile handoff
• A "Copy as Markdown" button that produces a fenced code block with the pattern

URL format:

https://yourhost/#p=BASE64_STATE

The state object is { pattern, flags, test, replace } encoded as btoa(JSON.stringify(state)).

Settings

Setting	Default	Description
Match count in real time	on	Show count while typing (before debounce settles)
Highlight colors for groups	on	Distinct colors per capture group
Font size	13px	Editor and result font size
Default flags	g	Flags pre-selected on new session
Save to history automatically	on	Add each pattern to history on use
Max history entries	50	Oldest entries are removed when limit exceeded
Warn on potential ReDoS	on	Alert when pattern may cause catastrophic backtracking
Max match count	10,000	Stop after N matches to prevent freezing

Settings are persisted to localStorage.

Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter / Cmd+Enter	Run match (if real-time disabled)
Ctrl+Shift+C / Cmd+Shift+C	Copy share URL
Ctrl+/ / Cmd+/	Toggle Explain panel
Escape	Close any open modal
Tab (in pattern input)	Insert literal \t

ReDoS Warning

The tool detects common catastrophic backtracking patterns and shows a warning banner:

• Nested quantifiers: (a+)+, (a*)*
• Alternation with overlapping branches on long input: (a|a)+

The warning does not block use but recommends reviewing the pattern before using in production.

Deployment

The app builds to a static dist/ folder and can be served from any static host:

pnpm build
# serve dist/ with any static file server
npx serve dist

No environment variables are required for the base app.

Optional environment variable for the share URL base:

VITE_SHARE_BASE_URL=https://regex.yourteam.com

If not set, window.location.origin is used.