无需登录 数据私有 本地保存

URLPattern匹配测试器 - 现代路由规则

11
0
0
0

URLPattern 路由匹配测试器

测试现代URL模式匹配，支持命名参数、通配符、正则组和可选段。基于 W3C URLPattern 标准。

路径匹配仅匹配 pathname 部分；完整URL匹配包含协议、主机名等。

输入模式与测试URL后点击"执行匹配测试"查看结果

支持批量测试，每行一个URL

语法 说明 示例 匹配结果
:name 命名捕获组，匹配到下一个 / 或模式末尾 /users/:id /users/42 → id=42
* 通配符，匹配零个或多个字符（不跨越 /） /api/* /api/v1 → 0=v1
** 全局通配符，匹配零个或多个字符（包括 /） /static/** /static/js/app.js → 0=js/app.js
(regex) 正则表达式组，对捕获值进行约束 /users/:id(\\d+) 仅匹配数字ID，如 /users/123
{/pattern} 可选组，该部分可以不存在 /users{/:id} 匹配 /users 和 /users/42
{/pattern}? 非贪婪可选组 /blog{/:slug}? 优先匹配更短的路径

Q: 什么是 URLPattern？

URLPattern 是 W3C 制定的现代 URL 模式匹配标准 API，用于在 JavaScript 中定义和匹配 URL 模式。它提供了一种声明式的方式来匹配 URL 的各个组成部分（协议、主机名、路径、查询参数等），广泛应用于路由匹配、请求拦截、权限控制等场景。相比传统的正则表达式，URLPattern 语法更直观、更安全、更易维护。

Q: URLPattern 的浏览器兼容性如何？

截至 2024 年，URLPattern 已在 Chrome 95+、Edge 95+、Opera 81+ 中获得原生支持。Firefox 和 Safari 目前可通过 urlpattern-polyfill 获得完全兼容。本工具内置了 polyfill 自动检测与加载机制，确保在所有主流浏览器中都能正常使用。

Q: URLPattern 与 Express/path-to-regexp 的路由语法有何不同？

URLPattern 是浏览器原生标准，语法更加规范和安全。Express 的 :param 语法与 URLPattern 的命名组相似，但 URLPattern 额外支持通配符 **、正则约束 (regex) 和可选段 {/opt}。此外，URLPattern 可以匹配完整 URL（包括协议、主机名等），而不仅仅局限于路径。

Q: 如何在 Service Worker 中使用 URLPattern？

URLPattern 非常适合在 Service Worker 中进行请求路由。您可以在 fetch 事件监听器中使用 URLPattern 来匹配特定模式的请求，从而实现精细化的缓存策略、请求拦截和响应处理。例如：new URLPattern({pathname: '/api/*'}).exec(request.url)。

Q: 可选段 {/pattern} 在什么场景下有用？

可选段非常适合处理具有层级结构的 RESTful API 路径。例如 /users{/:id}/posts{/:postId} 可以同时匹配 /users/posts（获取所有用户的所有帖子）、/users/42/posts（获取用户42的帖子）和 /users/42/posts/101（获取特定帖子），一条模式覆盖多种路由变体。

Q: URLPattern 支持查询参数匹配吗？

是的，URLPattern 支持对查询参数（search）进行模式匹配。您可以使用 {search: '?'} 来匹配任意查询参数，或使用 {search: '?page=:pageNum'} 来提取特定查询参数的值。这使得 URLPattern 在处理带查询参数的 URL 时非常灵活。

Q: 如何调试 URLPattern 匹配失败的问题？

匹配失败通常由以下原因导致：①模式语法错误（检查括号、冒号是否正确）；②正则约束过于严格（如 \\d+ 不匹配字母）；③可选段的边界模糊；④模式与测试 URL 的协议/主机名不匹配。建议使用本工具逐步测试，观察语法预览和匹配结果来定位问题。

  • 前端路由匹配：在单页应用(SPA)中匹配客户端路由，提取路径参数。
  • Service Worker 缓存策略：根据 URL 模式决定缓存策略和资源响应方式。
  • API 网关路由：匹配和分发 API 请求到不同的后端服务。
  • 权限控制中间件：根据 URL 模式判断请求是否需要身份验证。
  • 爬虫URL过滤：匹配或排除特定模式的 URL 进行数据抓取。
  • 静态资源版本化：匹配带版本号的资源路径，实现缓存更新策略。
🔧 相关工具