How can I delete a query string parameter in JavaScript?

Question

Is there better way to delete a parameter from a query string in a URL string in standard JavaScript other than by using a regular expression?

Here's what I've come up with so far which seems to work in my tests, but I don't like to reinvent querystring parsing!

function RemoveParameterFromUrl( url, parameter ) {

    if( typeof parameter == "undefined" || parameter == null || parameter == "" ) throw new Error( "parameter is required" );

    url = url.replace( new RegExp( "\\b" + parameter + "=[^&;]+[&;]?", "gi" ), "" ); "$1" );

    // remove any leftover crud
    url = url.replace( /[&;]$/, "" );

    return url;
}

my question was asked 18 months before your link! – Matthew Lock Jan 20 at 8:52 — Matthew Lock, Jan 20 at 8:52

3 revs, 3 users 63% · Accepted Answer · 2013-12-17 16:19:28Z

up vote 29 down vote accepted

"[&;]?" + parameter + "=[^&;]+"

Seems dangerous because it parameter ‘bar’ would match:

?a=b&foobar=c

Also it would fail if parameter contained any characters that are special in RegExp, such as ‘.’. And it's not a global regex, so it would only remove one instance of the parameter.

I wouldn't use a simple RegExp for this, I'd parse the parameters in and lose the ones you don't want.

function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0]+'?'+pars.join('&');
        return url;
    } else {
        return url;
    }
}

edited Dec 17 '13 at 16:19

community wiki

3 revs, 3 users 63%
bobince

Good point about the bar matching the foobar. I've updated my original regex to require a ? or a [&;] at the start. Also reading over your solution to consider it... – Matthew Lock Oct 28 '09 at 3:06

and added "g" to make the replacement global ;) – Matthew Lock Oct 28 '09 at 3:12

2

If you want to get rid of the "?" when there are no parameters after the removal, add an if condition to test if pars.length==0, and if it is 0, then make "url = urlparts[0]" instead of appending the "?". – cowboycoded Nov 14 '10 at 18:42

@Matthew: Actually a regexp passed to split always splits globally, you don't have to explicitly set g. Shame really, as a single-split feature would have been useful. (split(..., 1) does something useless instead.) – bobince Nov 15 '10 at 11:41

1

Is it safe to compare the URL fragment with encodeURIComponent(parameter)? What if the URL encodes the parameter name differently? For example 'two%20words' versus 'two+words'. To deal with this, it might be better to decode the parameter name and compare it as a normal string. – Adrian Pronk Mar 18 '13 at 20:50

show 2 more comments

LukePH · Answer 2 · 2011-02-04 02:18:49Z

Copied from bobince answer, but made it support question marks in the query string, eg

http://www.google.com/search?q=test???+something&aq=f

Is it valid to have more than one question mark in a URL?

function removeParameter(url, parameter)
{
  var urlparts= url.split('?');

  if (urlparts.length>=2)
  {
      var urlBase=urlparts.shift(); //get first part, and remove from array
      var queryString=urlparts.join("?"); //join it back up

      var prefix = encodeURIComponent(parameter)+'=';
      var pars = queryString.split(/[&;]/g);
      for (var i= pars.length; i-->0;)               //reverse iteration as may be destructive
          if (pars[i].lastIndexOf(prefix, 0)!==-1)   //idiom for string.startsWith
              pars.splice(i, 1);
      url = urlBase+'?'+pars.join('&');
  }
  return url;
}

6 revs · Answer 3 · 2014-01-15 15:10:32Z

Anyone interested in a regex solution I have put together this function to add/remove/update a querystring parameter. Not supplying a value will remove the parameter, supplying one will add/update the paramter. If no URL is supplied, it will be grabbed from window.location. This solution also takes the url's anchor into consideration.

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            var hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?',
                hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

UPDATE

There was a bug when removing the first parameter in the querystring, I have reworked the regex and test to include a fix.

UPDATE 2

@schellmax update to fix situation where hashtag symbol is lost when removing a querystring variable directly before a hashtag

This doesn't work if you have two query strings and remove the first. The passed in url becomes invalid because the ? is removed when it should be preserved. — Blake Niemyjski, Mar 6 '13 at 15:07
@BlakeNiemyjski thanks for finding that bug, I have updated the script to include a workaround for the first parameter — ellemayo, Mar 7 '13 at 15:34
will accidentally remove the hash here: UpdateQueryString('a', null, 'http://www.test.com?a=b#c'); — schellmax, Sep 13 '13 at 16:07

Graham · Answer 4 · 2011-01-28 11:32:22Z

The above version as a function

function removeURLParam(url, param)
{
 var urlparts= url.split('?');
 if (urlparts.length>=2)
 {
  var prefix= encodeURIComponent(param)+'=';
  var pars= urlparts[1].split(/[&;]/g);
  for (var i=pars.length; i-- > 0;)
   if (pars[i].indexOf(prefix, 0)==0)
    pars.splice(i, 1);
  if (pars.length > 0)
   return urlparts[0]+'?'+pars.join('&');
  else
   return urlparts[0];
 }
 else
  return url;
}

3 revs, 2 users 90% · Answer 5 · 2012-11-05 18:29:22Z

up vote 1 down vote

If you're into jQuery, there is a good query string manipulation plugin:

http://plugins.jquery.com/project/query-object

edited Nov 5 '12 at 18:29

community wiki

3 revs, 2 users 90%
Damovisa

1

The first of those links is dead; alternative: github.com/fadhlirahim/jqURL. – Martin Carpenter Oct 17 '11 at 22:08

Thanks, removed - it was bound to go stale after a couple of years! :) – Damovisa Oct 19 '11 at 7:37

add comment

Bret Weinraub · Answer 6 · 2013-04-24 10:06:58Z

All of the responses on this thread have a flaw in that they do not preserve anchor/fragment parts of URLs.

So if your URL looks like:

http://dns-entry/path?parameter=value#fragment-text

and you replace 'parameter'

you will lose your fragment text.

The following is adaption of previous answers (bobince via LukePH) that addresses this problem:

function removeParameter(url, parameter)
{
  var fragment = url.split('#');
  var urlparts= fragment[0].split('?');

  if (urlparts.length>=2)
  {
    var urlBase=urlparts.shift(); //get first part, and remove from array
    var queryString=urlparts.join("?"); //join it back up

    var prefix = encodeURIComponent(parameter)+'=';
    var pars = queryString.split(/[&;]/g);
    for (var i= pars.length; i-->0;) {               //reverse iteration as may be destructive
      if (pars[i].lastIndexOf(prefix, 0)!==-1) {   //idiom for string.startsWith
        pars.splice(i, 1);
      }
    }
    url = urlBase+'?'+pars.join('&');
    if (fragment[1]) {
      url += "#" + fragment[1];
    }
  }
  return url;
}

asked	4 years ago
viewed	45598 times
active	5 months ago

current community

your communities

more stack exchange communities

How can I delete a query string parameter in JavaScript?

6 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript query-string or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

How can I delete a query string parameter in JavaScript?

6 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript query-string or ask your own question.

Linked

Related

Hot Network Questions