How To Remove Query String From Url In Jquery

by

Query strings are an essential part of URL parameters that are used to pass data to a web page from the client-side. However, sometimes you might want to remove them for various reasons, like to clean up the URL or prevent tracking. In this tutorial, we’ll show you how to remove query strings from a URL using jQuery.

Step 1: Get the current URL

First, we need to get the current URL with query string. To do this, we’ll use the window.location.href property in JavaScript: 

var currentURL = window.location.href;

Step 2: Remove the query string

Now that we have the current URL, let’s remove the query string. We can do this by splitting the URL at the question mark (?) and taking the first part of the resulting array: 

var urlWithoutQueryString = currentURL.split('?')[0];

Step 3: Update the browser’s address bar (optional)

If you want to update the browser’s address bar to show the URL without the query string, you can use the window.history.pushState method. This method updates the address bar without causing the page to reload: 

window.history.pushState('', '', urlWithoutQueryString);

Putting it all together

Here’s the complete jQuery code to remove the query string from the URL and update the browser’s address bar: 

$(document).ready(function() {
    var currentURL = window.location.href;
    var urlWithoutQueryString = currentURL.split('?')[0];
    window.history.pushState('', '', urlWithoutQueryString);
});

Conclusion

In this tutorial, we’ve shown you how to remove query strings from a URL using jQuery. This can be useful for cleaning up URLs or preventing unwanted tracking. Keep in mind that if your web application relies on the query string data, removing it may cause issues, so always test your changes thoroughly.