URL

The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.

You normally create a new URL object by specifying the URL as a string when calling its constructor, or by providing a relative URL and a base URL. You can then easily read the parsed components of the URL or make changes to the URL.

If a browser doesn't yet support the URL() constructor, you can access a URL object using the Window interface's URL property. Be sure to check to see if any of your target browsers require this to be prefixed.

Note: This feature is available in Web Workers

Constructor

new URL()

Creates and returns a URL object referencing the URL specified using an absolute URL string, or a relative URL string and a base URL string.

Properties

hash

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

host

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

hostname

A USVString containing the domain of the URL.

href

A stringifier that returns a USVString containing the whole URL.

origin Read only

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

password

A USVString containing the password specified before the domain name.

pathname

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

port

A USVString containing the port number of the URL.

protocol

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

search

A USVString 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 USVString containing the username specified before the domain name.

Methods

toString()

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

toJSON()

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

Static methods

createObjectURL()

Returns a DOMString 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.

revokeObjectURL()

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

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"

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

Specification
URL Standard (URL)
# api

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
URL
32
19
12
19
["Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).", "To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);."]
10
19
15
7
6
4.4
4
32
25
19
["Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).", "To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);."]
19
14
7
6
2.0
1.5
URL
19
12
26
No
15
6
In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
≤37
25
26
14
6
In Safari 14 and earlier, calling the URL constructor with a base URL whose value is undefined causes Safari to throw a TypeError; see WebKit bug 216841.
1.5
createObjectURL
19
12
19
createObjectURL() is no longer available within the context of a ServiceWorker.
10
If the underlying object does not have a content type set, using this URL as the src of an img tag fails intermittently with error DOM7009.
15
6
≤37
25
19
createObjectURL() is no longer available within the context of a ServiceWorker.
14
6
1.5
hash
32
13
22
No
19
7
4.4.3
32
22
19
7
2.0
host
32
13
22
No
19
7
4.4.3
32
22
19
7
2.0
hostname
32
13
22
No
19
10
4.4.3
32
22
19
Yes
2.0
href
32
13
22
No
19
10
4.4.3
32
22
19
Yes
2.0
origin
32
12
26
26-49
Results for URL using the blob scheme incorrectly returned null.
No
19
10
≤37
32
26
26-49
Results for URL using the blob scheme incorrectly returned null.
19
Yes
6.0
password
32
12
26
No
19
10
≤37
32
26
19
Yes
6.0
pathname
32
13
22
Before Firefox 53, pathname and search returned wrong values for custom protocols. Given protocol:host/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483.
No
19
10
4.4.3
32
22
Before Firefox 53, pathname and search returned wrong values for custom protocols. Given protocol:host/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483.
19
Yes
2.0
port
32
13
22
No
19
10
4.4.3
32
22
19
Yes
2.0
protocol
32
13
22
No
19
10
4.4.3
32
22
19
Yes
2.0
revokeObjectURL
19
12
19
revokeObjectURL() is no longer available within the context of a ServiceWorker.
10
15
6
≤37
25
19
revokeObjectURL() is no longer available within the context of a ServiceWorker.
14
6
1.5
search
32
13
22
Before Firefox 53, pathname and search returned wrong values for custom protocols. Given protocol:host/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483.
No
19
10
4.4.3
32
22
Before Firefox 53, pathname and search returned wrong values for custom protocols. Given protocol:host/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively. See bug 1310483.
19
Yes
2.0
searchParams
51
17
29
No
38
10
51
51
29
41
10
5.0
toJSON
71
17
54
No
58
11
71
71
54
50
11
10.0
toString
19
17
54
No
15
7
≤37
25
54
14
7
6.0
username
32
12
26
No
19
10
≤37
32
26
19
Yes
6.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/URL