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

Question

In Ruby, it's simple to do this, but in JavaScript, I'm not sure.

Given a starting page, such as http://example.org/foo/bar , I want to be able to take any link on the page, which can have any sort of href such as /x.php , ?p=3 , y.html , etc., and turn it into a fully qualified absolute URL, such as (in the last example) http://example.org/foo/y.html .

Is there any sort of simple way to do this? If it helps, we can assume these paths do live in an actual web page as actual <a href> elements.

Answer 1

If your baseURL is equal to the current page, try this:

var getAbsoluteUrl = (function() {
    var a;

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

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

Found here: https://davidwalsh.name/get-absolute-url

Tried it and it worked well for relative as well as absolute URLs (it makes them all absolute) - assuming your basePath is actually your own page.

Answer 2

The URL constructor takes a second, base argument, which does exactly what you want:

 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> 

The URL API works in all major browsers except IE . If you need to support IE, there are polyfills available . Node.js also has it built in ( const { URL } = require('url'); ).

Answer 3

Use this script (but test it first for the various cases, I just wrote it and wouldn't guarantee I haven't overlooked any case). Note that if the path of the URL specifies a directory and not a file, it always ends in a / , even though the browser might not show that.

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