Class: URL#
Browser-compatible URL class, implemented by following the WHATWG URL
Standard. Examples of parsed URLs may be found in the Standard itself.
The URL class is also available on the global object.
In accordance with browser conventions, all properties of URL objects
are implemented as getters and setters on the class prototype, rather than as
data properties on the object itself. Thus, unlike legacy urlObjects,
using the delete keyword on any properties of URL objects (e.g. delete myURL.protocol, delete myURL.pathname, etc) has no effect but will still
return true.
new URL(input[, base])#
input <string> The absolute or relative input URL to parse. If input
is relative, then base is required. If input is absolute, the base
is ignored. If input is not a string, it is converted to a string first.
base <string> The base URL to resolve against if the input is not
absolute. If base is not a string, it is converted to a string first.
Creates a new URL object by parsing the input relative to the base. If
base is passed as a string, it will be parsed equivalent to new URL(base).
const myURL = new URL('/foo', 'https://example.org/');
The URL constructor is accessible as a property on the global object.
It can also be imported from the built-in url module:
import { URL } from 'node:url';
console.log(URL === globalThis.URL); console.log(URL === require('node:url').URL);
A TypeError will be thrown if the input or base are not valid URLs. Note
that an effort will be made to coerce the given values into strings. For
instance:
const myURL = new URL({ toString: () => 'https://example.org/' });
Unicode characters appearing within the host name of input will be
automatically converted to ASCII using the Punycode algorithm.
const myURL = new URL('https://測試');
In cases where it is not known in advance if input is an absolute URL
and a base is provided, it is advised to validate that the origin of
the URL object is what is expected.
let myURL = new URL('http://Example.com/', 'https://example.org/');
myURL = new URL('https://Example.com/', 'https://example.org/');
myURL = new URL('foo://Example.com/', 'https://example.org/');
myURL = new URL('http:Example.com/', 'https://example.org/');
myURL = new URL('https:Example.com/', 'https://example.org/');
myURL = new URL('foo:Example.com/', 'https://example.org/');
url.hash#
Gets and sets the fragment portion of the URL.
const myURL = new URL('https://example.org/foo#bar');
console.log(myURL.hash);
myURL.hash = 'baz';
console.log(myURL.href);
Invalid URL characters included in the value assigned to the hash property
are percent-encoded. The selection of which characters to
percent-encode may vary somewhat from what the url.parse() and
url.format() methods would produce.
url.host#
Gets and sets the host portion of the URL.
const myURL = new URL('https://example.org:81/foo');
console.log(myURL.host);
myURL.host = 'example.com:82';
console.log(myURL.href);
Invalid host values assigned to the host property are ignored.
url.hostname#
Gets and sets the host name portion of the URL. The key difference between
url.host and url.hostname is that url.hostname does not include the
port.
const myURL = new URL('https://example.org:81/foo');
console.log(myURL.hostname);
myURL.hostname = 'example.com';
console.log(myURL.href);
myURL.host = 'example.org:82';
console.log(myURL.href);
Invalid host name values assigned to the hostname property are ignored.
url.href#
Gets and sets the serialized URL.
const myURL = new URL('https://example.org/foo');
console.log(myURL.href);
myURL.href = 'https://example.com/bar';
console.log(myURL.href);
Getting the value of the href property is equivalent to calling
url.toString().
Setting the value of this property to a new value is equivalent to creating a
new URL object using new URL(value). Each of the URL
object's properties will be modified.
If the value assigned to the href property is not a valid URL, a TypeError
will be thrown.
url.origin#
Gets the read-only serialization of the URL's origin.
const myURL = new URL('https://example.org/foo/bar?baz');
console.log(myURL.origin);
const idnURL = new URL('https://測試');
console.log(idnURL.origin);
console.log(idnURL.hostname);
url.password#
Gets and sets the password portion of the URL.
const myURL = new URL('https://abc:xyz@example.com');
console.log(myURL.password);
myURL.password = '123';
console.log(myURL.href);
Invalid URL characters included in the value assigned to the password property
are percent-encoded. The selection of which characters to
percent-encode may vary somewhat from what the url.parse() and
url.format() methods would produce.
url.pathname#
Gets and sets the path portion of the URL.
const myURL = new URL('https://example.org/abc/xyz?123');
console.log(myURL.pathname);
myURL.pathname = '/abcdef';
console.log(myURL.href);
Invalid URL characters included in the value assigned to the pathname
property are percent-encoded. The selection of which characters
to percent-encode may vary somewhat from what the url.parse() and
url.format() methods would produce.
url.port#
Gets and sets the port portion of the URL.
The port value may be a number or a string containing a number in the range
0 to 65535 (inclusive). Setting the value to the default port of the
URL objects given protocol will result in the port value becoming
the empty string ('').
The port value can be an empty string in which case the port depends on
the protocol/scheme:
| protocol | port |
|---|
| "ftp" | 21 |
| "file" | |
| "http" | 80 |
| "https" | 443 |
| "ws" | 80 |
| "wss" | 443 |
Upon assigning a value to the port, the value will first be converted to a
string using .toString().
If that string is invalid but it begins with a number, the leading number is
assigned to port.
If the number lies outside the range denoted above, it is ignored.
const myURL = new URL('https://example.org:8888');
console.log(myURL.port);
myURL.port = '443';
console.log(myURL.port);
console.log(myURL.href);
myURL.port = 1234;
console.log(myURL.port);
console.log(myURL.href);
myURL.port = 'abcd';
console.log(myURL.port);
myURL.port = '5678abcd';
console.log(myURL.port);
myURL.port = 1234.5678;
console.log(myURL.port);
myURL.port = 1e10;
console.log(myURL.port);
Numbers which contain a decimal point,
such as floating-point numbers or numbers in scientific notation,
are not an exception to this rule.
Leading numbers up to the decimal point will be set as the URL's port,
assuming they are valid:
myURL.port = 4.567e21;
console.log(myURL.port);
url.protocol#
Gets and sets the protocol portion of the URL.
const myURL = new URL('https://example.org');
console.log(myURL.protocol);
myURL.protocol = 'ftp';
console.log(myURL.href);
Invalid URL protocol values assigned to the protocol property are ignored.
Special schemes#
The WHATWG URL Standard considers a handful of URL protocol schemes to be
special in terms of how they are parsed and serialized. When a URL is
parsed using one of these special protocols, the url.protocol property
may be changed to another special protocol but cannot be changed to a
non-special protocol, and vice versa.
For instance, changing from http to https works:
const u = new URL('http://example.org');
u.protocol = 'https';
console.log(u.href);
However, changing from http to a hypothetical fish protocol does not
because the new protocol is not special.
const u = new URL('http://example.org');
u.protocol = 'fish';
console.log(u.href);
Likewise, changing from a non-special protocol to a special protocol is also
not permitted:
const u = new URL('fish://example.org');
u.protocol = 'http';
console.log(u.href);
According to the WHATWG URL Standard, special protocol schemes are ftp,
file, http, https, ws, and wss.
url.search#
Gets and sets the serialized query portion of the URL.
const myURL = new URL('https://example.org/abc?123');
console.log(myURL.search);
myURL.search = 'abc=xyz';
console.log(myURL.href);
Any invalid URL characters appearing in the value assigned the search
property will be percent-encoded. The selection of which
characters to percent-encode may vary somewhat from what the url.parse()
and url.format() methods would produce.
url.searchParams#
Gets the URLSearchParams object representing the query parameters of the
URL. This property is read-only but the URLSearchParams object it provides
can be used to mutate the URL instance; to replace the entirety of query
parameters of the URL, use the url.search setter. See
URLSearchParams documentation for details.
Use care when using .searchParams to modify the URL because,
per the WHATWG specification, the URLSearchParams object uses
different rules to determine which characters to percent-encode. For
instance, the URL object will not percent encode the ASCII tilde (~)
character, while URLSearchParams will always encode it:
const myURL = new URL('https://example.org/abc?foo=~bar');
console.log(myURL.search);
myURL.searchParams.sort();
console.log(myURL.search);
url.username#
Gets and sets the username portion of the URL.
const myURL = new URL('https://abc:xyz@example.com');
console.log(myURL.username);
myURL.username = '123';
console.log(myURL.href);
Any invalid URL characters appearing in the value assigned the username
property will be percent-encoded. The selection of which
characters to percent-encode may vary somewhat from what the url.parse()
and url.format() methods would produce.
url.toString()#
The toString() method on the URL object returns the serialized URL. The
value returned is equivalent to that of url.href and url.toJSON().
url.toJSON()#
Added in: v7.7.0, v6.13.0
The toJSON() method on the URL object returns the serialized URL. The
value returned is equivalent to that of url.href and
url.toString().
This method is automatically called when an URL object is serialized
with JSON.stringify().
const myURLs = [
new URL('https://www.example.com'),
new URL('https://test.example.org'),
];
console.log(JSON.stringify(myURLs));
URL.createObjectURL(blob)#
Creates a 'blob:nodedata:...' URL string that represents the given <Blob>
object and can be used to retrieve the Blob later.
const {
Blob,
resolveObjectURL,
} = require('node:buffer');
const blob = new Blob(['hello']);
const id = URL.createObjectURL(blob);
const otherBlob = resolveObjectURL(id);
console.log(otherBlob.size);
The data stored by the registered <Blob> will be retained in memory until
URL.revokeObjectURL() is called to remove it.
Blob objects are registered within the current thread. If using Worker
Threads, Blob objects registered within one Worker will not be available
to other workers or the main thread.
URL.revokeObjectURL(id)#
id <string> A 'blob:nodedata:... URL string returned by a prior call to
URL.createObjectURL().
Removes the stored <Blob> identified by the given ID. Attempting to revoke a
ID that isn't registered will silently fail.
URL.canParse(input[, base])#
Added in: v19.9.0, v18.17.0
input <string> The absolute or relative input URL to parse. If input
is relative, then base is required. If input is absolute, the base
is ignored. If input is not a string, it is converted to a string first.
base <string> The base URL to resolve against if the input is not
absolute. If base is not a string, it is converted to a string first.
- Returns: <boolean>
Checks if an input relative to the base can be parsed to a URL.
const isValid = URL.canParse('/foo', 'https://example.org/');
const isNotValid = URL.canParse('/foo');
URL.parse(input[, base])#
Added in: v22.1.0
input <string> The absolute or relative input URL to parse. If input
is relative, then base is required. If input is absolute, the base
is ignored. If input is not a string, it is converted to a string first.
base <string> The base URL to resolve against if the input is not
absolute. If base is not a string, it is converted to a string first.
- Returns: <URL> | <null>
Parses a string as a URL. If base is provided, it will be used as the base
URL for the purpose of resolving non-absolute input URLs. Returns null
if the parameters can't be resolved to a valid URL.
Class: URLSearchParams#
The URLSearchParams API provides read and write access to the query of a
URL. The URLSearchParams class can also be used standalone with one of the
four following constructors.
The URLSearchParams class is also available on the global object.
The WHATWG URLSearchParams interface and the querystring module have
similar purpose, but the purpose of the querystring module is more
general, as it allows the customization of delimiter characters (& and =).
On the other hand, this API is designed purely for URL query strings.
const myURL = new URL('https://example.org/?abc=123');
console.log(myURL.searchParams.get('abc'));
myURL.searchParams.append('abc', 'xyz');
console.log(myURL.href);
myURL.searchParams.delete('abc');
myURL.searchParams.set('a', 'b');
console.log(myURL.href);
const newSearchParams = new URLSearchParams(myURL.searchParams);
newSearchParams.append('a', 'c');
console.log(myURL.href);
console.log(newSearchParams.toString());
myURL.search = newSearchParams;
console.log(myURL.href);
newSearchParams.delete('a');
console.log(myURL.href);
new URLSearchParams()#
Instantiate a new empty URLSearchParams object.
new URLSearchParams(string)#
Parse the string as a query string, and use it to instantiate a new
URLSearchParams object. A leading '?', if present, is ignored.
let params;
params = new URLSearchParams('user=abc&query=xyz');
console.log(params.get('user'));
console.log(params.toString());
params = new URLSearchParams('?user=abc&query=xyz');
console.log(params.toString());
new URLSearchParams(obj)#
Added in: v7.10.0, v6.13.0
obj <Object> An object representing a collection of key-value pairs
Instantiate a new URLSearchParams object with a query hash map. The key and
value of each property of obj are always coerced to strings.
Unlike querystring module, duplicate keys in the form of array values are
not allowed. Arrays are stringified using array.toString(), which simply
joins all array elements with commas.
const params = new URLSearchParams({
user: 'abc',
query: ['first', 'second'],
});
console.log(params.getAll('query'));
console.log(params.toString());
new URLSearchParams(iterable)#
Added in: v7.10.0, v6.13.0
iterable <Iterable> An iterable object whose elements are key-value pairs
Instantiate a new URLSearchParams object with an iterable map in a way that
is similar to <Map>'s constructor. iterable can be an Array or any
iterable object. That means iterable can be another URLSearchParams, in
which case the constructor will simply create a clone of the provided
URLSearchParams. Elements of iterable are key-value pairs, and can
themselves be any iterable object.
Duplicate keys are allowed.
let params;
params = new URLSearchParams([
['user', 'abc'],
['query', 'first'],
['query', 'second'],
]);
console.log(params.toString());
const map = new Map();
map.set('user', 'abc');
map.set('query', 'xyz');
params = new URLSearchParams(map);
console.log(params.toString());
function* getQueryPairs() {
yield ['user', 'abc'];
yield ['query', 'first'];
yield ['query', 'second'];
}
params = new URLSearchParams(getQueryPairs());
console.log(params.toString());
new URLSearchParams([
['user', 'abc', 'error'],
]);
urlSearchParams.append(name, value)#
Append a new name-value pair to the query string.
urlSearchParams.delete(name[, value])#
If value is provided, removes all name-value pairs
where name is name and value is value..
If value is not provided, removes all name-value pairs whose name is name.
urlSearchParams.entries()#
Returns an ES6 Iterator over each of the name-value pairs in the query.
Each item of the iterator is a JavaScript Array. The first item of the Array
is the name, the second item of the Array is the value.
Alias for urlSearchParams[Symbol.iterator]().
urlSearchParams.forEach(fn[, thisArg])#
fn <Function> Invoked for each name-value pair in the query
thisArg <Object> To be used as this value for when fn is called
Iterates over each name-value pair in the query and invokes the given function.
const myURL = new URL('https://example.org/?a=b&c=d');
myURL.searchParams.forEach((value, name, searchParams) => {
console.log(name, value, myURL.searchParams === searchParams);
});
urlSearchParams.get(name)#
Returns the value of the first name-value pair whose name is name. If there
are no such pairs, null is returned.
urlSearchParams.getAll(name)#
Returns the values of all name-value pairs whose name is name. If there are
no such pairs, an empty array is returned.
urlSearchParams.has(name[, value])#
Checks if the URLSearchParams object contains key-value pair(s) based on
name and an optional value argument.
If value is provided, returns true when name-value pair with
same name and value exists.
If value is not provided, returns true if there is at least one name-value
pair whose name is name.
urlSearchParams.keys()#
Returns an ES6 Iterator over the names of each name-value pair.
const params = new URLSearchParams('foo=bar&foo=baz');
for (const name of params.keys()) {
console.log(name);
}
urlSearchParams.set(name, value)#
Sets the value in the URLSearchParams object associated with name to
value. If there are any pre-existing name-value pairs whose names are name,
set the first such pair's value to value and remove all others. If not,
append the name-value pair to the query string.
const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('foo', 'baz');
params.append('abc', 'def');
console.log(params.toString());
params.set('foo', 'def');
params.set('xyz', 'opq');
console.log(params.toString());
urlSearchParams.size#
Added in: v19.8.0, v18.16.0
The total number of parameter entries.
urlSearchParams.sort()#
Added in: v7.7.0, v6.13.0
Sort all existing name-value pairs in-place by their names. Sorting is done
with a stable sorting algorithm, so relative order between name-value pairs
with the same name is preserved.
This method can be used, in particular, to increase cache hits.
const params = new URLSearchParams('query[]=abc&type=search&query[]=123');
params.sort();
console.log(params.toString());
urlSearchParams.toString()#
Returns the search parameters serialized as a string, with characters
percent-encoded where necessary.
urlSearchParams.values()#
Returns an ES6 Iterator over the values of each name-value pair.
urlSearchParams[Symbol.iterator]()#
Returns an ES6 Iterator over each of the name-value pairs in the query string.
Each item of the iterator is a JavaScript Array. The first item of the Array
is the name, the second item of the Array is the value.
Alias for urlSearchParams.entries().
const params = new URLSearchParams('foo=bar&xyz=baz');
for (const [name, value] of params) {
console.log(name, value);
}