How to Parse URLs in JavaScript: The URL API vs Manual Parsing

The URL API is indeed a powerful tool for working with URLs in JavaScript, offering a more robust and standardized approach compared to the older method of using DOM elements like <a> tags. Here’s an overview of how you can effectively use the URL and URLSearchParams APIs:

Parsing URLs

Basic Usage

javascript
 
1const url = new URL('https://example.com/path?query=param');
2console.log(url.protocol); // "https:"
3console.log(url.host);     // "example.com"
4console.log(url.hostname); // "example.com"
5console.log(url.port);     // ""
6console.log(url.pathname); // "/path"
7console.log(url.search);   // "?query=param"

Extracting Query Parameters

javascript
 
1const url = new URL('https://example.com/path?query=param');
2const params = new URLSearchParams(url.search);
3console.log(params.get('query')); // "param"
4params.append('another', 'value'); // Adds another query parameter
5console.log(Array.from(params.entries())); // [["query", "param"], ["another", "value"]]

Building URLs

Constructing a New URL

javascript
 
1const url = new URL('/path
2
3[Read the full article at DEV Community](https://dev.to/snappy_tools/how-to-parse-urls-in-javascript-the-url-api-vs-manual-parsing-1h0m)
4
5---
6
7**Want to create content about this topic?** [Use Nemati AI tools](https://nemati.ai) to generate articles, social posts, and more.