Given two absolute paths, e.g.

/var/data/stuff/xyz.html
/var/data

How to create a relative path that uses the second path as its base? In the example above, the result would be: stuff/xyz.html

Another example:

/relative/sub/foo/sub/file
/relative/path
../../../path 

This is similar to this question but I'm looking for the optimal JavaScript solution instead of Java.

Given two absolute paths, e.g.

/var/data/stuff/xyz.html
/var/data

How to create a relative path that uses the second path as its base? In the example above, the result would be: stuff/xyz.html

Another example:

/relative/sub/foo/sub/file
/relative/path
../../../path 

This is similar to this question but I'm looking for the optimal JavaScript solution instead of Java.

• javascript
• path

• 2 use URI.js. – zzzzBov Commented Dec 5, 2012 at 20:13
• What do you mean by "optimal"? Optimal in code size, running time or memory usage? – beatgammit Commented Dec 5, 2012 at 20:15
• code size. can't imagine memory usage or running time will be a considerable factor for something so trivial. – Adam Jimenez Commented Dec 5, 2012 at 20:24

3 Answers 3

If you're running this on the server with node.js:

http://nodejs/api/path.html#path_path_relative_from_to

This is their implementation:

https://github./joyent/node/blob/master/lib/path.js#L233

This should work in the browser without really any changes. It's been battle-tested, so it already handles edge cases. It's not a one-liner, but it works flawlessly, which I think is more important. The POSIX version isn't bad, if that's the only think you need to support.

It's really easy to make mistakes with URL handling, so I highly remend using a library to take care of all the nitty gritty details.

URI.js makes this simple:

URI('/var/data/stuff/xyz.html').relativeTo('/var/data');

JS URL API should handle this within the browser now: https://developer.mozilla/en-US/docs/Web/API/URL/URL

new URL(url, base)

// Base urls
let m = 'https://developer.mozilla';
let a = new URL("/", m);                                // => 'https://developer.mozilla/'