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

1. 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

1. 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

1. Visual Breakdown

- Show pattern structure hierarchically - Highlight groups and alternations - Indicate character classes and ranges - Mark anchors and boundaries

1. 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

1. Identify Common Issues

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

1. Generate Test Cases

- Create strings that should match - Create strings that should NOT match - Include edge cases - Test boundary conditions

1. Suggest Improvements

- More efficient patterns - More readable alternatives - Performance optimizations - Edge case handling

1. 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 "user+tag@domain.co.uk") → 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