How to Get the Current Page URL in jQuery

To get the current page URL in jQuery, you can use window.location.href as follows:

$(document).ready(function() {
    var currentURL = window.location.href;
    console.log(currentURL); // Outputs the current page URL
});

In web development, there are various situations where you might need to get the current page URL using jQuery. This guide provides multiple methods to achieve this, along with detailed explanations and examples.

Getting the current page URL is a common task in web development. Whether you need it for tracking purposes, redirecting, or displaying the URL on the page, jQuery provides an easy way to access this information.

Using window.location.href

The window.location.href property returns the full URL of the current page. This is the most straightforward method to get the current URL.

Example 1: Basic Usage

$(document).ready(function() {
    var currentURL = window.location.href;
    console.log(currentURL); // Outputs the current page URL
});

Explanation:

• $(document).ready(function() { … });: Ensures that the code runs after the DOM is fully loaded.
• var currentURL = window.location.href;: Retrieves the current page URL.
• console.log(currentURL);: Prints the URL to the console.

Using location Object Properties

The location object has several properties that allow you to get different parts of the current URL, such as the protocol, hostname, port, pathname, search, and hash.

Example 2: Getting Different Parts of the URL

$(document).ready(function() {
    var protocol = window.location.protocol; // e.g., "https:"
    var host = window.location.host; // e.g., "www.example.com:80"
    var hostname = window.location.hostname; // e.g., "www.example.com"
    var port = window.location.port; // e.g., "80"
    var pathname = window.location.pathname; // e.g., "/path/name"
    var search = window.location.search; // e.g., "?query=string"
    var hash = window.location.hash; // e.g., "#hash"
    
    console.log(protocol, host, hostname, port, pathname, search, hash);
});

Explanation:

• window.location.protocol: Gets the protocol (http or https).
• window.location.host: Gets the hostname and port.
• window.location.hostname: Gets the hostname.
• window.location.port: Gets the port number
• .window.location.pathname: Gets the path after the domain.
• window.location.search: Gets the query string.
• window.location.hash: Gets the anchor part of the URL.

Using jQuery Methods

While jQuery doesn’t have built-in methods specifically for getting the URL, you can use it to work with the location object more effectively.

Example 3: Using jQuery to Access the URL

$(document).ready(function() {
    var currentURL = $(location).attr('href');
    console.log(currentURL); // Outputs the current page URL
});
v

Explanation:

• $(location).attr(‘href’): jQuery method to get the current page URL by accessing the href attribute of the location object.

Conclusion

Getting the current page URL in jQuery is simple and can be done using window.location.href or by accessing specific parts of the URL through the location object properties. Understanding these methods allows you to handle URLs effectively in your web development projects.

By mastering these techniques, you can efficiently manipulate and utilize URLs to enhance the functionality of your web applications.