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

有一个函数，它为我提供如下URL：

./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。

这应该可以做到：

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("/");
}

函数绝对值（基本值、相对值）{
var stack=base.split（“/”），
部分=相对分割（“/”）；
stack.pop（）；//删除当前文件名（或空字符串）
//（如果“base”是当前文件夹，且没有尾随斜杠，则省略）
for（var i=0；iJavascript将为您完成此任务。无需创建函数

var link = document.createElement("a");
link.href = "../../lib/slider/slider.css";
alert(link.protocol+"//"+link.host+link.pathname+link.search+link.hash);

// Output will be "http://www.yoursite.com/lib/slider/slider.css"

但如果您需要将其作为功能：

var absolutePath = function(href) {
    var link = document.createElement("a");
    link.href = href;
    return (link.protocol+"//"+link.host+link.pathname+link.search+link.hash);
}

更新：如果需要完整的绝对路径，更简单的版本：

var absolutePath = function(href) {
    var link = document.createElement("a");
    link.href = href;
    return link.href;
}

href解决方案仅在加载文档后有效（至少在IE11中）。这对我来说很有效：

link = link || document.createElement("a");
link.href =  document.baseURI + "/../" + href;
return link.href;

看
这是一个牢不可破的世界

/*\
|*|
|*|：：将相对路径转换为绝对路径：：
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|
|*|以下代码是在GNU公共许可证3版或更高版本下发布的。
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/
函数relPathToAbs（sRelPath）{
var numPLN，sDir=“”，sPath=location.pathname.replace（/[^\/]*$/，sRelPath.replace（/（\/^^）（？：\.？\/+）+//g，“$1”）；
对于（var nEnd，nStart=0；nEnd=sPath.indexOf（“//”，nStart），nEnd>-1；nStart=nEnd+nUpLn）{
nUpLn=/^\/（？：\.\.\/）*/.exec（sPath.slice（nEnd））[0]。长度；
sDir=（sDir+sPath.substring（nStart，nEnd））.replace（新的RegExp（（？：\\\/+[^\\/]*）{0，+（（nUpLn-1）/3）+“}$”，“/”；
}
返回sDir+sPath.substr（nStart）；
}

示例用法：

