JavaScript one-liner for removing a ?message=... parameter from the visible URL in the browser

remove-message.js

history.replaceState && history.replaceState(
  null, '', location.pathname + location.search.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?')
);

why-do-this.txt

When a form is submitted, best practice is to use redirect-after-post - you
POST to a specific URL, that URL performs an action and then HTTP redirects
the user to a confirmation page.

This helps avoid unexpected behaviour with the browser reload and back
buttons.

Using this technique does have one downside: since you have redirected away
from the page that performed the action, how do you know what kind of
confirmation message to display to the user?

There are two common ways of handing this:

1. Using a "flash message" in a temporary cookie. This works well, but can  
   behave strangely when multiple tabs are involved.
2. Adding a ?message=MESSAGE-IDENTIFIER parameter to the redirect URL. 
   This is reliable, but ugly. We don't want users to bookmark these URLs 
   or share them with each other, as that will cause an incorrect message
   to be displayed.

This JavaScript one-liner uses the HTML5 history API to improve the second
approach, by removing the extra querystring paramater from the URL once the
page has loaded, without causing the browser to reload the page.

thanks! ❤️

There's a small bug in this gist. It removes the hash of the URL.
You should include it:

history.replaceState && history.replaceState(
  null, '', location.pathname + location.search.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?') + location.hash
);

thanks! an alternative option

      const url = new URL(window.location.href)
      const params = new URLSearchParams(url.search.slice(1))
      params.delete('message')
      window.history.replaceState(
        {},
        '',
        `${window.location.pathname}?${params}${window.location.hash}`,
      )

You can use location.href that contains full url, so, you definitely don't lose anything

history.replaceState(null, null, location.href.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?')

But in real-life I would like to use something like:

const url = new URL(location);
url.searchParams.delete('message');
history.replaceState(null, null, url)

The above history.replaceState doesn't seem to work when you remove the first param. the & doesn't get replaced with the ? as you'd expect, probably because the & isn't at the beginning of the string. a slight edit seems to work

history.replaceState(null, null, location.protocol + '//' + location.host + location.pathname + location.search.replace(/[?&]message=[^&]+/, '').replace(/^&/, '?'));

put into a function to make it more convenient

function removeURLParam(param) {
	param = param != 'undefined' ? param : '';
	history.replaceState(null, null, location.protocol + '//' + location.host + location.pathname + location.search.replace(/[\?&]param=[^&]+/, '').replace(/^&/, '?'));
}

Did you try "real-life" version?

const url = new URL(location);
url.searchParams.delete('message');
history.replaceState(null, null, url)

we still have people using IE and searchParams doesn;t work in IE