In Vanilla-JavaScript relativen Pfad + Basis-URL in absolute URL umwandeln

Question

In Ruby ist es einfach, dies zu tun, aber in JavaScript, bin ich mir nicht sicher.

eine Ausgangsseite gegeben, wie http://example.org/foo/bar, möchte ich auf der Seite einen Link zu ergreifen, um der Lage sein, die jede Art von href wie /x.php haben kann, ?p=3, y.html usw., und schalten Sie ihn ein vollständig in qualifizierte absolute URL, wie (im letzten Beispiel) http://example.org/foo/y.html.

Gibt es eine einfache Möglichkeit, dies zu tun? Wenn es hilft, können wir davon ausgehen, dass diese Pfade auf einer tatsächlichen Webseite als tatsächliche <a href> Elemente leben.

Answer 1

Die URL constructor nimmt eine zweite Basis Argument, das ist genau das tut, was Sie wollen:

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>

Die URL API in all major browsers except IE funktioniert. Wenn Sie IE unterstützen müssen, there are polyfills available. Node.js also has it built in (const { URL } = require('url');).

Answer 2

Wenn Ihr baseURL auf die aktuelle Seite gleich ist, versuchen Sie dies:

var getAbsoluteUrl = (function() { 
    var a; 

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

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

hier gefunden: https://davidwalsh.name/get-absolute-url

es ausprobiert und es funktionierte gut für die relative als auch absolute URLs (es macht sie alle absolut) - vorausgesetzt, Ihr basePath ist eigentlich Ihre eigene Seite.

Answer 3

Verwenden Sie dieses Skript (aber testen Sie es zuerst für die verschiedenen Fälle, ich schrieb es einfach und würde nicht garantieren, dass ich keinen Fall übersehen habe). Beachten Sie, dass wenn der Pfad der URL ein Verzeichnis und keine Datei angibt, diese immer in einem / endet, obwohl der Browser dies möglicherweise nicht anzeigt.

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