|
The URL class provides utilities for parsing, constructing, and manipulating URLs. It follows the WHATWG URL Standard, the same API used in browsers.
|
|
|
Parsing URLs
Create a URL object by passing a URL string. It parses all components automatically.
|
const url = new URL('https://user:pass@example.com:8080/path/to/page?search=test&page=1#section');
console.log('href:', url.href);
console.log('protocol:', url.protocol);
console.log('username:', url.username);
console.log('password:', url.password);
console.log('host:', url.host);
console.log('hostname:', url.hostname);
console.log('port:', url.port);
console.log('pathname:', url.pathname);
console.log('search:', url.search);
console.log('hash:', url.hash);
console.log('origin:', url.origin);
|
|
Relative URLs
Parse relative URLs by providing a base URL as the second argument.
|
const base = 'https://example.com/docs/guide/';
const relative = new URL('../api/users', base);
console.log('Resolved:', relative.href);
const absolute = new URL('/about', 'https://example.com/any/path');
console.log('Absolute path:', absolute.href);
|
|
Query Parameters with URLSearchParams
The searchParams property provides a URLSearchParams object for working with query strings.
Add parameters
'https://api.example.com/search?query=nodejs&page=1&limit=10'
|
const apiUrl = new URL('https://api.example.com/search');
apiUrl.searchParams.set('query', 'nodejs');
apiUrl.searchParams.set('page', '1');
apiUrl.searchParams.set('limit', '10');
console.log('With params:', apiUrl.href);
|
|
Reading Query Parameters
URLSearchParams provides methods to read query string values.
Get single value
Get all values for a key (for repeated params)
Check if parameter exists
|
const searchUrl = new URL('https://example.com?name=Alice&tags=js&tags=node&active=true');
const params = searchUrl.searchParams;
console.log('name:', params.get('name'));
console.log('tags:', params.getAll('tags'));
console.log('has name:', params.has('name'));
console.log('has email:', params.has('email'));
|
|
Modifying Query Parameters
URLSearchParams is mutable - changes reflect in the URL.
|
const editUrl = new URL('https://example.com?page=1');
editUrl.searchParams.set('page', '2');
editUrl.searchParams.append('filter', 'new');
editUrl.searchParams.append('filter', 'hot');
editUrl.searchParams.delete('page');
console.log('Modified:', editUrl.search);
|
|
Iterating Query Parameters
URLSearchParams is iterable.
Iterate entries
Get all keys
Get all values
Convert to object
|
const iterUrl = new URL('https://example.com?a=1&b=2&c=3');
for (const [key, value] of iterUrl.searchParams) {
console.log(`${key} = ${value}`);
}
console.log('Keys:', [...iterUrl.searchParams.keys()]);
console.log('Values:', [...iterUrl.searchParams.values()]);
const paramsObject = Object.fromEntries(iterUrl.searchParams);
console.log('As object:', paramsObject);
|
|
Sorting and Converting
Sort parameters alphabetically or convert to string.
Convert to string (for use in fetch, etc.)
|
const sortUrl = new URL('https://example.com?z=3&a=1&m=2');
sortUrl.searchParams.sort();
console.log('Sorted:', sortUrl.search);
const queryString = sortUrl.searchParams.toString();
console.log('String:', queryString);
|
|
Creating URLs Programmatically
Build URLs by setting properties.
'https://example.com/api/users?role=admin#top'
|
const newUrl = new URL('https://example.com');
newUrl.pathname = '/api/users';
newUrl.searchParams.set('role', 'admin');
newUrl.hash = 'top';
console.log('Built URL:', newUrl.href);
|
|
URL Encoding
Special characters are automatically encoded.
'https://example.com/search?q=hello+world+%26+more'
Spaces become + in query strings, %20 in paths
|
const encoded = new URL('https://example.com/search');
encoded.searchParams.set('q', 'hello world & more');
console.log('Encoded:', encoded.href);
const pathUrl = new URL('https://example.com');
pathUrl.pathname = '/path with spaces';
console.log('Path encoded:', pathUrl.pathname);
|
|
URLSearchParams Standalone
Use URLSearchParams independently for parsing/building query strings.
Build from object
Build from array of pairs
|
const standalone = new URLSearchParams('name=Bob&age=30');
console.log('Parsed name:', standalone.get('name'));
const fromObject = new URLSearchParams({ city: 'NYC', country: 'USA' });
console.log('From object:', fromObject.toString());
const fromArray = new URLSearchParams([['x', '1'], ['y', '2']]);
console.log('From array:', fromArray.toString());
|
|
Validating URLs
Use URL.canParse() or try-catch to validate URLs.
|
console.log('Valid:', URL.canParse('https://example.com'));
console.log('Invalid:', URL.canParse('not a url'));
function isValidUrl(string) {
try {
new URL(string);
return true;
} catch {
return false;
}
}
|
|
Comparing URLs
Compare URLs by their href property.
Normalize for comparison
|
const url1 = new URL('https://example.com/path?a=1&b=2');
const url2 = new URL('https://example.com/path?b=2&a=1');
console.log('Same href:', url1.href === url2.href);
url1.searchParams.sort();
url2.searchParams.sort();
console.log('After sort:', url1.href === url2.href);
|
|
Practical Example: API URL Builder
A utility function for building API URLs.
Usage
'https://api.example.com/v1/users?role=admin&status=active&fields=name&fields=email'
|
function buildApiUrl(baseUrl, endpoint, params = {}) {
const url = new URL(endpoint, baseUrl);
for (const [key, value] of Object.entries(params)) {
if (value !== undefined && value !== null) {
if (Array.isArray(value)) {
value.forEach(v => url.searchParams.append(key, v));
} else {
url.searchParams.set(key, String(value));
}
}
}
return url.href;
}
const apiEndpoint = buildApiUrl(
'https://api.example.com',
'/v1/users',
{ role: 'admin', status: 'active', fields: ['name', 'email'] }
);
console.log('API URL:', apiEndpoint);
|