Convert URL String into a Javascript Object

Sometimes you find yourself with a String, something like https://ao.gl/convert-url-string-into-a-javascript-object and you want to repeatably access elements of it correctly.

Let’s say that you want to only get the origin of a URL, or maybe the host, or even protocol, how would you do this?

The URL object

Javascript brings you the URL object, which allows you to instantiate it with a string, and optionally a base to work from.

new URL(url, [base])
Code language: JavaScript (javascript)

By using this object, you can achieve all of this very easily.

new URL("https://ao.gl/convert-url-string-into-a-javascript-object") /* URL { hash: "" host: "ao.gl" hostname: "ao.gl" href: "https://ao.gl/convert-url-string-into-a-javascript-object" origin: "https://ao.gl" password: "" pathname: "/convert-url-string-into-a-javascript-object" port: "" protocol: "https:" search: "" searchParams: URLSearchParams {} username: "" } */
Code language: JavaScript (javascript)

Notice all the useful object keys we can now easily refer to,

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments