使用 JavaScript 将相对路径转换为绝对路径

Question

有一个函数，它给了我这样的网址：

 ./some.css
./extra/some.css
../../lib/slider/slider.css

它始终是相对路径。

假设我们知道页面的当前路径，例如 http://site.com/stats/2012/ ，不知道如何将这些相对路径转换为真实路径？

我们应该得到类似的东西：

 ./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css

没有 jQuery，只有香草 javascript。

原文由 Jasper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这应该这样做：

 function absolute(base, relative) {
    var stack = base.split("/"),
        parts = relative.split("/");
    stack.pop(); // remove current file name (or empty string)
                 // (omit if "base" is the current folder without trailing slash)
    for (var i=0; i<parts.length; i++) {
        if (parts[i] == ".")
            continue;
        if (parts[i] == "..")
            stack.pop();
        else
            stack.push(parts[i]);
    }
    return stack.join("/");
}

原文由 Bergi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最简单、有效和正确的方法就是使用 URL api。

 new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"

在性能方面，此解决方案与使用字符串操作相当，并且速度是创建 a 标签的两倍。

原文由 Elad 发布，翻译遵循 CC BY-SA 4.0 许可协议