Construct a relative path in JavaScript from two absolute paths

Question

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.

What do you mean by "optimal"? Optimal in code size, running time or memory usage? — beatgammit
– 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
– Adam Jimenez, Commented Dec 5, 2012 at 20:24

beatgammit · Accepted Answer · 2012-12-05 21:11:57Z

8

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

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

This is their implementation:

https://github.com/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.

edited Dec 5, 2012 at 21:11

answered Dec 5, 2012 at 20:20

beatgammit

20.3k20 gold badges91 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Jimenez Over a year ago

I'm running client side, but that looks workable. Will see if I can get it working.

s6mike · Accepted Answer · 2022-08-12 02:40:18Z

1

It's really easy to make mistakes with URL handling, so I highly recommend 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');

edited Aug 12, 2022 at 2:40

s6mike

5946 silver badges17 bronze badges

answered Dec 5, 2012 at 20:14

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

4 Comments

Adam Jimenez Over a year ago

Looks like it would work but is there a more concise way than including a whole library?

zzzzBov Over a year ago

Probably, but how close are you monitoring your performance to care?

zzzzBov Over a year ago

@AdamJimenez, that's not an answer. You should be making your site work first and then testing with a performance optimizer to see where the greatest gains can be made in performance. Prematurely optimizing is only going to hold you back.

s6mike Over a year ago

URI.js github page now recommends using JS URL API: developer.mozilla.org/en-US/docs/Web/API/URL

s6mike · Accepted Answer · 2022-08-11 23:16:35Z

-1

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

new URL(url, base)

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

answered Aug 11, 2022 at 23:16

s6mike

5946 silver badges17 bronze badges

Collectives™ on Stack Overflow

Construct a relative path in JavaScript from two absolute paths

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related