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        amp      amp        gi             1             remove any leftover crud     url   url replace     amp                  return url

User · Answer

Heres a complete function for adding and removing parameters based on this question and this github gist: https://gist.github.com/excalq/2961415

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {

        updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty

            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it

            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string

            params = urlQueryString + '&' + newParam;

        }

    }
    window.history.replaceState({}, "", baseUrl + params);
};

You can add parameters like this:

updateQueryStringParam( 'myparam', 'true' );

And remove it like this:

updateQueryStringParam( 'myparam', null );

In this thread many said that the regex is probably not the best/stable solution ... so im not 100% sure if this thing has some flaws but as far as i tested it it works pretty fine.

User · Answer

I don t see major issues with a regex solution   But  don t forget to preserve the fragment identifier  text after the        Here s my solution   function RemoveParameterFromUrl url  parameter      return url      replace new RegExp     amp      parameter        amp                 1        replace new RegExp      amp       parameter        amp    amp       1        And to bobince s point  yes - you d need to escape   characters in parameter names

User · Answer

If it s an instance of URL  use the delete function of searchParams  let url   new URL location href   url searchParams delete  page

User · Answer

The above version as a function  function removeURLParam url  param     var urlparts  url split        if  urlparts length gt  2       var prefix  encodeURIComponent param         var pars  urlparts 1  split    amp    g     for  var i pars length  i--  gt  0      if  pars i  indexOf prefix  0   0      pars splice i  1     if  pars length  gt  0     return urlparts 0      pars join   amp       else    return urlparts 0       else   return url

User · Answer

Copied from bobince answer  but made it support question marks in the query string  eg  http   www google com search q test    something amp aq f  Is it valid to have more than one question mark in a URL   function removeUrlParameter url  parameter      var urlParts   url split          if  urlParts length  gt   2           Get first part  and remove from array     var urlBase   urlParts shift            Join it back up     var queryString   urlParts join            var prefix   encodeURIComponent parameter             var parts   queryString split    amp    g           Reverse iteration as may be destructive     for  var i   parts length  i--  gt  0               Idiom for string startsWith       if  parts i  lastIndexOf prefix  0      -1            parts splice i  1                      url   urlBase         parts join   amp            return url

User · Answer

This returns the URL w o ANY GET Parameters   var href   document location href  var search   document location search  var pos   href indexOf  search    if   pos     -1        href   href slice  0  pos        console log  href

User · Answer

Using jQuery   function removeParam key        var url   document location href      var params   url split           if  params length    1  return       url   params 0             params   params 1       params   params split   amp            each params  function  index  value            var v   value split               if  v 0     key  url    value     amp                 url   url replace   amp              url   url replace                  document location href   url

User · Answer

const params   new URLSearchParams location search  params delete  key to delete   console log params toString

User · Answer

You can change the URL with   window history pushState     document title  window location pathname     this way  you can overwrite the URL without the search parameter  I use it to clean the URL after take the GET parameters

User · Answer

another direct  amp  simpler answer would be  let url   new URLSearchParams location search  let key    some key   return url has key        location href replace new RegExp     amp    key    url get key                location href

User · Answer

This is a clean version remove query parameter with the URL class for today browsers   function removeUrlParameter url  paramKey      var r   new URL url     r searchParams delete paramKey     return r href      URLSearchParams not supported on old browsers  https   caniuse com  feat urlsearchparams  IE  Edge  below 17  and Safari  below 10 3  do not support URLSearchParams inside URL class   Polyfills  URLSearchParams only polyfill  https   github com WebReflection url-search-params  Complete Polyfill URL and URLSearchParams to match last WHATWG specifications  https   github com lifaon74 url-polyfill

User · Answer

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      amp       key          amp              gi            hash       if  re test url             if  typeof value      undefined   amp  amp  value     null              return url replace re    1    key         value     2 3            else               hash   url split                   url   hash 0  replace re    1 3   replace    amp                          if  typeof hash 1       undefined   amp  amp  hash 1      null                   url          hash 1               return url                      else           if  typeof value      undefined   amp  amp  value     null                var separator   url indexOf          -1     amp                      hash   url split                   url   hash 0    separator   key         value              if  typeof hash 1       undefined   amp  amp  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

