Update query string in url

Question

I want to update the url query string by clicking on checkbox. Here's the code, it doesn't work correctly

param1=param1=true
param1=param1=param1=false
param1=param1=param1=param1=true

instead of:

param1=false
param1=true

Here's an unrefactored code:

if (this.checked) {
      if (window.location.href.search('[?&]') === -1) {
        window.history.pushState('object or string', 'Title', window.location.href + '?param1=true');  
      } else {
        window.history.pushState('object or string', 'Title', window.location.href.replace(/param1=false|true/i, 'param1=true'));   
      }

    } else {
      if (window.location.href.search('[?&]') === -1) {
        window.history.pushState('object or string', 'Title', window.location.href + '?param1=false');  
      } else {
        window.history.pushState('object or string', 'Title', window.location.href.replace(/param1=false|true/i, 'param1=false'));   
      }
    }

possible duplicate of [Adding a parameter to the URL with JavaScript](http://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript) — Bhullnatik, May 17 '15 at 14:31
This appears to be a duplicate of http://stackoverflow.com/questions/10420955/history-pushstate-change-query-values, though that question doesn't yet seem to have a terribly satisfactory answer. (You could of course try adding a bounty.) — Jo Liss, May 17 '15 at 17:17

score 2 · Accepted Answer · answered May 17 '15 at 14:33

Consider this:

> 'param1=false'.replace(/param1=false|true/i, 'param1=true')
"param1=true"
> 'param1=true'.replace(/param1=false|true/i, 'param1=true')
"param1=param1=true"
> 'true'.replace(/param1=false|true/i, 'param1=true')
"param1=true"

The thing is that your regular expression is accepting either param1=false or just true. You need to put the false|true part in a group (in parentheses) to make the | not apply to the param1= part too. So your regular expression should be /param1=(false|true)/i:

> 'param1=true'.replace(/param1=(false|true)/i, 'param1=true')
'param1=true'

Renfei Song · Answer 2 · 2015-05-23T14:17:24.820

0

If there are no other parameters in your query string, you could reconstruct your url like this:

var href = window.location.protocol + '//' + window.location.host + window.location.pathname;
if (this.checked) {
    window.history.pushState('object or string', 'Title', href + '?param1=true');  
} else {
    window.history.pushState('object or string', 'Title', href + '?param1=false');   
}

edited May 23 '15 at 14:17

answered May 17 '15 at 14:42

Renfei Song

2,811
2
22
29

Update query string in url

2 Answers2