How to get a URL by a relative path ? - Javascript

Question

var baseURL = "http://google.com/a/b/c/d.html";
var relativePath = "../../e.mp3";

I want get result http://google.com/a/e.mp3 by baseURL and relativePath

Is there an easy way to do it?

@KailashYadav I will, Just like to see if someone has another way to do it — Koerr, Apr 19 '14 at 06:46

score 4 · Accepted Answer · edited May 23 '17 at 11:44

You can use this function:

function resolve(url, base_url) {


  var doc      = document
    , old_base = doc.getElementsByTagName('base')[0]
    , old_href = old_base && old_base.href
    , doc_head = doc.head || doc.getElementsByTagName('head')[0]
    , our_base = old_base || doc_head.appendChild(doc.createElement('base'))
    , resolver = doc.createElement('a')
    , resolved_url
    ;
  our_base.href = base_url;
  resolver.href = url;
  resolved_url  = resolver.href; // browser magic at work here

  if (old_base) old_base.href = old_href;
  else doc_head.removeChild(our_base);
  return resolved_url;
}
alert(resolve('../../e.mp3', 'http://google.com/a/b/c/d.html'));

Here is the fiddle link:

http://jsfiddle.net/ecmanaut/RHdnZ/

Here it is user for something like same: Getting an absolute URL from a relative one. (IE6 issue)

When just coping from another question http://stackoverflow.com/questions/470832 you could at least give credit to the original author. — Sebastian, Apr 19 '14 at 07:05

score 0 · Answer 2 · answered Apr 19 '14 at 06:01

One way of doing it:

If you use Node.js you can use the path module to normalize your path. If you don't use Node.js you can still use this module in the browser with the help of browserify.

Obviously you would need to get rid of d.html from the baseUrl and append the relativePath before you call path.normalize.

Sebastian · Answer 3 · 2014-04-19T06:59:20.037

Take a look at this Gist. It worked quite well for me as it covers also special cases where simpler solutions will fail.

function absolutizeURI(base, href) {// RFC 3986

  function removeDotSegments(input) {
    var output = [];
    input.replace(/^(\.\.?(\/|$))+/, '')
         .replace(/\/(\.(\/|$))+/g, '/')
         .replace(/\/\.\.$/, '/../')
         .replace(/\/?[^\/]*/g, function (p) {
      if (p === '/..') {
        output.pop();
      } else {
        output.push(p);
      }
    });
    return output.join('').replace(/^\//, input.charAt(0) === '/' ? '/' : '');
  }

  href = parseURI(href || '');
  base = parseURI(base || '');

  return !href || !base ? null : (href.protocol || base.protocol) +
         (href.protocol || href.authority ? href.authority : base.authority) +
         removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ((base.authority && !base.pathname ? '/' : '') + base.pathname.slice(0, base.pathname.lastIndexOf('/') + 1) + href.pathname) : base.pathname)) +
         (href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) +
         href.hash;
}

You also need this helper function:

function parseURI(url) {
  var m = String(url).replace(/^\s+|\s+$/g, '').match(/^([^:\/?#]+:)?(\/\/(?:[^:@]*(?::[^:@]*)?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);
  // authority = '//' + user + ':' + pass '@' + hostname + ':' port
  return (m ? {
    href     : m[0] || '',
    protocol : m[1] || '',
    authority: m[2] || '',
    host     : m[3] || '',
    hostname : m[4] || '',
    port     : m[5] || '',
    pathname : m[6] || '',
    search   : m[7] || '',
    hash     : m[8] || ''
  } : null);
}

How to get a URL by a relative path ? - Javascript

3 Answers3