Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript one-liner for removing a ?message=... parameter from the visible URL in the browser
history.replaceState && history.replaceState(
null, '', location.pathname + location.search.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?')
);
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.
@tapionx

This comment has been minimized.

Copy link

@tapionx tapionx commented Dec 7, 2019

thanks! ❤️

@SimonMayerhofer

This comment has been minimized.

Copy link

@SimonMayerhofer SimonMayerhofer commented Dec 21, 2019

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
);
@amoghs

This comment has been minimized.

Copy link

@amoghs amoghs commented Apr 1, 2020

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}`,
      )
@DimaGashko

This comment has been minimized.

Copy link

@DimaGashko DimaGashko commented May 30, 2020

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)
@viking185

This comment has been minimized.

Copy link

@viking185 viking185 commented Sep 2, 2020

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(/^&/, '?'));
}
@DimaGashko

This comment has been minimized.

Copy link

@DimaGashko DimaGashko commented Sep 2, 2020

Did you try "real-life" version?

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

This comment has been minimized.

Copy link

@viking185 viking185 commented Sep 3, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment