regex-tester

# 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

```bash
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:

```bash
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.