解析 JavaScript 中的相对 URL

Question

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

例如，我在 http://a/b/c/d;p?q 并遇到 href 值“../g”（假设没有 <base> 元素）。得到的绝对值将是： http://a/b/g.

有没有 JS 库可以做到这一点？我不得不相信是这样。

有关所需内容的更多信息，请参阅规范：http://tools.ietf.org/html/rfc3986#section-5.4

Answer 1

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

Answer 2

在现代浏览器中，内置的 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

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

Answer 3

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