在vanilla JavaScript中，将相对路径+基本URL转换为绝对URL

在Ruby中，执行此操作很简单，但在JavaScript中，我不确定。在vanilla JavaScript中，将相对路径+基本URL转换为绝对URL

给定一个起始页面，如http://example.org/foo/bar，我希望能够把在页面上，任何一个环节，它可以有任何形式的，如/x.phphref，?p=3，y.html等，并把它变成一个完全合格的绝对URL，例如（在最后一个例子中）http://example.org/foo/y.html。

有没有什么简单的方法来做到这一点？如果有帮助，我们可以假设这些路径实际上是作为实际的<a href>元素存在于实际网页中。

来源

2017-04-06 Alan H.

这里您的最终目标是什么？你不想在你的超链接中包含基本URL？ –

如果所有网址都以同样的方式受到影响，您可以使用''标签。否则，在每个链接上，您可以手动设置'protocol'和'hostname'属性。 – 2017-04-06 17:41:39

Hi @Cage - 我的目标涉及解除一部分HTML以在其他地方发布（如引用的富文本）。链接应该仍然在他们的新家中运作。 –

的URL constructor需要一秒钟，基地的说法，这不正是你想要什么：

const base = 'http://example.org/foo/bar'; 
 

 
[ '/x.php', 
 
    '?p=3', 
 
    'y.html' 
 
].forEach(urlPart => { 
 
    const url = new URL(urlPart, base); 
 
    console.log(url.href); 
 
});

.as-console-wrapper{min-height:100%}

<script src="//rawgit.com/github/url-polyfill/0.5.6/url.js"></script>

的URL API中all major browsers except IE工作。如果你需要支持IE，there are polyfills available。 Node.js also has it built in（const { URL } = require('url');）。

来源

2017-04-06 17:41:01

绝对精彩。内置的API正是我想使用的，现在我知道它存在。幸运的是，这是一个书签，我不关心IE 11的支持。 –

如果你的基本URL等于当前页面，试试这个：

var getAbsoluteUrl = (function() { 
    var a; 

    return function(url) { 
     if(!a) a = document.createElement('a'); 
     a.href = url; 

     return a.href; 
    }; 
})();

这里找到：https://davidwalsh.name/get-absolute-url

试了一下，效果不错的相对和绝对的URL（这让他们都绝对） - 假设你的basePath实际上是你自己的页面。

来源

2017-04-06 17:31:21 volzo

这对了解这一点非常有用。谢谢。我只希望我能够接受两个答案。 –

使用此脚本（但首先测试它的各种情况下，我只是写它，并不能保证我没有忽视任何情况下）。请注意，如果URL的路径指定了一个目录而不是文件，它总是以/结尾，即使浏览器可能没有显示。

var getAbsoluteURL = function (url, href) { 
    var path = url.split(/[#?]/)[0]; 
    var basePath = path.slice(0, path.lastIndexOf('/')); 
    var domain = url.split('/').slice(0,3).join('/'); 
    var protocol = url.split('/')[0]; 

    switch (href.charAt(0)) { 
     case '/': 
     { 
      if (href.length > 1 && href.charAt(1) == '/') 
       return protocol + href; 
      else 
       return domain + href; 
     } 
     case '#': 
     case '?': 
      return path + href; 
     default: 
      return basePath + '/' + href; 
    } 
}

来源

2017-04-06 18:16:00

您的努力真诚地感谢！不过，我打算让浏览器完成繁重的工作，因为我不想意外地错过一个案例。 –

在vanilla JavaScript中，将相对路径+基本URL转换为绝对URL

回答

相关问题