How do I parse a relative URL without base URL in JavaScript

Question

For absolute URL we can parse with new URL(str); for relative URL with base URL we can have new URL(path, base). How do I parse a relative URL without a base URL? For example, folder/file.ext?a=1&b=2#hash should be parsed into

{
    pathname: "folder/file.ext",
    search: "?a=1&b=2",
    hash: "#hash"
}

Third-party library is fine, but I prefer built-in libraries and functions. Prefer cross-platform (browser/Node.js) solutions. No need for IE.

Why don't you append www.example.com/ before your string and parse it ... — vaku
– vaku, Commented May 9, 2019 at 15:02
You could use new URL('folder/file.ext?a=1&b=2#hash', 'http://dummy'); as a workaround. — Zlatko
– Zlatko, Commented May 9, 2019 at 15:04
If you know what your relative URL's parameters roughly look like, meaning your identifiers '?' and '#' are unique, you could use basic JS and just split the relative URL string, stitch together your own JSON-Object with the data gained from that. — Stöger
– Stöger, Commented May 9, 2019 at 15:06
Thank you guys for quick response. This seems to be a stupid question then; please create an answer so I can give whoever credit and finish this question. (Or should I delete this question altogether? — Franklin Yu
– Franklin Yu, Commented May 9, 2019 at 15:06
This is a good question and hasn't been answered yet. @Zlatko This won't work when you have a relative URL with double dots (..) since these need to be preserved until the absolute URL is known. @Stöger Manual string transformations are brittle and should be delegated to a library. — mdcq
– mdcq, Commented Sep 26, 2021 at 11:21

mdcq · Accepted Answer · 2021-09-26 14:29:01Z

13

This is a great question. Currently, manipulating relative URLs without needing a base isn't supported by the URL Standard. Using a dummy base doesn't always work, since a relative URLs with dot segments like ../path would be resolved against the base without the possibility to recover it again later. It's unfortunate that this hasn't been thought of in the URL Standard. Though there is some discussion to add it in #531.

In the meanwhile, check out reurl which is a library that allows you to manipulate relative URLs without resorting to brittle manual string manipulation.

answered Sep 26, 2021 at 14:29

mdcq

2,09621 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

How do I parse a relative URL without base URL in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related