Remove URL parameters without refreshing page

These are all misleading, you never want to add to the browser history unless you want to go to a different page in a single page app. If you want to remove the parameters without a change in the page, you must use:

window.history.replaceState(null, '', window.location.pathname);

I belive the best and simplest method for this is:

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

I wanted to remove only one param success. Here's how you can do this:

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

This also retains #hash.

URLSearchParams won't work on IE, but being worked on for Edge. You can use a polyfill or a could use a naïve helper function for IE-support:

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))   
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

This can be used like:

history.replaceState(
    null, '', take_param('success').search + location.hash)

a simple way to do this, works on any page, requires HTML 5

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

Better solution :

window.history.pushState(null, null, window.location.pathname);

if I have a special tag at the end of my URL like: http://domain.com/?tag=12345 Here is the below code to remove that tag whenever it presents in the URL:

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

This gives the idea to remove one or more (or all) parameters from URL

With window.location.pathname you basically get everything before '?' in the url.

var pathname = window.location.pathname; // Returns path only

var url = window.location.href; // Returns full URL

None of these solutions really worked for me, here is a IE11-compatible function that can also remove multiple parameters:

/**
* Removes URL parameters
* @param removeParams - param array
*/
function removeURLParameters(removeParams) {
  const deleteRegex = new RegExp(removeParams.join('=|') + '=')

  const params = location.search.slice(1).split('&')
  let search = []
  for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])

  window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}

removeURLParameters(['param1', 'param2'])

        var currURL = window.location.href;
        var url = (currURL.split(window.location.host)[1]).split("?")[0];
        window.history.pushState({}, document.title, url);

This will be a cleaner way to clear only query string.

Here is how can specific query param be removed (even if repeated), without removing other query params:

const newUrl = new URL(location.href);
newUrl.searchParams.delete('deal');
window.history.replaceState({}, document.title, newUrl.href);

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
    var newUrl = refineUrl();
    window.history.pushState("object or string", "Title", "/"+newUrl );
}

function refineUrl()
{
    //get full url
    var url = window.location.href;
    //get url after/  
    var value = url = url.slice( 0, url.indexOf('?') );
    //get the part after before ?
    value  = value.replace('@System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');  
    return value;     
}

To clear out all the parameters, without doing a page refresh, AND if you are using HTML5, then you can do this:

history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is

This will add an entry in the browser history. You could also consider replaceState if you don't wan't to add a new entry and just want to replace the old entry.

a single line solution :

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

credits : https://gist.github.com/simonw/9445b8c24ddfcbb856ec

Here is an ES6 one liner which preserves the location hash and does not pollute browser history by using replaceState:

(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

Running this js for me cleared any params on the current url without refreshing the page.

window.history.replaceState({}, document.title, location.protocol + '//' + location.host + location.pathname);

I see many here who suggest just doing something like this:

window.history.replaceState(null, '', window.location.pathname);

The problem with this answer is that the parameters are only getting deleted from your search bar while they still exist in ‍url.searchParams‍.

For Example:

You're in https://someweb.site/?foo=bar and window.history.replaceState(null, '', window.location.pathname) is executed.

You will definitely see https://someweb.site/ now on your search bar. But when you see closely:

for(var [key, value] of url.searchParams.entries()) {
    console.log(key+ ' => '+ value);
}

foo => bar

they still exist in url.searchParams‍ and it can causes you trouble later when you want to add another parameter: For example, if you want to add name=john, you'll have suddenly ?foo=bar&name=john in your browser.

I suggest removing all entries in url.searchParams first would be a better way:

function deleteAllParams() {
    for(var [key, value] of url.searchParams.entries()) {
       url.searchParams.delete(key);
    }
    window.history.replaceState(null, null, url);
}