User · Answer

I practically wrote the following function to process the url parameters and get the final status as a string and redirect the page  Hopefully it benefits   function addRemoveUrlQuery addParam       removeParam       startQueryChar              let urlParams   new URLSearchParams window location search          Add param     for let i in addParam           if urlParams has i    urlParams set i  addParam i              else                  urlParams append i  addParam i                   Remove param     for let i of removeParam           if urlParams has i                urlParams delete i                        if urlParams toString             return startQueryChar   urlParams toString               return         For example  when I click a button  I want the page value to be deleted and the category value to be added   let button   document getElementById  changeCategory    button addEventListener  click   function  e         window location   addRemoveUrlQuery   category   cars      page            I think it was very useful

User · Answer

function removeParamInAddressBar parameter        var url   document location href      var urlparts   url split            if  urlparts length  gt   2            var urlBase   urlparts shift            var queryString   urlparts join                var prefix   encodeURIComponent parameter                 var pars   queryString split    amp    g           for  var i   pars length  i--  gt  0                 if  pars i  lastIndexOf prefix  0      -1                    pars splice i  1                                    if  pars length    0                url   urlBase            else               url   urlBase         pars join   amp                        window history pushState     document title  url      push the new url in address bar           return url

User · Answer

If you have a polyfill for URLSearchParams or simply don t have to support Internet Explorer  that s what I would use like suggested in other answers here  If you don t want to depend on URLSearchParams  that s how I would do it  function removeParameterFromUrl url  parameter      const replacer    m  p1  p2    gt   p1          amp  amp  p2       amp           p2          return url replace new RegExp      amp     parameter     amp       amp         replacer     It will replace a parameter preceded by    p1  and followed by  amp   p2  with   to make sure the list of parameters still starts with a question mark  otherwise  it will replace it with the next separator  p2   could be  amp   or    or undefined which falls back to an empty string

User · Answer

Glad you scrolled here    I would suggest you to resolve this task by next possible solutions    You need to support only modern browsers  Edge    17  - use URLSearchParams delete   API  It is native and obviously is the most convenient way of solving this task  If this is not an option  you may want to write a function to do this  Such a function does   do not change URL if a parameter is not present remove URL parameter without a value  like http   google com  myparm remove URL parameter with a value  like http   google com  myparm 1 remove URL parameter if is it in URL twice  like http   google com qp 1 amp qpqp 2 amp qp 1 Does not use for loop and not modify array during looping over it is more functional is more readable than regexp solutions Before using make sure your URL is not encoded     Works in IE   9  ES5 version    x000D   x000D  function removeParamFromUrl url  param        url  string  param  string x000D    var urlParts   url split       x000D        preservedQueryParams       x000D   x000D    if  urlParts length     2    x000D      preservedQueryParams   urlParts 1  x000D         split   amp    x000D         filter function queryParam    x000D          return   queryParam     param    queryParam indexOf param            0  x000D           x000D         join   amp     x000D      x000D   x000D    return urlParts 0      preservedQueryParams  amp  amp        preservedQueryParams    x000D    x000D   x000D   x000D    Fancy ES6 version   x000D   x000D  function removeParamFromUrlEs6 url  param    x000D    const  path  queryParams    url split       x000D   let preservedQueryParams       x000D   x000D    if  queryParams    x000D      preservedQueryParams   queryParams x000D         split   amp    x000D         filter queryParam   gt    queryParam     param    queryParam startsWith    param       x000D         join   amp     x000D      x000D   x000D    return    path   preservedQueryParams  amp  amp      preservedQueryParams        x000D    x000D   x000D   x000D    See how it works here

User · Answer

