[开源自荐] 写了个正则工具 RegexStudio:可视化铁路图、调试器、代码导出、交互式教程全都有

仓库： 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 友 :)

顺便夹带几个我之前写的小工具,有缘人随便看看:

https://rename.tools —— 浏览器内批量重命名,支持正则
https://crontab.cv —— 可视化 crontab 表达式
https://easing.tools —— CSS 缓动曲线可视化
https://open-awesome.com —— awesome-* 列表索引