正则可视化, 把 regex 模式画成铁路图 + 匹配状态机, 捕获组高亮, 对照测试字符串实时联动。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
Email alice@toolora.info or bob@example.com to ping us.
模式与测试字符串都不离开这个浏览器标签页。
这个工具能做什么
免费的浏览器端正则可视化工具。粘贴任意 JavaScript 正则表达式, 你会同时看到三样东西。第一是铁路图 (railroad diagram), 仿 regexper.com 风格, 把模式转成从左到右的"火车轨道", 分支表示 或 (alternation), 闭环表示重复 (quantifier), 虚线框圈住每一个 捕获组、命名组、前后向断言。第二是字符级匹配视图, 把测试字符串 里的每个字按状态着色 (匹配 / 捕获 / 未命中), 一眼能看清哪几个 字真的被吃进去了, 又分别属于哪个捕获组。第三是示范库, 内置 10 个工程上最常见的正则 (邮箱 / URL / IPv4 / 中国身份证 18 位 / 中国大陆手机号 / ISO 日期 / HTML 标签 / 十六进制颜色 / 美国邮编 / 强密码), 一键载入, 零门槛对照学习。底层是自己手写的递归下降 解析器 (没有外挂 regexp-tree / regexper 运行时, 整包 30 KB 以内), 完整覆盖 JS 正则语法: 锚定 (^ $ \b \B), 字符类 (含取反 和方括号), 点号 (.), 六种转义类别, 四类量词的贪婪 / 懒惰修饰, 或 (|), 捕获组 / 非捕获组 / 命名组, 正负前向后向断言, 数字和 命名两种反向引用, \xNN 和 \u{...} 形式的码位转义。当正则写错的 时候, 错误信息会精确指出第几个字符出问题, 而浏览器原生 SyntaxError 永远只会说"Invalid regular expression", 我们会告诉你"第 14 位 的括号没闭合"。"下载 SVG"按钮把铁路图打包成独立的 .svg 文件, 可以直接拖到 Notion 页、飞书文档、PR 描述、Slack 评审里, 排版 不会糊。100% 浏览器本地, 不调外部 API, 不打点, 不留痕, 你的正则模式和测试串绝对不会离开这个标签页。配合"正则测试" (要数匹配数 / 看替换效果时用) 和"正则速查表" (忘了某个转义 含义时用) 一起使用更香。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 30 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
正则可视化 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
30 秒读懂同事 PR 里那条 200 字符的正则
同事提了个 PR, 邮箱校验正则写成 `^(?:[a-zA-Z0-9_'^&\/+-])+(?:\.(?:[a-zA-Z0-9_'^&\/+-])+)*@(?:[a-zA-Z0-9-])+(?:\.(?:[a-zA-Z0-9-])+)*$`, 让你 review 是否正确。直接粘进可视化, 铁路图一屏内说清结构: 本地部分允许字符列表 + 可重复的点分子段, @ 号, 域名允许字符 + 可选的点分子域名, 结尾锚定。30 秒就能理解, 比对着字符串干瞪 10 分钟强多了。还能把 Unicode 本地名、IDN 域名这种边界 case 粘到测试字符串里, 看它真匹不匹得到, 而不是只凭感觉。
教组里新人理解"捕获组"到底是个啥
带的新人听过"捕获组"这个名词但从来没建立直觉。打开可视化, 载入邮箱示例, 指着琥珀色的虚线框, 这几个就是捕获组。改一下 测试字符串, 让他看粉红色高亮随着真实捕获到的字符移动。一个 抽象概念被画成了可以看见的东西, 他以后就不会再把"捕获组" 和"字符类"搞混了 (这是新手最常见的 bug 之一)。
把正则图嵌进设计文档
你写设计文档讲路由层的 URL 解析器, 评审里一定会有人问"什么样的 slug 算合法"。打开可视化, 粘上你的 slug 正则, 点"下载 SVG", 把图拖进文档里。看的人有一份图形规格, 而不是一长串看不懂的转义。 SVG 自包含, 文档导出 PDF / 群里转发 / 邮件附件都不会糊。
调试"为啥这条正则匹不到我期望的字符串"
你写了 `^https?:\/\/\w+\.com` 想抓 .com 域名, 但 `https://sub.toolora.com` 死活不被识别。把两者都粘进可视化, 字符级视图立刻告诉你: 测试字符串里只有 `sub` 这一段被高亮, 因为 `\w+` 在 `sub` 后期望紧接着 `.com`, 实际碰到了 `.toolora` 就断了。铁路图把结构画出来后, 你立刻看出问题: `//` 和 `\.com` 之间还需要一个"可重复的点分子域名"组。没有 可视化, 这种 bug 能吃掉你一下午。
给团队内部正则培训准备材料
内部组织正则培训。把 10 个示范正则挨个载入, 截图铁路图 (或者 直接点下载 SVG), 一份课件就成了。每张图都讲清楚"结构"而不是 "语法", 这恰好是市面上绝大多数正则教程跳过的那道坎。
常见踩坑
反斜杠转义两次。从 JavaScript 字符串字面量 `"\\d+"` 复制来时, `\\` 是源码层面表示一个反斜杠, 在可视化里直接写 `\d+` 一个反斜杠就行。我们的解析器不走字符串字面量这一层, 第二个 `\` 就是字面意义上的 `\`, 再接什么就是非法转义。
把 `[abc-]` 当成"范围", 但末尾的 `-` 其实是字面减号。字符类方框上的标签写的就是括号里实际的内容, 如果你写 `[a-z-A-Z]` 以为是两段范围, 看方框标签会看到内容是 `a-z` 一段、字面 `-` 一个、`A-Z` 又一段。把短横线移到开头或者用反斜杠转义就解决。
把 `(?:...)` 和 `(?=...)` 搞混。前者是非捕获组 (只是分组不占用捕获号), 后者是正向前瞻 (一个零宽断言)。可视化里方框上标的就是真正的含义, 一眼能区分。
以为 `\b` 是"任意空白符"。不是, `\b` 是零宽单词边界 (断言"这里是字母 / 数字 / 下划线和非这类字符之间", 不消耗任何字符)。粉色菱形的形状本身就是视觉提示, 锚定不吃字符。要匹配空白用 `\s`。
写出"能匹配空串"的模式 (`a*`、`()`、`(?:.*)?`)。这种模式会让全局匹配循环在同一个位置原地打转。可视化的匹配数会做防护避免死循环, 但铁路图里会显示"最小次数 = 0 + 内部能匹配空", 这就是警报信号。
隐私说明
所有计算 (递归下降解析正则、构造 AST、SVG 布局与渲染、字符级匹配 着色) 全部在你这个浏览器标签页里用 JavaScript 跑。你输入的模式、 测试字符串、生成的图、下载的 SVG, 一个字节都不会传到服务器, 不 打点、不分析。打开 DevTools → Network 标签, 边输入边看, 一个 请求都没有, 这就是凭据。第一次加载完后, 离线也能用。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。