Assuming that I'm on a page on a different domain (mydomain) and that the relative url only exists in code (not in the DOM)

How do I bine two arbitrary urls entirely in javascript?

var a = '/';
var b = '../other/path/';
var c = magicUrlCombine(a,b);
assert(c == '/');

It should also work for

var a = '/';
var b = '/';
var c = magicUrlCombine(a,b);
assert(c == '/');

EDIT:

I'm looking for a pletely general function for bining an absolute url with an arbitrary url. The same logic as the browser uses for resolving links but for urls that are not in the HTML of the page and/or not relative to the current location.href.

var a = '/';
var b = '../d/e/';
assert(c == '/')

OR

var b = '/f/g/';
assert(c == '/')

OR

var b = '/';
assert(c == '/')

EDIT 2:

node.js has a url module that has the right functionality, but I haven't found a nice way of reusing it on the client side. (how to use node.js module system on the clientside)

I managed to hack my way through making it work but it's not really a solution I feel fortable putting into a production site. Hackety hack

Assuming that I'm on a page on a different domain (mydomain.) and that the relative url only exists in code (not in the DOM)

How do I bine two arbitrary urls entirely in javascript?

var a = 'http://example./some/path/';
var b = '../other/path/';
var c = magicUrlCombine(a,b);
assert(c == 'http://example./some/other/path/');

It should also work for

var a = 'http://example./some/path/';
var b = 'http://pink-unicorns./some/other/path/';
var c = magicUrlCombine(a,b);
assert(c == 'http://pink-unicorns./some/other/path/');

EDIT:

I'm looking for a pletely general function for bining an absolute url with an arbitrary url. The same logic as the browser uses for resolving links but for urls that are not in the HTML of the page and/or not relative to the current location.href.

var a = 'http://example./a/b/c/';
var b = '../d/e/';
assert(c == 'http://example./a/b/d/e/')

OR

var b = '/f/g/';
assert(c == 'http://example./f/g/')

OR

var b = 'http://jquery./h/i/';
assert(c == 'http://jquery./h/i/')

EDIT 2:

node.js has a url module that has the right functionality, but I haven't found a nice way of reusing it on the client side. (how to use node.js module system on the clientside)

I managed to hack my way through making it work but it's not really a solution I feel fortable putting into a production site. Hackety hack

• javascript
• url

• For clarification I'm looking for the equivalent of msdn.microsoft./en-us/library/ay1kx93s.aspx a is absolute, b is absolute or relative, c is absolute. – Jesper Larsen-Ledet Commented May 10, 2011 at 9:41
• can you please update your example with real examples where there is no repeat paths in the base and relative? Perhaps my answer is still correct. – mplungjan Commented May 10, 2011 at 9:46

5 Answers 5

JQuery Mobile has it

$.mobile.path.makeUrlAbsolute(relPath, absPath)

console.log($.mobile.path.makeUrlAbsolute('../d/e/', 'http://example./a/b/c/'));
console.log($.mobile.path.makeUrlAbsolute('/f/g/', 'http://example./a/b/c/'));
console.log($.mobile.path.makeUrlAbsolute('http://jquery./h/i/', 'http://example./a/b/c/'));

all give the expected results

I have used on the server side, using NodeJS,

var url = require('url');
url.resolve(from, to);

in your case:

var a = 'http://example./some/path/';
var b = '../other/path/';
var c = url.resolve(a, b);
assert(c == 'http://example./some/other/path/');

var a = 'http://example./some/path/';
var b = 'http://pink-unicorns./some/other/path/';
var c = url.resolve(a, b);
assert(c == 'http://pink-unicorns./some/other/path/');

Couldn't resist having a go at a solution

var magicUrlCombine = function(a,b){
   return (a + b).replace(/[\w\-\.]+\/..\/|\:\/\/[\w\-\.\/]+http/g,'');
}

works for both test cases and binations of the two

http://jsfiddle/8HLeQ/2/

I assumed I understood the question but my fiddle returns two false. The examples are not obvious

http://jsfiddle/mplungjan/z5SUn/

function magicUrlCombine(a,b) {
  var linkA = document.createElement('a');
  linkA.href = a;
  var linkB = document.createElement('a');
  linkB.href = b;
  return linkB.href.replace(linkB.host,linkA.host)
}

This is a possible, but untested, solution:

function magicCombine(a,b){
    if(b.indexOf('://') != -1) return b;

    var backs = 0;
    var lastIndex = b.indexOf('../');

    while(lastIndex != -1){
        backs++;
        lastIndex = b.indexOf('../', lastIndex+3);
    }

    var URL = a.split('/');
    //Remove last part of URL array, which is always either the file name or [BLANK]
    URL.splice(URL.length-1, 1)

    if(b.substr(0,1) == '/')
        b = b.substr(1);
    var toAdd = b.split('/');

    for(var i = 0, c = toAdd.length-backs; i < c; ++i){
        if(i < backs)
            URL[URL.length - (backs-i)] = toAdd[backs+i];
        else
            URL.push(toAdd[backs+i]);
    }

    return URL.join('/');
}

Should take care of both cases...