RegexPlay Pro 现代正则可视化与调试工作台

RegexPlay Pro · 现代正则表达式可视化图谱与实时调试沙盒

项目简介

RegexPlay Pro 是一款专为全栈工程师、数据分析师与前端开发者打造的纯前端现代化正则表达式可视化解析、实时测试与代码生成工作台。

系统内置 SVG 铁路图/语法状态机动态流向渲染、多色捕获分组实时高亮、捕获组明细分解表格、动态反向引用替换沙盒 与 多语言（JavaScript / Python / Go / Java / Rust）代码一键生成器，帮助开发者极速排查正则缺陷，提升文本处理与模式匹配效率。

---

核心功能亮点

1. SVG 铁路状态机图谱 (Railroad AST Visualizer)

• 自动词法分词解析正则表达式模式，将复杂的正则逻辑转化为清晰直观的 SVG 轨道图，分支、分组与字符类流向一目了然。

2. 多色捕获组实时匹配高亮

• 实时监听文本输入并执行高效切片匹配，采用 5 级优雅主题色彩对不同 Match 区域进行分色高亮。

• 自动防死循环保护（零宽匹配自增保护）。

3. 捕获组明细解构与详细度量

• 清晰展示完整匹配（Full Match）、匹配区间字符范围（Index Range）以及 $1, $2 等捕获组提取详情。

4. 正则替换沙盒 (Replace & Substitution)

• 支持使用 $1, $2 等反向引用对目标文本进行实时替换并即时查看输出结果。

5. 多语言代码一键生成

• 支持一键导出 JavaScript、Python、Go、Java、Rust 等 5 种主流语言的标准正则实现代码片段。

---

系统架构设计

架构模块说明

• 解析与校验层：编译原生 RegExp 实例，进行语法诊断与标志位管理。

• 状态机图谱层：基于分词 AST 构建可视化 SVG 铁路图。

• 沙盒匹配层：实现文本实时高亮切片与多捕获组提取。

• 替换与导出层：提供动态替换计算与跨语言工程代码模板。

---

开源仓库与在线体验

• 代码仓库：https://gitcode.com/wdxb/regex-visual-pro

• 使用方法：直接在浏览器中打开 index.html 即可开始体验！
• 项目地址：开发者作品展览馆 https://gallery.developer.huaweicloud.cn/gallery/00-96e07ccff6000