/*让我们进入/en-us/docs/Web/API/document.cookie*/
警报（location.pathname）；
//显示：/en US/docs/Web/API/document.cookie
警报（relPathToAbs（“./”）；
//显示：/en US/docs/Web/API/
警报（relPathToAbs（“../Guide/API/DOM/Storage”）；
//显示：/en US/docs/Web/Guide/API/DOM/Storage
警报（relPathToAbs（“../../Firefox”）；
//显示：/en US/docs/Firefox
警报（relPathToAbs（“../Guide/../API/../Firefox”）；
//显示：/en US/docs/Firefox
函数规范化（url）{
var div=document.createElement（'div'）；
div.innerHTML=“）
如果要对浏览器中自定义网页的链接（而不是运行脚本的网页）进行相对绝对转换，可以使用@Bergi建议的功能的更增强版本：

var resolveURL=function resolve(url, base){
    if('string'!==typeof url || !url){
        return null; // wrong or empty url
    }
    else if(url.match(/^[a-z]+\:\/\//i)){ 
        return url; // url is absolute already 
    }
    else if(url.match(/^\/\//)){ 
        return 'http:'+url; // url is absolute already 
    }
    else if(url.match(/^[a-z]+\:/i)){ 
        return url; // data URI, mailto:, tel:, etc.
    }
    else if('string'!==typeof base){
        var a=document.createElement('a'); 
        a.href=url; // try to resolve url without base  
        if(!a.pathname){ 
            return null; // url not valid 
        }
        return 'http://'+url;
    }
    else{ 
        base=resolve(base); // check base
        if(base===null){
            return null; // wrong base
        }
    }
    var a=document.createElement('a'); 
    a.href=base;

    if(url[0]==='/'){ 
        base=[]; // rooted path
    }
    else{ 
        base=a.pathname.split('/'); // relative path
        base.pop(); 
    }
    url=url.split('/');
    for(var i=0; i<url.length; ++i){
        if(url[i]==='.'){ // current directory
            continue;
        }
        if(url[i]==='..'){ // parent directory
            if('undefined'===typeof base.pop() || base.length===0){ 
                return null; // wrong url accessing non-existing parent directories
            }
        }
        else{ // child directory
            base.push(url[i]); 
        }
    }
    return a.protocol+'//'+a.hostname+base.join('/');
}

我必须为已接受的解决方案添加一个补丁，因为在angularjs导航中，可以在#之后添加斜杠

function getAbsoluteUrl(base, relative) {
  // remove everything after #
  var hashPosition = base.indexOf('#');
  if (hashPosition > 0){
    base = base.slice(0, hashPosition);
  }

  // the rest of the function is taken from http://stackoverflow.com/a/14780463
  // http://stackoverflow.com/a/25833886 - this doesn't work in cordova
  // http://stackoverflow.com/a/14781678 - this doesn't work in cordova
  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("/");
}

函数getAbsoluteUrl（基本、相对）{
//之后把所有东西都搬走#
var hashPosition=base.indexOf（'#'）；
如果（哈希位置>0）{
base=base.slice（0，哈希位置）；
}
//函数的其余部分取自http://stackoverflow.com/a/14780463
// http://stackoverflow.com/a/25833886 -这在科尔多瓦不起作用
// http://stackoverflow.com/a/14781678 -这在科尔多瓦不起作用
var stack=base.split（“/”），
部分=相对分割（“/”）；
stack.pop（）；//删除当前文件名（或空字符串）
//（如果“base”是当前文件夹，且没有尾随斜杠，则省略）
对于（var i=0；i，建议和接受的解决方案不支持服务器相对URL，也不支持绝对URL。
例如，如果我的亲戚是/sites/folder1，它将不起作用

这是另一个支持完整、服务器相对或相对URL以及../的功能，它并不完美，但涵盖了很多选项。
当基本URL不是当前页面URL时，请使用此选项，否则会有更好的选择

    function relativeToAbsolute(base, relative) {
    //make sure base ends with /
    if (base[base.length - 1] != '/')
        base += '/';

    //base: https://server/relative/subfolder/
    //url: https://server
    let url = base.substr(0, base.indexOf('/', base.indexOf('//') + 2));
    //baseServerRelative: /relative/subfolder/
    let baseServerRelative = base.substr(base.indexOf('/', base.indexOf('//') + 2));
    if (relative.indexOf('/') === 0)//relative is server relative
        url += relative;
    else if (relative.indexOf("://") > 0)//relative is a full url, ignore base.
        url = relative;
    else {
        while (relative.indexOf('../') === 0) {
            //remove ../ from relative
            relative = relative.substring(3);
            //remove one part from baseServerRelative. /relative/subfolder/ -> /relative/
            if (baseServerRelative !== '/') {
                let lastPartIndex = baseServerRelative.lastIndexOf('/', baseServerRelative.length - 2);
                baseServerRelative = baseServerRelative.substring(0, lastPartIndex + 1);
            }
        }
        url += baseServerRelative + relative;//relative is a relative to base.
    }

    return url;
}

希望这能有所帮助。在JavaScript中没有这个基本的实用程序真的很令人沮丧。
最简单、有效和正确的方法就是使用api

性能明智，此解决方案与使用字符串操作相媲美，比创建代码< >代码/>标签的速度快两倍。
< P>我找到了一个非常简单的解决方案，同时仍然支持IE 10（即不支持URL API）（使用IE 10或更高）。该解决方案在没有任何字符串处理的情况下工作。
function resolveUrl(relativePath) {
    var originalUrl = document.location.href;
    history.replaceState(history.state, '', relativePath);
    var resolvedUrl = document.location.href;
    history.replaceState(history.state, '', originalUrl);
    return resolvedUrl;
}

history.replaceState（）
不会触发浏览器导航，但仍会修改
document.location
，并支持相对路径和绝对路径

此解决方案的一个缺点是，如果您已经在使用历史API，并且已使用标题设置了自定义状态，则当前状态的标题将丢失。
这将起作用。但仅当您打开具有其文件名的页面时才起作用。当您打开像这样的链接
stackoverflow.com/page
时，它将起作用。
>stackoverflow.com/page/index.php

function reltoabs(link){
    let absLink = location.href.split("/");
    let relLink = link;
    let slashesNum = link.match(/[.]{2}\//g) ? link.match(/[.]{2}\//g).length : 0;
    for(let i = 0; i < slashesNum + 1; i++){
        relLink = relLink.replace("../", "");
        absLink.pop();
    }
    absLink = absLink.join("/");
    absLink += "/" + relLink;
    return absLink;
}

函数reltoab（链接）{
让absLink=location.href.split（“/”）；
让relLink=link；
让slashesNum=link.match（//.]{2}\//g）？link.match（//.]{2}\//g）。长度：0；
for（设i=0；i
我知道这是一个非常古老的问题，但你可以通过以下方法来解决：
（新URL（relativePath，location））.href
这是用于javascript应用程序的，不是一个常规站点。它不处理带有前导
/
的相对路径。例如：
relPathToAbs（“/？foo=bar”）
应返回“/？foo=bar”“相反，它返回
/questions/14780350/？foo=bar
，这意味着当将路径发送回根目录时，它没有正确检测到前导的
/
。@Nucleon路径是协议段（
http://
）和搜索/哈希段（
？
/
）之间包含的URL的一部分。”。与该职能无关的是
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"

function resolveUrl(relativePath) {
    var originalUrl = document.location.href;
    history.replaceState(history.state, '', relativePath);
    var resolvedUrl = document.location.href;
    history.replaceState(history.state, '', originalUrl);
    return resolvedUrl;
}

function reltoabs(link){
    let absLink = location.href.split("/");
    let relLink = link;
    let slashesNum = link.match(/[.]{2}\//g) ? link.match(/[.]{2}\//g).length : 0;
    for(let i = 0; i < slashesNum + 1; i++){
        relLink = relLink.replace("../", "");
        absLink.pop();
    }
    absLink = absLink.join("/");
    absLink += "/" + relLink;
    return absLink;
}