地址： 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 友 :)
顺便夹带几个我之前写的小工具,有缘人随便看看:
- https://rename.tools —— 浏览器内批量重命名,支持正则
- https://crontab.cv —— 可视化 crontab 表达式
- https://easing.tools —— CSS 缓动曲线可视化
- https://open-awesome.com —— awesome-* 列表索引
Select Language