如何在两个绝对 URL 之间生成最短且语义正确的相对 URL-js教程-PHP中文网

如何在两个绝对 URL 之间生成最短且语义正确的相对 URL

本文介绍一种可靠、跨场景的算法，用于计算两个绝对 URL 之间的最短相对路径（如 /about 或 ../some-other-page），自动处理不同路径层级、查询参数、哈希片段及跨源边界，并确保结果可直接用于 HTML 属性。

本文介绍一种可靠、跨场景的算法，用于计算两个绝对 url 之间的最短相对路径（如 `/about` 或 `../some-other-page`），自动处理不同路径层级、查询参数、哈希片段及跨源边界，并确保结果可直接用于 html `` 属性。

在 Web 开发中，将绝对 URL 转换为语义正确、最短可用的相对 URL 是一个常见但易出错的需求——尤其在静态站点生成、路由重写或富文档导航链接生成等场景中。浏览器原生不提供 URL.relativeTo() 方法，因此需手动实现逻辑严谨的路径归一化与公共前缀裁剪。

核心思路是：先校验协议、主机、端口是否一致（即同源）；若不同源，则必须返回完整绝对 URL；若同源，则逐段比对路径数组，计算向上回退（../）次数与剩余向下路径，最后拼接查询参数（search）和哈希（hash）。

以下是生产就绪的 TypeScript/JavaScript 实现（已适配现代环境，无依赖）：

function getRelativeURL(from: URL, to: URL): string {
  // 跨源：无法用相对路径安全跳转，返回完整绝对 URL
  if (from.origin !== to.origin) {
    return to.href;
  }

  // 提取标准化路径段（去除空字符串，保留根 /）
  const fromPath = from.pathname === '/' ? [''] : from.pathname.split('/').filter(Boolean);
  const toPath = to.pathname === '/' ? [''] : to.pathname.split('/').filter(Boolean);

  // 找到最长公共前缀长度
  let commonLength = 0;
  const minLength = Math.min(fromPath.length, toPath.length);
  for (let i = 0; i  p !== '').join('/');

  // 合并 search 和 hash（保留原始编码）
  return path + to.search + to.hash;
}

✅ 使用示例：

const from = new URL("https://example.com/blog/post-1");
const to   = new URL("https://example.com/about?ref=nav#contact");

console.log(getRelativeURL(from, to)); 
// 输出： "../../about?ref=nav#contact"

const to2 = new URL("https://example.com/");
console.log(getRelativeURL(from, to2)); 
// 输出： "../.."

const to3 = new URL("https://other.com/home"); 
console.log(getRelativeURL(from, to3)); 
// 输出： "https://other.com/home"（跨源，返回绝对 URL）

⚠️ 注意事项：

该函数严格遵循 URL 规范：pathname 以 / 开头，末尾不自动补 /；search 和 hash 原样保留（含 ? 和 #）；
不处理 file:// 或 data: 等非 HTTP 协议（可根据需要扩展）；
若 from 或 to 的 pathname 为空（如 https://ex.com），内部会标准化为 ['']，确保根路径逻辑正确；
对于单页应用（SPA），若需支持 # 路由跳转，应额外判断 to.hash 是否独立变化（此时可返回 to.hash 即可）。