How to get the current URL with JavaScript

When working with JavaScript, accessing the current page's URL is a common task for various purposes like analytics tracking, dynamic content updates, and more. In this guide, we'll explore different methods to achieve this.

1. Using window.location

The most straightforward method is by utilizing the window.location object, which contains information about the current URL, including the protocol, host, pathname, search parameters, and more.

const currentURL = window.location.href;
console.log("Current URL:", currentURL);

This will return the complete URL of the current page, including any hash or query parameters.

2. Using document.URL

Another approach is by accessing the document.URL property, which provides the same result as window.location.href.

const currentURL = document.URL;
console.log("Current URL:", currentURL);

3. Using location.pathname

If you only need the path part of the URL (without the protocol, host, or query parameters), you can use the location.pathname property.

const path = window.location.pathname;
console.log("Current Path:", path);

This will return the path portion of the URL.

Conclusion

These examples cover various methods to retrieve different parts of the current URL using JavaScript. Additionally, you can refer to the MDN Web Docs for more information on the Location interface and its properties.