Skip to content

Instantly share code, notes, and snippets.

@simonw
Last active March 6, 2023 08:40
Show Gist options
  • Save simonw/9445b8c24ddfcbb856ec to your computer and use it in GitHub Desktop.
Save simonw/9445b8c24ddfcbb856ec to your computer and use it in GitHub Desktop.
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
Copy link

tapionx commented Dec 7, 2019

thanks! ❤️

@SimonMayerhofer
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

Did you try "real-life" version?

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

@viking185
Copy link

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