regex-visual-debugger

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

当用户出现以下情况时启用：

提供需要调试的正则表达式模式
询问“为什么我的正则表达式不生效？”
需要解释某一正则表达式模式
想要针对字符串测试正则表达式
要求在不同正则风格间转换（Python、JS等）
需要正则表达式模式建议
提及正则表达式或模式匹配

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)

分析正则表达式模式
- 解析正则表达式结构
- 识别每个组成部分（分组、量词、字符类）
- 检查常见语法错误
- 针对指定的正则风格验证语法正确性
提供通俗易懂的自然语言解释
- 逐段分解模式
- 解释每一部分的匹配规则
- 描述模式的整体行为
- 说明量词的贪婪特性
- 解释捕获分组与非捕获分组的区别
可视化分解
- 分层展示模式结构
- 高亮显示分组与分支结构
- 标注字符类与范围
- 标记锚点与边界
针对示例测试
- 测试提供的测试字符串
- 展示匹配与不匹配的结果
- 高亮显示匹配的部分
- 解释匹配成功或失败的原因
- 展示捕获分组的内容
识别常见问题
- 未转义的特殊字符
- 错误的量词使用
- 贪婪与非贪婪模式问题
- 锚点位置错误
- 未闭合的分组
- 不同正则风格间的不兼容性
生成测试用例
- 创建应该匹配的字符串
- 创建不应该匹配的字符串
- 包含边缘情况
- 测试边界条件
提出改进建议
- 更高效的模式写法
- 可读性更强的替代方案
- 性能优化建议
- 边缘情况处理方案
正则风格转换
- Python（re模块）
- JavaScript
- Perl
- Java
- .NET
- PHP（PCRE）

Output Format

输出格式

markdown

undefined

markdown

undefined

Regex Analysis:

pattern

正则表达式分析:

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"

该模式匹配[描述]:

```
^
```
- 字符串起始位置
```
[A-Z]
```
- 一个大写字母
```
\d{3}
```
- 恰好3个数字
```
$
```
- 字符串结束位置

整体说明: 匹配类似"A123"、"Z999"这样的字符串

Visual Structure

可视化结构

^                 - Start anchor
[A-Z]            - Character class (uppercase letters)
\d{3}            - Digit, exactly 3 times
$                 - End anchor

^                 - 起始锚点
[A-Z]            - 字符类（大写字母）
\d{3}            - 数字，恰好出现3次
$                 - 结束锚点

Test Results

测试结果

✅ Matches

✅ 匹配成功

```
A123
```
→ ✓ Full match
```
Z999
```
→ ✓ Full match

```
A123
```
→ ✓ 完全匹配
```
Z999
```
→ ✓ 完全匹配

❌ No Match

❌ 匹配失败

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

```
a123
```
→ ✗ 小写字母'a'不匹配[A-Z]
```
A12
```
→ ✗ 仅2个数字（需要3个）
```
A1234
```
→ ✗ 数字过多

Capture Groups

捕获分组

Group 1:
```
[captured text]
```
Group 2:
```
[captured text]
```

分组1:
```
[捕获的文本]
```
分组2:
```
[捕获的文本]
```

Issues Found

发现的问题

⚠️ Issue 1: Pattern is too restrictive

Problem: Doesn't handle lowercase letters
Fix: Use
```
[A-Za-z]
```
instead of
```
[A-Z]
```

⚠️ 问题1: 模式限制过于严格

问题: 无法处理小写字母
修复方案: 使用
```
[A-Za-z]
```
替代
```
[A-Z]
```

Suggested Improvements

建议的改进版本

regex

undefined

regex

undefined

More flexible version

更灵活的版本

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

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

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

**修改点**:
- 新增对小写字母的支持
- 将`{3}`改为`{3,5}`，支持3-5个数字

Generated Test Cases

生成的测试用例

Should Match

应该匹配的字符串

A123
Z999
B456

A123
Z999
B456

Should NOT Match

不应该匹配的字符串

1ABC    (starts with digit)
ABCD    (no digits)
A12     (too few digits)

1ABC    (以数字开头)
ABCD    (无数字)
A12     (数字数量不足)

Flavor-Specific Notes

特定风格说明

JavaScript: [any JS-specific notes] Python: [any Python-specific notes]

JavaScript: [JavaScript相关说明] Python: [Python相关说明]

Conversion to Other Flavors

转换为其他风格

JavaScript

javascript

const pattern = /^[A-Z]\d{3}$/;
const match = str.match(pattern);

javascript

const pattern = /^[A-Z]\d{3}$/;
const match = str.match(pattern);

Python

python

import re
pattern = r'^[A-Z]\d{3}$'
match = re.match(pattern, string)

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

undefined

当前复杂度: O(n)
无回溯问题
考虑使用非捕获分组:
```
(?:...)
```
以提升性能

undefined

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

用户: "为什么这个正则表达式无法匹配邮箱:

\w+@\w+\.\w+

?" 回复: 分析模式→说明它仅能匹配简单邮箱→展示测试用例（无法匹配"user+tag@domain.co.uk"）→指出问题（不支持特殊字符、多级域名）→提供改进后的模式→生成全面的测试用例

用户: "解释这个正则表达式:

^(?:(?: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]?)$

" 回复: 分解模式（IP地址匹配器）→解释每个组成部分→展示它能匹配有效的IP地址（每个段0-255）→提供测试用例→可视化结构

用户: "将这个Python正则表达式转换为JavaScript:

(?P<name>\w+)

" 回复: 识别命名捕获分组（Python特性）→转换为JavaScript等效写法→解释差异→展示两种风格的写法及使用示例

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

始终使用边缘情况测试正则表达式
先以通俗易懂的语言解释
展示具体示例（而非仅理论）
高亮每个模式的常见陷阱
同时提供正向和负向测试用例
考虑性能影响
标注特定风格的特性
可能的话建议更简洁的替代方案
使用非捕获分组提升性能
正确转义特殊字符
明确说明大小写敏感性
若相关，测试Unicode字符