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 "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