How To Get Current Page Url In Javascript

In the realm of web development, knowing how to retrieve the current page URL using JavaScript is a fundamental skill. This functionality is commonly required for various tasks, such as tracking user behavior, creating dynamic content, or building navigation elements. In this article, we will explore different methods to accomplish this task efficiently.

Method 1: Using window.location.href

The simplest way to obtain the current page URL in JavaScript is by accessing the window.location.href property. This property contains the complete URL of the current page, including protocol, domain, path, and query parameters. Here’s a step-by-step breakdown of the code:

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

By executing the above code snippet, you can log the current page URL to the console for further processing.

Method 2: Using document.URL

Another method to retrieve the current page URL is by accessing the document.URL property. This property behaves similarly to window.location.href and provides the URL of the current document. Here’s how you can implement this method:

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

Executing the code above will yield the current page URL in the currentURL variable for your application’s use.

Method 3: Using location.pathname

If you only need the path part of the URL without the protocol, domain, or query parameters, you can use the location.pathname property. This method extracts and returns the path section of the URL. Follow these steps to implement it:

const currentPath = window.location.pathname;
console.log(currentPath);

By running the provided code snippet, you will obtain the current page’s path in the currentPath variable.

Conclusion

In conclusion, retrieving the current page URL in JavaScript is a straightforward process that can be achieved using various methods. Whether you need the complete URL, document URL, or just the path, JavaScript offers simple and efficient solutions for obtaining this essential information.

By incorporating these methods into your web development projects, you can enhance user experience, track analytics data, and create dynamic content based on the current page URL. Mastering these techniques will undoubtedly elevate your skills as a JavaScript developer, opening up new possibilities for creating dynamic and interactive web applications.