URL

Constructor

URL()

Creates and returns a URL object from a URL string and optional base URL string. Throws if the passed arguments don't define a valid URL.

Instance properties

hash

A string containing a '#' followed by the fragment identifier of the URL.

host

A string containing the domain (that is the hostname) followed by (if a port was specified) a ':' and the port of the URL.

hostname

A string containing the domain of the URL.

href

A stringifier that returns a string containing the whole URL.

origin Read only

Returns a string containing the origin of the URL, that is its scheme, its domain and its port.

password

A string containing the password specified before the domain name.

pathname

A string containing an initial '/' followed by the path of the URL, not including the query string or fragment.

port

A string containing the port number of the URL.

protocol

A string containing the protocol scheme of the URL, including the final ':'.

search

A string indicating the URL's parameter string; if any parameters are provided, this string includes all of them, beginning with the leading ? character.

searchParams Read only

A URLSearchParams object which can be used to access the individual query parameters found in search.

username

A string containing the username specified before the domain name.

Static methods

canParse()

Returns a boolean indicating whether or not a URL defined from a URL string and optional base URL string is parsable and valid.

createObjectURL()

Returns a string containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.

parse()

Creates and returns a URL object from a URL string and optional base URL string, or returns null if the passed parameters define an invalid URL.

revokeObjectURL()

Revokes an object URL previously created using URL.createObjectURL().

Instance methods

toString()

Returns a string containing the whole URL. It is a synonym for URL.href, though it can't be used to modify the value.

toJSON()

Returns a string containing the whole URL. It returns the same string as the href property.

Usage notes

The constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative URL:

const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

The constructor will raise an exception if the URL cannot be parsed to a valid URL. You can either call the above code in a try...catch block or use the canParse() static method to first check the URL is valid:

if (URL.canParse("../cats", "http://www.example.com/dogs")) {
  const url = new URL("../cats", "http://www.example.com/dogs");
  console.log(url.hostname); // "www.example.com"
  console.log(url.pathname); // "/cats"
} else {
  console.log("Invalid URL");
}

URL properties can be set to construct the URL:

url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

URLs are encoded according to the rules found in RFC 3986. For instance:

url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

The URLSearchParams interface can be used to build and manipulate the URL query string.

To get the search params from the current window's URL, you can do this:

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

The toString() method of URL just returns the value of the href property, so the constructor can be used to normalize and encode a URL directly.

const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

Specifications

Browser compatibility