解析 JavaScript 中的相对 URL

Question

I'm building a JS library which has a requirement of looking at form[action] and a[href] values and resolving them into absolute URLs.

For example, I'm on http://a/b/c/d;p?q and encounter an href value of "../g" (assume there's no <base> element). The resulting absolute would be: http://a/b/g .

Is there a JS library that does this already? I'd have to believe so.

For more info about what's needed, the spec: http://tools.ietf.org/html/rfc3986#section-5.4

Answer 1

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

Answer 2

In modern browsers and node, the built-in URL constructor handles this:

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

(yields http://a.example/with/a/long/path.file?newSearch )

If you want the base to be relative to the current document, you can do that explicitly:

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

In addition to .href , the URL object also gives you access to all of the URL components (protocol, host, path, search, hash, etc.).

Answer 3

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

Answer 4

为了考虑所有当前的 URL 变量（协议、端口号），您应该使用window.location.origin作为base参数：

new URL("/my-relative-url", window.location.origin);