From what I can see  none of the above can handle normal parameters and array parameters  Here s one that does   function removeURLParameter param  url        url   decodeURI url  split           path   url length    1        url 1       path   path replace new RegExp   amp    param       d        w      g             path   path replace new RegExp   amp    param      w      g             path   path replace    amp             return url 0     path length                 path                   function addURLParameter param  val  url        if typeof val      object                recursively add in array structure         if val length                return addURLParameter                  param                         val splice -1  1  0                   addURLParameter param  val  url                          else               return url                  else           url   decodeURI url  split               path   url length    1        url 1           path    path length                 amp                             path    decodeURI param         val           return url 0          path            How to use it   url   location href      - gt  http   example com  tags   single amp tags   promo amp sold 1  url   removeURLParameter  sold   url      - gt  http   example com  tags   single amp tags   promo  url   removeURLParameter  tags   url      - gt  http   example com   url   addURLParameter  tags     single    promo    url      - gt  http   example com  tags   single amp tags   promo  url   addURLParameter  sold   1  url      - gt  http   example com  tags   single amp tags   promo amp sold 1   Of course  to update a parameter  just remove then add  Feel free to make a dummy function for it

User · Answer

Modern browsers provide URLSearchParams interface to work with search params  Which has delete method that removes param by name     x000D   x000D  if  typeof URLSearchParams      undefined     x000D    const params   new URLSearchParams  param1 1 amp param2 2 amp param3 3   x000D     x000D    console log params toString    x000D     x000D    params delete  param2   x000D     x000D    console log params toString    x000D   x000D    else   x000D    console log  Your browser   navigator appVersion  does not support URLSearchParams   x000D    x000D   x000D   x000D

User · Answer

function removeQueryStringParameter uri  key  value      var re   new RegExp      amp       key          amp        i         var separator   uri indexOf          -1     amp               if  uri match re              return uri replace re

User · Answer

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 gt  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    amp    g       for  var i  pars length  i-- gt 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 length  gt  0         pars join   amp               if  fragment 1           url          fragment 1               return url

User · Answer

Here a solution that    uses URLSearchParams  no difficult to understand regex  updates the URL in the search bar without reload maintains all other parts of the URL  e g  hash  removes superflous   in query string if the last parameter was removed   function removeParam paramName        let searchParams   new URLSearchParams window location search       searchParams delete paramName       if  history replaceState            let searchString   searchParams toString   length  gt  0         searchParams toString                 let newUrl   window location protocol          window location host   window location pathname    searchString   window location hash          history replaceState null      newUrl             Note  as pointed out in other answers URLSearchParams is not supported in IE  so use a polyfill

User · Answer

amp        parameter        amp        Seems dangerous because it parameter    bar    would match    a b amp 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  gt   2             var prefix   encodeURIComponent parameter                 var pars   urlparts 1  split    amp    g              reverse iteration as may be destructive         for  var i   pars length  i--  gt  0                       idiom for string startsWith             if  pars i  lastIndexOf prefix  0      -1                      pars splice i  1                                    return urlparts 0     pars length  gt  0         pars join   amp                     return url

User · Answer

A modified version of solution by ssh imov  function removeParam uri  keyValue          var re   new RegExp     amp       keyValue           keyValue     amp     amp      keyValue              i           return uri replace re               Call like this  removeParam  http   google com q 123 amp q1 234 amp q2 567    q1 234       returns http   google com q 123 amp q2 567

User · Answer

Assuming you want to remove key val parameter from URI      function removeParam uri       return uri replace     amp    key val   key val amp     amp  key val

User · Answer

If you re into jQuery  there is a good query string manipulation plugin    http   plugins jquery com project query-object

User · Answer

Here is what I m using   if  location href includes              history pushState     null  location href split      0         Original URL  http   www example com test hello id 123 amp foo bar Destination URL  http   www example com test hello

User · Answer

You should be using a library to do URI manipulation as it is more complicated than it seems on the surface to do it yourself   Take a look at  http   medialize github io URI js

[javascript] How can I delete a query string parameter in JavaScript?

Examples related to javascript

Examples related to query-string