The URL Object

May 14, 2019

Learn how to use the JavaScript URL object, from creating blob URLs with URL.createObjectURL to parsing a URL with the constructor to read its parts.

~~~

URL is a namespace used to host 2 static methods used to manipulate URLs using Blobs:

URL.createObjectURL()
URL.revokeObjectURL()

Given a blob, you generate a URL to it using the URL.createObjectURL() function:

const myURL = URL.createObjectURL(aBlob)

Once you have the blob URL, you can destroy it from memory using:

URL.revokeObjectURL(myURL)

In addition to this, URL offers a very different functionality through its constructor, which can be used to create a URL. You can call it like this:

const currentUrl = new URL(window.location.href)

Now currentUrl has a set of properties you can use to inspect the URL:

hash the hash fragment
host the domain + port
hostname the domain
href contains the entire URL
origin scheme + domain + port
password
pathname
port
protocol
search
searchParams
username

which are the usual parts of a URL.

I built a free URL parser tool where you can paste any URL and see every one of these parts labeled.

You can alter any of those, except origin and searchParams which are read only, and generate a new URL string by calling the toString() method, or by referencing the href property.

Tagged: Web Platform · All topics

~~~