Introduction:

JavaScript is a versatile programming language widely used for web development. One common requirement in web applications is the ability to retrieve the current URL. Whether you want to perform specific actions based on the URL or dynamically display it to the user, understanding different methods to retrieve the current URL is essential. In this blog post, we will explore multiple approaches to achieve this using JavaScript. We will discuss each method, provide example code, and explain the output and functionality of each approach. By the end of this article, you will have a comprehensive understanding of how to retrieve the current URL in JavaScript.

Method 1: Using the window.location object

The window.location object in JavaScript provides access to the current URL. It contains various properties such as href, host, pathname, etc., which hold different parts of the URL. The following code snippet demonstrates how to retrieve the current URL using the window.location.href property:

const currentURL = window.location.href;
console.log(currentURL);

Output:

The output of this code will be the complete URL of the current web page, including the protocol, domain, path, and any query parameters.

Method 2: Utilizing the document.URL property

Another method to obtain the current URL is by using the document.URL property. It provides a read-only string containing the full URL of the document, similar to window.location.href. Here's an example:

const currentURL = document.URL;
console.log(currentURL);

Output:

The output will be the same as the previous method, giving you the complete URL of the current web page.

Method 3: Accessing the URL from the location object

The location object is a property of the window object and holds information about the current URL. By accessing the location.href property, we can retrieve the complete URL. Here's an example:

const currentURL = location.href;
console.log(currentURL);

Output:

This code will produce the same result as the previous methods, providing the complete URL of the current web page.

Method 4: Using the URLSearchParams API

If you want to extract specific parts of the URL, such as query parameters, you can utilize the URLSearchParams API. It allows you to manipulate and retrieve the query string parameters. Here's an example:

const searchParams = new URLSearchParams(window.location.search);
const parameterValue = searchParams.get('parameter');
console.log(parameterValue);

Output:

By specifying the desired parameter name, this code retrieves the corresponding value from the query string.

Conclusion:

In this blog post, we explored various methods to retrieve the current URL in JavaScript. We discussed four different approaches: using the window.location object, the document.URL property, the location object, and the URLSearchParams API. Each method provides a straightforward way to obtain the current URL or specific parts of it, depending on your requirements.

It is important to choose the method that best suits your use case and take into consideration browser compatibility and security implications. By understanding these methods, you can effectively work with URLs in JavaScript and build more dynamic and interactive web applications.