解析 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

事實證明， A 元素的.href屬性（不是.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

除了.href ， URL對象還允許您訪問所有 URL 組件（協議、主機、路徑、搜索、哈希等）。

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);