JavaScript中替代indexOf匹配含动态路径URL的方法

indexOf只能做精确字符串匹配，没法处理带动态参数的路径，所以得把动态路径转换成正则表达式来做匹配。下面是具体实现方案：

实现思路 #

1. 将数组中的动态路径（如/arrival/view/:job_order_number）转换为正则表达式，把:参数名替换成匹配URL参数的规则（比如[^/]+，匹配除斜杠外的任意字符）
2. 遍历路径数组，用每个正则去测试目标URL，只要有一个匹配就返回true

代码实现 #

// 将路径转换为正则表达式的工具函数
function pathToRegex(path) {
  // 替换动态参数占位符，转义斜杠等正则特殊字符，添加首尾锚点确保完整匹配
  const regexPattern = path
    .replace(/:[^/]+/g, '([^/]+)') // 把:xxx替换成匹配非斜杠字符的分组
    .replace(/\//g, '\\/'); // 转义路径中的斜杠
  return new RegExp(`^${regexPattern}$`);
}

// 校验目标URL是否匹配数组中的任意路径
function checkPathMatch(targetPath, pathArray) {
  return pathArray.some(path => {
    const regex = pathToRegex(path);
    return regex.test(targetPath);
  });
}

// 测试示例
const children = [
  '/booking-success',
  '/back-request',
  '/arrival/view/:job_order_number'
];

console.log(checkPathMatch("/booking-success", children)); // 输出true
console.log(checkPathMatch("/arrival/view/1233", children)); // 输出true
console.log(checkPathMatch("/arrival/view/abc", children)); // 输出true（支持字符串参数）
console.log(checkPathMatch("/arrival/view/123/extra", children)); // 输出false（避免多余路径匹配）

自定义匹配规则 #

如果需要限制参数类型（比如只允许数字），可以修改pathToRegex里的替换规则：

// 只匹配数字参数
function pathToRegex(path) {
  const regexPattern = path
    .replace(/:[^/]+/g, '(\\d+)') // 把:xxx替换成匹配数字的分组
    .replace(/\//g, '\\/');
  return new RegExp(`^${regexPattern}$`);
}

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