JavaScript中解析相对URL

Question

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

例如，我在http://a/b/c/d;p?q上遇到了href值为"../g"（假设没有<base>元素）。结果的绝对URL应该是：http://a/b/g。

是否已经有JS库可以做到这一点？我相信肯定有。

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

- Jeremy Dunck

Answer 1

在现代浏览器和Node中，内置的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组件（协议、主机、路径、搜索、哈希等）的访问。

返回（从绝对URL到相对URL）需要一些代码。

- ericP

Answer 2

原来 A 元素的 .href 属性（不是.getAttribute('href')，而是 .href）返回已解析（绝对）的URL。

- Jeremy Dunck

---

换句话说，DOM属性（通过someAnchorElement.href访问）返回解析后的URL，而HTML属性（通过someAnchorElement.getAttribute('href')或someAnchorElement.attributes.href访问）返回其在HTML中原始编写的形式。（好吧，即使这也不是100％正确的，但在谷歌搜索“prop vs attr”将会出现大量相关讨论。） - Mark Amery

你不需要使用任何库来完成这个任务。 - tusharmath

Answer 3

一个很好的纯JS解决方案，可以在没有DOM的情况下工作：https://gist.github.com/1088850（适用于各种环境，特别对于服务器端JS非常有用）。

- Konstantin Smolyanin

Answer 4

JavaScript中的URL构造函数处理相对URL。因此，在您的情况下：

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

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

- Luca Fagioli

---

你为什么更喜欢使用.origin而不是window.location或document.location呢？这会破坏相对路径("../g")以及相对片段或搜索字符串。 - ericP

@ericP，老实说我不记得为什么了，但你是对的，origin 不适合 OP 的情况。无论如何，重新看一下 OP 的问题，似乎基本参数应该来自 form DOM 元素的 action 属性，而不是当前位置（尽管在他的问题中，“我在”可能暗示了另外一种情况）。关于搜索字符串，根据他的问题，他不想保留它们。我已经编辑了我的答案，并提供了一个更相关的片段。 - Luca Fagioli