Convert relative path to absolute using JavaScript

Question

There's a function, which gives me urls like:

./some.css ./extra/some.css ../../lib/slider/slider.css 

It's always a relative path.

Let's think we know current path of the page, like http://site.com/stats/2012/, not sure how do I convert these relative paths to real ones?

We should get something like:

./some.css => http://site.com/stats/2012/some.css ./extra/some.css => http://site.com/stats/2012/extra/some.css ../../lib/slider/slider.css => http://site.com/lib/slider/slider.css 

No jQuery, only vanilla javascript.

Answer 1

The most simple, efficient and correct way to do so it to just use URL api.

new URL("http://www.stackoverflow.com?q=hello").href; //=> http://www.stackoverflow.com/?q=hello"  new URL("mypath","http://www.stackoverflow.com").href; //=> "http://www.stackoverflow.com/mypath"  new URL("../mypath","http://www.stackoverflow.com/search").href //=> "http://www.stackoverflow.com/mypath"  new URL("../mypath", document.baseURI).href //=> "https://stackoverflow.com/questions/mypath" 

Performance wise, this solution is on par with using string manipulation and twice as fast as creating a tag.

Answer 2

Javascript will do it for you. There's no need to create a function.

var link = document.createElement("a"); link.href = "../../lib/slider/slider.css"; alert(link.protocol+"//"+link.host+link.pathname+link.search+link.hash);  // Output will be "http://www.yoursite.com/lib/slider/slider.css" 

But if you need it as a function:

var absolutePath = function(href) {     var link = document.createElement("a");     link.href = href;     return (link.protocol+"//"+link.host+link.pathname+link.search+link.hash); } 

Update: Simpler version if you need the full absolute path:

var absolutePath = function(href) {     var link = document.createElement("a");     link.href = href;     return link.href; }