バニラJavaScriptでは、相対パス+ベースURLを絶対URLに変更します。

Question

Rubyではこれは簡単ですが、JavaScriptではわかりません。このようhttp://example.org/foo/barとして開始ページ、与えられた

、私はなど/x.php、?p=3、y.html、などhrefの任意の並べ替えを持っていることができ、ページ上の任意のリンクを取り、完全にそれを回すことができるようにしたいです（最後の例で）http://example.org/foo/y.htmlのような修飾絶対URL。

これを行う簡単な方法はありますか？役に立つ場合は、実際のWebページに実際の<a href>要素としてこれらのパスが存在すると仮定できます。

Answer 1

URL constructorは正確に何をしたいん秒、base引数を取ります：

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

Answer 2

あなたのベース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が実際に自分のページであると仮定します。

Answer 3

このスクリプトを使用します（ただし、さまざまなケースで最初にテストしますが、私はそれを書いただけで、何も見落とされているとは限りません）。 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; 
    } 
}