解析 JavaScript 中的相对 URL

Posted 2023-02-21

【中文标题】解析 JavaScript 中的相对 URL

【英文标题】：Resolving relative URLs in JavaScript

【发布时间】：2011-04-25 23:45:41

【问题描述】：

我正在构建一个 JS 库，它需要查看 form[action] 和 a[href] 值并将它们解析为绝对 URL。

例如，我在 http://a/b/c/d;p?q 上遇到一个 href 值“../g”（假设没有 元素）。生成的绝对值将是：http://a/b/g。

是否已经有一个 JS 库可以做到这一点？我不得不相信。

有关所需内容的更多信息，请参阅规范： https://www.rfc-editor.org/rfc/rfc3986#section-5.4

【参考方案1】：

事实证明，A 元素的.href 属性（不是.getAttribute('href')，而是.href）返回解析后的（绝对）URL。

【讨论】：

换句话说，DOM 属性（通过someAnchorElement.href 访问）返回解析后的URL，html 属性（通过@987654325 访问@ 或 someAnchorElement.attributes.href) 以最初在 HTML 中编写的方式返回它。 （好吧，即使这也不是 100% 正确，但谷歌搜索“prop vs attr”会引发大量相关讨论。）

完全不需要库来执行此操作。

【参考方案2】：

很好的纯 JS 解决方案，无需 DOM： https://gist.github.com/1088850（适用于任何地方，但对服务器端 JS 尤其有用）。

【参考方案3】：

在现代浏览器和节点中，内置的 URL 构造函数处理这个：

u = (new URL("?newSearch",
             "http://a.example/with/a/long/path.file?search#fragment")).href

（产生http://a.example/with/a/long/path.file?newSearch）

如果您希望基础与当前文档相关，您可以明确地这样做：

u = (new URL("?newSearch", document.location)).href

除了.href，URL 对象还允许您访问所有 URL 组件（协议、主机、路径、搜索、哈希等）。

【参考方案4】：

javascript URL 构造函数处理相对 url。所以在你的情况下：

    new URL("../g", "http://a/b/c/d;p?q").href

    // returns "http://a/b/g"

【讨论】：

为什么您更喜欢.origin 而不是window.location 或document.location？这会破坏 OP 的相对路径（“../g”），以及相对片段或搜索字符串。

@ericP 我不记得为什么，坦率地说，但你是对的，origin 不适合 OP 的情况。无论如何，通过再次查看 OP 的问题，似乎基本参数应该来自 form DOM 元素的属性 action，而不是来自当前位置（尽管稍后在他的问题中“我在” 可能另有建议）。关于搜索字符串，根据他的问题，他对保留它们不感兴趣。我用更相关的 sn-p 编辑了我的答案。