JavaScript如何合并两个存在公共路径段的URL得到带参数的完整路径

实现思路 #

• 先拆分第二个URL的路径部分和查询参数部分，避免处理路径时带上参数导致匹配错误
• 把两个URL的路径都拆分为路径段数组，过滤掉空字符串消除开头/的影响
• 遍历找到两个路径段数组的最大公共匹配长度：即第一个路径的后缀和第二个路径的前缀的最长匹配长度
• 拼接路径：取第一个路径的全段 + 第二个路径从匹配长度之后的剩余段，拼接为完整路径，再追加拆分出来的所有查询参数即可

完整代码实现 #

function mergeUrl(a, b) {
  // 拆分第二个URL的路径和查询参数
  const [bPath, bSearch] = b.split('?')
  // 拆分路径为段，过滤空字符串消除开头/的干扰
  const aSegments = a.split('/').filter(Boolean)
  const bPathSegments = bPath.split('/').filter(Boolean)
  
  // 查找最大匹配长度
  let maxMatchLen = 0
  for (let i = 1; i <= bPathSegments.length; i++) {
    // 对比a的后i个段和b的前i个段
    const aSuffix = aSegments.slice(-i).join('/')
    const bPrefix = bPathSegments.slice(0, i).join('/')
    if (aSuffix === bPrefix) {
      maxMatchLen = i
    }
  }

  // 合并路径段
  const mergedSegments = [...aSegments, ...bPathSegments.slice(maxMatchLen)]
  let mergedUrl = '/' + mergedSegments.join('/')
  // 追加查询参数
  if (bSearch) {
    mergedUrl += `?${bSearch}`
  }
  return mergedUrl
}

// 测试用例
const a = '/sport/football/1';
const b = '/football/1?a=1'
console.log(mergeUrl(a, b)) // 输出 /sport/football/1?a=1

// 多参数场景测试
const b2 = '/football/1?a=1&b=2&c=test'
console.log(mergeUrl(a, b2)) // 输出 /sport/football/1?a=1&b=2&c=test

// 多层前缀场景测试
const a2 = '/cn/sport/basketball/player/23'
const b3 = '/basketball/player/23?team=lakers&season=2024'
console.log(mergeUrl(a2, b3)) // 输出 /cn/sport/basketball/player/23?team=lakers&season=2024

边界情况说明 #

• 如果第二个URL的路径完全和第一个URL的路径重叠，会直接追加参数，不会重复拼接路径
• 如果第二个URL有额外的路径段也可以正常拼接，比如a='/sport/football'，b='/football/1?a=1'，合并结果为/sport/football/1?a=1
• 自动保留第二个URL的所有查询参数，不会做参数去重，如果有去重需求可以后续用URLSearchParams扩展处理

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