如何针对URLPattern数组验证URL并提取参数？

当然可以。你可以遍历URLPattern数组，对目标URL依次匹配，找到第一个符合规则的项后提取参数；也可以批量验证所有规则的匹配情况。下面是具体实现：

原示例（中文注释版） #

// 包含两个数字参数的示例URL
const url = "https://example.com/app/api/v1/subscribers/1001/users/2001";

// 带有两个命名组的URLPattern示例
const urlPattern = new URLPattern({ pathname: "/app/api/v1/subscribers/:subscriberId/users/:userId" });

// 验证URL是否匹配规则
const urlValidate = urlPattern.test(url); // 返回true
// 提取URL中的参数
const urlExtract = urlPattern.exec(url); // 包含subscriberId和userId的分组对象

// 调试输出
console.log("URL:", url);
console.log("URL规则:", urlPattern.pathname);
console.log("验证结果:", urlValidate);
console.log("提取的参数:", urlExtract.pathname.groups);

// 将subscriberId转换为数字类型
const subscriberId = Number(urlExtract.pathname.groups.subscriberId);
// 将userId转换为数字类型
const userId = Number(urlExtract.pathname.groups.userId);

// 验证参数为有效数字（适合用于SQL查询场景）
if(subscriberId && userId) console.log("参数验证通过，可用于SQL查询。");

console.log("subscriberId:", subscriberId, "userId:", userId);

URLPattern数组实现方案 #

1. 匹配第一个符合规则的项（路由场景常用） #

找到第一个匹配的规则后立即停止遍历，适合路由匹配这类需要唯一匹配的场景：

// 目标URL
const targetUrl = "https://example.com/app/api/v1/subscribers/1001/users/2001";

// URLPattern规则数组
const patternArray = [
  new URLPattern({ pathname: "/app/api/v1/subscribers/:subscriberId/users/:userId" }),
  new URLPattern({ pathname: "/app/api/v1/posts/:postId/comments/:commentId" }),
  new URLPattern({ pathname: "/app/api/v1/products/:productId" })
];

// 遍历查找匹配规则
let matchedParams = null;
let matchedRule = null;
for (const pattern of patternArray) {
  if (pattern.test(targetUrl)) {
    matchedParams = pattern.exec(targetUrl).pathname.groups;
    matchedRule = pattern.pathname;
    break;
  }
}

if (matchedParams) {
  console.log("匹配到的规则:", matchedRule);
  console.log("原始提取参数:", matchedParams);
  
  // 统一转换参数为数字类型并验证
  const formattedParams = Object.fromEntries(
    Object.entries(matchedParams).map(([key, val]) => [key, Number(val)])
  );
  
  const allValid = Object.values(formattedParams).every(num => !isNaN(num));
  if (allValid) {
    console.log("参数格式验证通过");
    console.log("转换后参数:", formattedParams);
  }
} else {
  console.log("未找到匹配的URL规则");
}

2. 批量验证所有匹配规则 #

如果需要知道目标URL匹配了数组中的哪些规则，可以用这种方式：

const targetUrl = "https://example.com/app/api/v1/subscribers/1001/users/2001";
const patternArray = [
  new URLPattern({ pathname: "/app/api/v1/subscribers/:subscriberId/users/:userId" }),
  new URLPattern({ pathname: "/app/api/v1/subscribers/:subscriberId" }),
  new URLPattern({ pathname: "/app/api/v1/*" })
];

// 收集所有匹配的规则及参数
const allMatches = patternArray.map(pattern => {
  if (pattern.test(targetUrl)) {
    return {
      rule: pattern.pathname,
      params: pattern.exec(targetUrl).pathname.groups
    };
  }
  return null;
}).filter(Boolean); // 过滤未匹配项

console.log("所有匹配结果:", allMatches);

关键注意点 #

• 数组顺序影响匹配优先级：如果多个规则都能匹配同一URL，会优先匹配数组靠前的项
• 可以根据业务需求扩展参数校验逻辑，比如数字范围、格式合法性检查
• 批量匹配场景下，注意过滤掉未匹配的空值

内容的提问来源于stack exchange，提问作者suchislife801