URLs (Uniform Resource Locators) are a fundamental part of the web, serving as addresses for web pages, APIs, and resources. Understanding how to manipulate URLs in JavaScript is crucial for creating dynamic applications, handling navigation, passing data, and managing deep links.

What is a URL?

A URL (Uniform Resource Locator) is the address used to access resources on the web. A typical URL looks like this:

https://www.example.com:8080/products?category=shoes&page=2#reviews

Breakdown of URL Components:

Protocol (https://) - Specifies the communication method (e.g., HTTP, HTTPS, FTP).
Domain Name (www.example.com) - The web address.
Port (8080) - Optional; used for specific services (default for HTTPS is 443).
Path (/products) - The specific resource being accessed.
Query Parameters (?category=shoes&page=2) - Key-value pairs that provide additional data.
Fragment Identifier (#reviews) - A section of the page (not sent to the server).

Working with URLs in JavaScript

JavaScript provides several ways to manipulate and work with URLs effectively.

1. The `window.location` Object

The window.location object gives access to the current page's URL and allows redirection.

console.log(window.location.href); // Get full URL

console.log(window.location.hostname); // Get domain

console.log(window.location.pathname); // Get path

console.log(window.location.search); // Get query string

// Redirect to another page

window.location.href = "https://example.com";

2. Using the `URL` API

JavaScript has a built-in URL class to manipulate URLs easily.

const url = new URL("https://example.com/products?category=shoes&page=2");

console.log(url.protocol); // "https:"

console.log(url.hostname); // "example.com"

console.log(url.pathname); // "/products"

console.log(url.searchParams.get("category")); // "shoes"

// Modify query parameters

url.searchParams.set("page", "3");

console.log(url.toString()); // "https://example.com/products?category=shoes&page=3"

3. Extracting Query Parameters

To retrieve query parameters in JavaScript, use URLSearchParams:

const params = new URLSearchParams(window.location.search);

console.log(params.get("category")); // Retrieves "shoes"

console.log(params.has("page")); // Checks if "page" exists

For handling multiple values:

params.append("size", "large");

console.log(params.getAll("size")); // Array of values

Creating Dynamic Routes in Vanilla JavaScript

1. Handling Route Changes Manually

To handle route changes dynamically, use:

window.location.href = `item.html?productId=${productId}`;

This approach enhances navigation and improves user experience by allowing dynamic content loading based on URL parameters.

2. Extracting Path Parameters

If you want to extract dynamic segments from the URL, you can split the pathname:

const pathSegments = window.location.pathname.split("/");

console.log(pathSegments); // ["", "products", "123"]

const productId = pathSegments[2];

console.log("Product ID:", productId);

3. Handling Query Strings and Hash Fragments

You can detect changes in query parameters or hash fragments dynamically:

window.addEventListener("hashchange", () => {

console.log("Hash changed to:", window.location.hash);

});

window.addEventListener("popstate", () => {

const params = new URLSearchParams(window.location.search);

console.log("Current category:", params.get("category"));

});

Project

Let's create a simple project to apply what we have learned.

In your text editor create three files: index.html, products.html and item.html

Home Page (index.html)

<!DOCTYPE html>

<head>

</head>

<body>

This is the Home Page

<a href="./products.html">products page</a>

</body>

</html>

Products Page (products.html)

List all available products with buttons that, when clicked, navigate to item.html with the respective product ID passed as a URL parameter.

<!DOCTYPE html>

<head>

<title>Products Page</title>

</head>

<body>

<h2>Available Products</h2>

// Sample product data

const products = [

{ id: 123, name: 'Product 123' },

{ id: 124, name: 'Product 124' },

{ id: 125, name: 'Product 125' },

// Add more products as needed

];

// Function to create product buttons

function createProductButtons() {

const productList = document.getElementById('product-list');

products.forEach(product => {

const button = document.createElement('button');

button.textContent = `View ${product.name}`;

button.onclick = () => viewProduct(product.id);

productList.appendChild(button);

});

}

// Function to navigate to item.html with productId

function viewProduct(productId) {

window.location.href = `item.html?productId=${productId}`;

}

// Initialize product buttons

createProductButtons();

</script>

</body>

</html>

In the script, the createProductButtons function dynamically generates buttons for each product using JavaScript's createElement method, appending them to the product-list div. Each button, when clicked, calls the viewProduct function, which navigates to item.html with the corresponding productId as a URL parameter.

Product Details Page (item.html)

This page retrieves the productId from the URL, fetches the relevant product details, and displays them.

<!DOCTYPE html>

<head>

<title>Product Details</title>

</head>

<body>

// Function to get URL parameters

function getQueryParam(param) {

const urlParams = new URLSearchParams(window.location.search);

return urlParams.get(param);

}

// Get the productId from URL parameters

const productId = getQueryParam('productId');

// Sample product data

const products = {

123: { name: 'Product 123', description: 'Description of Product 123', price: '$10' },

124: { name: 'Product 124', description: 'Description of Product 124', price: '$15' },

125: { name: 'Product 125', description: 'Description of Product 125', price: '$20' },

// Add more products as needed

};

// Display product details

if (productId && products[productId]) {

const product = products[productId];

const productDetailsDiv = document.getElementById('product-details');

productDetailsDiv.innerHTML = `

<h1>${product.name}</h1>

<p>${product.description}</p>

<p>Price: ${product.price}</p>

`;

} else {

document.getElementById('product-details').textContent = 'Product not found.';

}

</script>

</body>

</html>

Here, the getQueryParam function extracts the productId from the URL. The script then uses this ID to retrieve and display the corresponding product's details.

For a production environment, consider fetching product data from a server or database using asynchronous requests (e.g., fetch API) to keep the data centralized and up-to-date.

Conclusion

Mastering URL manipulation in JavaScript is essential for modern web development. Whether working with query parameters, dynamic routes, or programmatic navigation, handling URLs efficiently improves the user experience and application scalability.

🚀🚀🚀