Austin Dudzik
Austin Dudzik

Austin Dudzik

Remove URL parameters right from the browser

Remove URL parameters right from the browser

An easy, one-click solution for removing parameters in the browser using pure JavaScript

Austin Dudzik's photo
Austin Dudzik

Published on Mar 26, 2021

8 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Introduction

These days, many websites take advantage of URL search parameters in order to collect analytics, display certain content, and improve SEO. You've most likely seen these parameters before on plenty of websites, especially on Google, where search queries are appended to the URL, denoted by the "?" character.

While URL search parameters are a great utility for developers and analysists, they can often pose an inconvenience to the typical website user. Let's just use Google again for this example. When completing a web search, Google will append numerous parameters to the end of the URL, mainly for tracking and other analytical data purposes. Let's take a look at an example Google search and see what they append to the end of the URL.

https://www.google.com/search?q=example&safe=active&sxsrf=ALeKk01KzvXo6732455hq9ppzfxDrdK-CQ%3A1616775225357&source=hp&ei=OQheYPG5EMHdtAavj5uoDg&iflsig=AINFCbYAAAAAYF4WSWdeXFySY7vuSBEnukEAL_WJMmG9&oq=example&gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBAgAEEMyBAgAEEMyBAgAEEMyBAgAEEMyCggAEIcCELEDEBQyBQgAELEDMgUIABCxAzIFCAAQsQMyAggAUBVYyQRgigZoAHAAeACAAaYBiAGmAZIBAzAuMZgBAKABAaoBB2d3cy13aXo&sclient=gws-wiz&ved=0ahUKEwixuu-Hrc7vAhXBLs0KHa_HBuUQ4dUDCAk&uact=5

Yeah... that's definitely not a nice looking URL. It's unreadable, impossible to remember, and just plain useless. And how about sharing? This link would not look pretty when sharing on social media or just simply sharing with a friend.

What if you could easily remove these ugly URL parameters from your browser, with just one-click? It may be easier than you think and it's all possible with just a few lines of JavaScript. Let me show you how.

Building the JavaScript

These next few steps of building out the JS should be simple and easy to understand. Even if you don't have JavaScript experience, you should still be able to follow along with this tutorial and I'll share the final code at the end.

1. Defining the URL

First, we must define and build out the new URL that doesn't include the parameters, since we want a clean, nice looking URL to deal with.

We'll create a new variable and give it a name of "clean_url". Technically, we could call this variable any name we'd like, but we'll keep it at that since it's most relevant.

We need to put the clean URL into this variable as well, but we must build it out first and concatenate it together. I'll just give a brief description of what each property does and then you can see what it looks like put together.

location.protocol = The protocol of the URL (ex: http:, https:, file:)

location.host = Specifies the hostname and port number of the URL (ex: google.com)

location.pathname = Specifies the pathname of the URL (ex: /search/)

Now here's what it looks like all together...

let clean_url = location.protocol + "//" + location.host + location.pathname;

As you can see, we've defined the variable and then given it a value, which returns the clean URL, all concatenated together in a properly formatted as a URL.

2. Replacing the URL in the browser

In order to replace the current URL with the new, clean URL, we must update the history entry of the current URL. This is easy with the built-in JS method "window.history.replaceState".

Again, I'll break down the parts of this method so it's easier to understand and then we'll put it all together.

null = This value is just kept as "null" or empty, since we don't have a state object to deal with in this case.

document.title = This will take the current page title and replace it in history.

clean_url = This takes our clean URL variable and puts it into the history.

Now, here's what that looks like...

window.history.replaceState(null, document.title, clean_url);

Alright, and that's all there is to it! Now let's take a look at what our final JavaScript code will look like, and then we'll just need to get it ready to be placed into a browser bookmarklet so the JavaScript can be launched with one-click.

Final JS code:

let clean_url = location.protocol + "//" + location.host + location.pathname;
window.history.replaceState(null, document.title, clean_url);

Now, let's get that converted over to something we can add as a bookmark and then we can start using it.

To get our bookmarklet, I've used the bookmarklet creator from Peter Coles. It can be found here.

✔ Once converted, we end up with this final code...

javascript:(function()%7Blet%20clean_url%20%3D%20location.protocol%20%2B%20%22%2F%2F%22%20%2B%20location.host%20%2B%20location.pathname%3Bwindow.history.replaceState(null%2C%20document.title%2C%20clean_url)%7D)()

The last step is to just copy this code and place it into the URL field of a bookmark. Now, whenever you run across a site that contains ugly search parameters, just click your bookmarklet and the URL in the browser window will be converted into a nice, clean URL!

Copy this new URL and share it with anyone, no longer worrying about having to share ugly, complicated links.

But hold on!

You may have questioned how this would work with search engines, since searches are appended with a parameter. If you ran this bookmarklet, the search query would be removed and you'd end up with an unuseable search link.

No worries though! I've taken the time to develop an additional bookmarklet that works specifically with search engines and will keep the "q" parameter intact, which most search engines use to hold search terms.

I won't walk through this example for times sake, but feel free to take a look at how this one functions and try adding it to your browser! Just be warned, this will only work with search engines and you should use the previous example for any other websites that you'd like to remove parameters from.

JavaScript code:

let url = new URL(window.location.href);
let searchParams = new URLSearchParams(url.search);
let result = searchParams.get('q');

let clean_url = location.protocol + "//" + location.host + location.pathname + "?q=" + result;
window.history.replaceState(null, document.title, clean_url);

✔ Once converted, we end up with this final code...

javascript:(function()%7Blet%20url%20%3D%20new%20URL(window.location.href)%3Blet%20searchParams%20%3D%20new%20URLSearchParams(url.search)%3Blet%20result%20%3D%20searchParams.get('q')%3Blet%20clean_url%20%3D%20location.protocol%20%2B%20%22%2F%2F%22%20%2B%20location.host%20%2B%20location.pathname%20%2B%20%22%3Fq%3D%22%20%2B%20result%3Bwindow.history.replaceState(null%2C%20document.title%2C%20clean_url)%7D)()

I've tried my best to make sure that this article contains the most accurate and up-to-date information as possible, but there still may be easier, more updated solutions for removing query strings from URL's. Although that's the case, these functions will still provide you with the clean URL's you're looking for.

Cheers! ✌

 
Share this