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

查看 49|回复 9
作者:poppub   
地址: 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-* 列表索引

    正则, 可视化, 调试器

  • vokins   
    感谢分享,好东西,收藏了(🙏ˊᗜˋ*)
    poppub
    OP
      
    @vokins 感谢支持!
    Vveeb   
    但是大佬,页面底部的项目 - GitHub 你放的链接是 github.com 不是你项目的链接🙈
    poppub
    OP
      
    @Vveeb 感谢提醒,改过来了😁
    Y25tIGxpdmlk   


    好用, 不过这里的选项能不能也汉化一下,虽然可以看懂。但是强迫症受不了
    poppub
    OP
      
    @Y25tIGxpdmlk ok.记下了
    vedevlei   
    都是很实用的工具
    SayHeya   
    可惜我现在都是 ai 写代码了,不然真的是以前一直找的东西
    poppub
    OP
      
    @Y25tIGxpdmlk 已修复
    @vedevlei thx !
    @SayHeya 是的,很多场景我们直接 ai 写了。这个工具主要是给一个可视化、可交互的 UI 。体验有些不同
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部