Regex Visual Debugger

Regex Visual Debugger

Interactive regex testing, explanation, and debugging tool.

When to Use This Skill

Activate when the user:

• Provides a regex pattern to debug
• Asks "why isn't my regex working?"
• Needs a regex pattern explained
• Wants to test regex against strings
• Asks to convert regex between flavors (Python, JS, etc.)
• Needs regex pattern suggestions
• Mentions regular expressions or pattern matching

Instructions

• Analyze the Regex Pattern
• Parse the regex structure
• Identify each component (groups, quantifiers, character classes)
• Check for common syntax errors
• Validate regex syntax for specified flavor

• Provide Plain English Explanation
• Break down pattern piece by piece
• Explain what each part matches
• Describe overall pattern behavior
• Clarify quantifier greediness
• Explain capture groups vs. non-capturing groups

• Visual Breakdown
• Show pattern structure hierarchically
• Highlight groups and alternations
• Indicate character classes and ranges
• Mark anchors and boundaries

• Test Against Examples
• Test provided test strings
• Show what matches and what doesn't
• Highlight matched portions
• Explain why matches succeed or fail
• Show capture group contents

• Identify Common Issues
• Unescaped special characters
• Incorrect quantifiers
• Greedy vs. non-greedy issues
• Anchor misplacement
• Unclosed groups
• Flavor-specific incompatibilities

• Generate Test Cases
• Create strings that should match
• Create strings that should NOT match
• Include edge cases
• Test boundary conditions

• Suggest Improvements
• More efficient patterns
• More readable alternatives
• Performance optimizations
• Edge case handling

• Convert Between Flavors
• Python (re module)
• JavaScript
• Perl
• Java
• .NET
• PHP (PCRE)

Output Format

# Regex Analysis: `pattern`

## Plain English Explanation
This pattern matches [description]:
- `^` - Start of string
- `[A-Z]` - One uppercase letter
- `\d{3}` - Exactly 3 digits
- `$` - End of string

**Overall**: Matches strings like "A123", "Z999"

## Visual Structure

^ - Start anchor

[A-Z] - Character class (uppercase letters)

\d{3} - Digit, exactly 3 times

$ - End anchor

## Test Results

### Matches
- `A123` -> Full match
- `Z999` -> Full match

### No Match
- `a123` -> Lowercase 'a' doesn't match [A-Z]
- `A12` -> Only 2 digits (needs 3)
- `A1234` -> Too many digits

## Capture Groups
1. Group 1: `[captured text]`
2. Group 2: `[captured text]`

## Issues Found
**Issue 1**: Pattern is too restrictive
- **Problem**: Doesn't handle lowercase letters
- **Fix**: Use `[A-Za-z]` instead of `[A-Z]`

## Suggested Improvements

More flexible version

^[A-Za-z]\d{3,5}$

**Changes**:
- Added lowercase letters
- Changed `{3}` to `{3,5}` for 3-5 digits

## Generated Test Cases

### Should Match

A123

Z999

B456

### Should NOT Match

1ABC (starts with digit)

ABCD (no digits)

A12 (too few digits)

## Flavor-Specific Notes
**JavaScript**: [any JS-specific notes]
**Python**: [any Python-specific notes]

## Conversion to Other Flavors

### JavaScript

const pattern = /^[A-Z]\d{3}$/;

const match = str.match(pattern);

### Python

import re

pattern = r'^[A-Z]\d{3}$'

match = re.match(pattern, string)

## Performance Notes
- Current complexity: O(n)
- No backtracking issues
- Consider using non-capturing groups: `(?:...)` for better performance

Examples

User: "Why doesn't this regex match emails: \w+@\w+\.\w+?"

Response: Analyze pattern → Explain it matches simple emails only → Show test cases (fails on "[email protected]") → Identify issues (doesn't handle special chars, multiple TLDs) → Provide improved pattern → Generate comprehensive test cases

User: "Explain this regex: ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"

Response: Break down pattern (IP address matcher) → Explain each component → Show it matches valid IPs (0-255 per octet) → Provide test cases → Visualize structure

User: "Convert this Python regex to JavaScript: (?P<name>\w+)"

Response: Identify named capture group (Python feature) → Convert to JS equivalent → Explain differences → Show both versions with usage examples

Best Practices

• Always test regex with edge cases
• Explain in plain English first
• Show concrete examples (not just theory)
• Highlight common pitfalls for each pattern
• Provide both positive and negative test cases
• Consider performance implications
• Note flavor-specific features
• Suggest simpler alternatives when possible
• Use non-capturing groups for performance
• Escape special characters properly
• Be explicit about case sensitivity
• Test with Unicode characters if relevant