How JS Handles URLs: A Detailed Guide on the Usage of the URL Object

In modern web development, URLs (Uniform Resource Locators) are central to interacting with web resources. JavaScript provides the URL object, which makes it easy to parse, modify, and construct URLs. This article delves into the usage of the URL object to help developers efficiently manage URLs.

1. Creating a URL Object

You can use the URL constructor to create a new URL object, which takes a URL string as a parameter.

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2
console.log(url);

This url object contains the complete URL information, including protocol, hostname, path, query string, and hash part.

2. Common Properties

The URL object provides many useful properties to easily access different parts of the URL:

• href: Returns the full URL string.
• protocol: Returns the protocol part of the URL, such as https:.
• hostname: Returns the hostname part of the URL, excluding the port number.
• port: Returns the port number (if present).
• pathname: Returns the path part of the URL.
• search: Returns the query string part of the URL (including the ?).
• hash: Returns the hash part of the URL (including the #).

Example:

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2

3
console.log(url.href); // https://www.example.com:8080/path/name?query=test#hash
4
console.log(url.protocol); // https:
5
console.log(url.hostname); // www.example.com
6
console.log(url.port); // 8080
7
console.log(url.pathname); // /path/name
8
console.log(url.search); // ?query=test
9
console.log(url.hash); // #hash

3. Modifying a URL

The properties of a URL object are mutable, meaning you can directly modify various parts of the URL.

1
const url = new URL("https://www.example.com/path/name");
2
url.pathname = "/new/path";
3
url.search = "?search=query";
4
url.hash = "#newhash";
5

6
console.log(url.href); // https://www.example.com/new/path?search=query#newhash

By modifying properties like pathname, search, and hash, you can easily update the URL.

4. Working with Query Parameters (searchParams)

The searchParams property of the URL object provides a URLSearchParams object, allowing you to easily manage query strings.

Adding Query Parameters

1
url.searchParams.append("newParam", "value");
2
console.log(url.href); // https://www.example.com/new/path?search=query&newParam=value

Retrieving Query Parameters

1
console.log(url.searchParams.get("search")); // query

Modifying Query Parameters

1
url.searchParams.set("search", "newQuery");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery&newParam=value

Deleting Query Parameters

1
url.searchParams.delete("newParam");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery

URLSearchParams offers convenient methods to add, retrieve, modify, and delete query parameters.

5. Handling Relative URLs

By providing a base URL to the URL constructor, JavaScript can automatically resolve relative paths.

1
const relativeUrl = new URL("/relative/path", "https://www.example.com");
2
console.log(relativeUrl.href); // https://www.example.com/relative/path

6. URL Encoding and Decoding

When dealing with query parameters in URLs, special characters sometimes need to be encoded or decoded. JavaScript provides the following methods:

• encodeURIComponent(): Encodes a URL component.
• decodeURIComponent(): Decodes an encoded URL component.

Example:

1
const param = "name=John Doe";
2
const encoded = encodeURIComponent(param);
3
console.log(encoded); // name%3DJohn%20Doe
4

5
const decoded = decodeURIComponent(encoded);
6
console.log(decoded); // name=John Doe

These methods ensure that strings passed within URLs do not contain illegal characters.

Conclusion

The URL object provides developers with a powerful tool for parsing, modifying, and generating URLs. Whether parsing query parameters, modifying paths, or constructing new URLs, the URL object and its associated URLSearchParams object are invaluable for efficiently and reliably handling URLs.