[开源自荐] 写了个正则工具 RegexStudio:可视化铁路图、 ...

作者：poppub 发布时间：昨天 21:06

地址： https://regexstudio.com/zh
仓库： https://github.com/chenz24/regex-studio
起因很简单：工作中经常要写正则，但每次写完都不太确定——这段表达式到底匹配了什么？换个引擎还能不能跑？边界 case 有没有漏？现有的在线工具大多只给匹配结果，不帮你理解过程。于是 vibe 了这么一个小工具：铁路图可视化结构、逐步调试器追踪匹配过程、兼容性检查覆盖多引擎差异，把正则从「黑盒」变成可理解、可调试的东西。同时内置了互动式教程和挑战模式，边学边练，快速上手。
能做什么

🎨 基于 CodeMirror 6 的语法高亮编辑器，实时着色 + 错误提示

🔍 多行测试文本，匹配结果即时高亮，捕获组详情一目了然

🚂 铁路图可视化，把正则结构渲染成直观的线路图

🧩 可视化节点编辑器，通过操作节点构建/修改正则，降低入门门槛

📖 逐段解释面板，自动把正则翻译成人话

🐞 逐步调试器，像调试代码一样单步执行匹配过程，回溯路径和捕获组快照全可视化

✅ 测试用例面板，维护多组测试字符串，标记期望匹配/不匹配，一键批量跑

⚠️ 兼容性提示，静态检查当前正则在目标引擎里是否支持

🌐 引擎切换：JavaScript / PCRE / Python / Java / Go / .NET / Rust / Ruby 等

🛠️ 一键生成 10 种语言代码片段：JS/TS 、Python 、Java 、Go 、Rust 、C#、PHP 、Ruby 、Swift 、Kotlin

🔁 替换预览，实时对比替换前后差异

🎓 交互式教程，覆盖基础、量词、分组、环视、实战模式，带实时校验

🏆 挑战模式，内置练习题自动判分

📚 常用模式库 + 内置语法速查表

🔗 URL 分享：正则、flags 、测试文本、替换内容全编码进链接，复制即分享

🌍 中英双语，路由级别区分语言

🌗 亮色 / 暗色主题

⚡ SSR 友好，首屏即渲染

技术栈
TanStack Start (SSR) + React 18 + Tailwind CSS + shadcn/ui + Radix UI
CodeMirror 6 + Zustand + Paraglide JS (i18n) + Biome
部署在 Cloudflare Workers 上
Bug 和建议都欢迎回帖或去 GitHub issue 。
如果觉得有点用，顺手点个 ⭐ ： https://github.com/chenz24/regex-studio
谢谢各位 V 友 :)