Adding a parameter to the URL with JavaScript

Question

In a web application that makes use of AJAX calls  I need to submit a request but add a parameter to the end of the URL  for example   Original URL       http   server myapp php id 10   Resulting URL      http   server myapp php id 10 amp enabled true   Looking for a JavaScript function which parses the URL looking at each parameter  then adds the new parameter or updates the value if one already exists

User · Answer

Reset all query string   x000D   x000D  var params     params1  val1   params2  val2     x000D  let str   jQuery param params   x000D   x000D  let uri   window location href toString    x000D  if  uri indexOf       gt  0  x000D     uri   uri substring 0  uri indexOf        x000D   x000D  console log uri     str   x000D    window location href   uri     str  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I would go with this small but complete library to handle urls in js   https   github com Mikhus jsurl

User · Answer

const urlParams   new URLSearchParams window location search    urlParams set  order    date     window location search   urlParams     set first agrument is the key  the second one is the value

User · Answer

I would go with this small but complete library to handle urls in js   https   github com Mikhus jsurl

User · Answer

Vianney Bajart s answer is correct  however  URL will only work if you have the complete URL with port  host  path and query   new URL  http   server myapp php id 10 amp enabled true     And URLSearchParams will only work if you pass only the query string   new URLSearchParams   id 10 amp enabled true     If you have an incomplete or relative URL and don t care for the base URL  you can just split by   to get the query string and join later like this   function setUrlParams url  key  value      url   url split         usp   new URLSearchParams url 1      usp set key  value     url 1    usp toString      return url join          let url    myapp php id 10   url   setUrlParams url   enabled   true       url    myapp php id 10 amp enabled true  url   setUrlParams url   id   11              url    myapp php id 11 amp enabled true    Not compatible with Internet Explorer

User · Answer

Try this      uses the URL class function setParam key  value                let url   new URL window document location               let params   new URLSearchParams url search slice 1                 if  params has key                     params set key  value                else                   params append key  value

User · Answer

Reset all query string   x000D   x000D  var params     params1  val1   params2  val2     x000D  let str   jQuery param params   x000D   x000D  let uri   window location href toString    x000D  if  uri indexOf       gt  0  x000D     uri   uri substring 0  uri indexOf        x000D   x000D  console log uri     str   x000D    window location href   uri     str  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

x000D   x000D      x000D    Add a URL parameter  x000D     param  string  url  x000D     param  string  param the key to set x000D     param  string  value  x000D     x000D  var addParam   function url  param  value    x000D     param   encodeURIComponent param   x000D     var a   document createElement  a    x000D     param     value         encodeURIComponent value          x000D     a href   url  x000D     a search     a search     amp           param  x000D     return a href  x000D    x000D   x000D      x000D    Add a URL parameter  or modify if already exists  x000D     param  string  url  x000D     param  string  param the key to set x000D     param  string  value  x000D     x000D  var addOrReplaceParam   function url  param  value    x000D     param   encodeURIComponent param   x000D     var r       amp     amp amp      param      b          amp          x000D     var a   document createElement  a    x000D     var regex   new RegExp r   x000D     var str   param    value         encodeURIComponent value          x000D     a href   url  x000D     var q   a search replace regex    1  str   x000D     if  q     a search    x000D        a search     a search     amp           str  x000D       else   x000D        a search   q  x000D       x000D     return a href  x000D    x000D   x000D  url    http   www example com hashme   x000D  newurl   addParam url   ciao    1    x000D  alert newurl   x000D   x000D   x000D    And please note that parameters should be encoded before being appended in query string   http   jsfiddle net 48z7z4kx

User · Answer

Ok here I compare Two functions  one made by myself  regExp  and another one made by  annakata    Split array   function insertParam key  value        key   escape key   value   escape value        var kvp   document location search substr 1  split   amp          var i kvp length  var x  while i--                 x   kvp i  split                if  x 0   key                            x 1    value                  kvp i    x join                       break                       if i lt 0   kvp kvp length     key value  join               this will reload the page  it s likely better to store this until finished     return   amp   kvp join   amp          Regexp method   function addParameter param  value        var regexp   new RegExp          amp      param             amp        amp            if  regexp test document location search            return  document location search toString   replace regexp  function a  b  c  d                            return  b   param         value   d                    else          return document location search  param         value      Testing case   time1  new Date  getTime    for  var i 0 i lt 10000 i      addParameter  test   test      time2  new Date  getTime    for  var i 0 i lt 10000 i      insertParam  test   test       time3  new Date  getTime     console log  time2-time1       time3-time2      It seems that even with simplest solution  when regexp use only test and do not enter  replace function  it is still slower than spliting    Well  Regexp is kinda slow but    uhh

User · Answer

If you have a string with url that you want to decorate with a param  you could try this   urlstring      urlstring match        g       amp              param value     This means that   will be the prefix of the parameter  but if you already have   in urlstring  than  amp  will be the prefix   I would also recommend to do encodeURI  paramvariable   if you didn t hardcoded parameter  but it is inside a paramvariable  or if you have funny characters in it    See javascript URL Encoding for usage of the encodeURI function

User · Answer

I have a  class  that does this and here it is   function QS        this qs           var s   location search replace            g            if  s             var qsParts   s split   amp             var i  nv          for  i   0  i  lt  qsParts length  i                  nv   qsParts i  split                   this qs nv 0     nv 1                      QS prototype add   function  name  value         if  arguments length    1  amp  amp  arguments 0  constructor    Object             this addMany  arguments 0             return            this qs name    value     QS prototype addMany   function  newValues         for  nv in newValues             this qs nv    newValues nv            QS prototype remove   function  name         if  arguments length    1  amp  amp  arguments 0  constructor    Array             this removeMany  arguments 0             return            delete this qs name      QS prototype removeMany   function  deleteNames         var i      for  i   0  i  lt  deleteNames length  i               delete this qs deleteNames i             QS prototype getQueryString   function         var nv  q           for  nv in this qs             q q length    nv     this qs nv             return q join    amp         QS prototype toString   QS prototype getQueryString     examples   instantiation var qs   new QS  alert  qs       add a sinle name value qs add   new    true     alert  qs       add multiple key values qs add    x   X   y   Y       alert  qs       remove single key qs remove   new    alert  qs       remove multiple keys qs remove    x    bogus     alert  qs      I have overridden the toString method so there is no need to call QS  getQueryString  you can use QS  toString or  as I have done in the examples just rely on the object being coerced into a string

User · Answer

Try The regular expressions  so slow  thus   var SetParamUrl   function  k   v      replace and add new parameters      let arrParams   window location search          decodeURIComponent window location search substr 1   split   amp    map  v   gt   v split         Array        let index   arrParams findIndex   v    gt   v 0       k        index   index     -1   index   arrParams length       v     null   arrParams   arrParams filter   v   i    gt   i    index    arrParams index      k   v       let  search   encodeURIComponent arrParams map  v   gt   v join       join   amp           let newurl   window location protocol          window location host   window location pathname    arrParams length  gt  0           search                 window location   newurl    reload       if  history pushState       without reload           window history pushState  path newurl   null  newurl              var GetParamUrl   function  k      get parameter by key      let sPageURL   decodeURIComponent window location search substr 1            sURLVariables   sPageURL split   amp    map  v   gt   v split            let  result   sURLVariables find  v   gt   v 0       k       return  result 1         Example              https   some com some path         GetParamUrl  cat     undefined         SetParamUrl  cat    strData      https   some com some path cat strData         GetParamUrl  cat     strData         SetParamUrl  sotr    strDataSort      https   some com some path cat strData amp sotr strDataSort         GetParamUrl  sotr     strDataSort         SetParamUrl  cat    strDataTwo      https   some com some path cat strDataTwo amp sotr strDataSort         GetParamUrl  cat     strDataTwo           remove param         SetParamUrl  cat   null     https   some com some path sotr strDataSort

User · Answer

This is what I use when it comes to some basic url param additions or updates on the server-side like Node js   CoffeScript    x000D   x000D      x000D       method addUrlParam Adds parameter to a given url  If the parameter already exists in the url is being replaced  x000D       param  string  url x000D       param  string  key Parameter s key x000D       param  string  value Parameter s value x000D       returns  string  new url containing the parameter x000D      x000D  addUrlParam    url  key  value  - gt  x000D      newParam   key     value x000D      result   url replace new RegExp    amp          key         amp           1    newParam  x000D      if result is url x000D          result   if url indexOf         -1 then url split      0          newParam     amp     url split      1  x000D      else if url indexOf         -1 then url split      0          newParam         url split      1  x000D      else url         newParam x000D      return result x000D   x000D   x000D    JavaScript     x000D   x000D  function addUrlParam url  key  value    x000D      var newParam   key     value  x000D      var result   url replace new RegExp    amp        key       amp           1    newParam   x000D      if  result     url     x000D          result    url indexOf         -1   url split      0      newParam   amp   url split      1   x000D                url indexOf         -1   url split      0      newParam      url split      1   x000D                  url     newParam    x000D        x000D      return result  x000D    x000D   x000D  var url    http   www example com foo bar amp ciao 3 amp doom 5 hashme   x000D  result1 innerHTML   addUrlParam url   ciao    1    x000D   lt p id  result1  gt  lt  p gt  x000D   x000D   x000D

User · Answer

Here s a vastly simplified version  making tradeoffs for legibility and fewer lines of code instead of micro-optimized performance  and we re talking about a few miliseconds difference  realistically    due to the nature of this  operating on the current document s location   this will most likely be ran once on a page          Add a URL parameter  or changing it if it already exists     param  search  string  this is typically document location search    param  key     string  the key to set    param  val     string  value     var addUrlParam   function search  key  val     var newParam   key         val        params         newParam        If the  search  string exists  then build params from it   if  search           Try to replace an existance instance     params   search replace new RegExp      amp       key       amp         1    newParam           If nothing was replaced  then add the new param to the end     if  params     search          params      amp     newParam               return params       You would then use this like so   document location pathname   addUrlParam document location search   foo    bar

User · Answer

Check out https   github com derek-watson jsUri  Uri and query string manipulation in javascript   This project incorporates the excellent parseUri regular expression library by Steven Levithan  You can safely parse URLs of all shapes and sizes  however invalid or hideous

User · Answer

With the new achievements in JS here is how one can add query param to the URL   var protocol   window location protocol      host          window location host      path   window location pathname      query   window location search   var newUrl   protocol   host   path   query    query     amp             param 1    window history pushState  path newUrl        newUrl     Also see this possibility Moziila URLSearchParams append

User · Answer

If you have a string with url that you want to decorate with a param  you could try this   urlstring      urlstring match        g       amp              param value     This means that   will be the prefix of the parameter  but if you already have   in urlstring  than  amp  will be the prefix   I would also recommend to do encodeURI  paramvariable   if you didn t hardcoded parameter  but it is inside a paramvariable  or if you have funny characters in it    See javascript URL Encoding for usage of the encodeURI function

User · Answer

Adding to  Vianney s Answer https   stackoverflow com a 44160941 6609678  We can import the Built-in URL module in node as follows  const   URL     require  url      Example    Terminal   node  gt  const   URL     require  url    undefined  gt  let url   new URL      http   localhost 1989 v3 orders    undefined  gt  url href  http   localhost 1989 v3 orders   gt  let fetchAll true  timePeriod   30  b2b false  undefined  gt  url href  http   localhost 1989 v3 orders   gt   url searchParams append  fetchAll   fetchAll   undefined  gt   url searchParams append  timePeriod   timePeriod   undefined  gt   url searchParams append  b2b   b2b   undefined  gt  url href  http   localhost 1989 v3 orders fetchAll true amp timePeriod 30 amp b2b false   gt  url toString    http   localhost 1989 v3 orders fetchAll true amp timePeriod 30 amp b2b false    Useful Links   https   developer mozilla org en-US docs Web API URL https   developer mozilla org en docs Web API URLSearchParams

User · Answer

Here is what I do  Using my editParams   function  you can add  remove  or change any parameter  then use the built in replaceState   function to update the URL   window history replaceState  object or string    Title    page html    editParams  enable    true          background functions below      add change remove URL parameter    use a value of false to remove parameter    returns a url-style string function editParams  key  value      key   encodeURI key      var params   getSearchParameters       if  Object keys params  length     0        if  value     false        return       key         encodeURI value       else       return            if  value     false      params key    encodeURI value     else     delete params key      if  Object keys params  length     0      return        return         map params  function  value  key        return key         value       join   amp           Get object associative array of URL parameters function getSearchParameters        var prmstr   window location search substr 1     return prmstr     null  amp  amp  prmstr          transformToAssocArray prmstr              convert parameters from url-style string to associative array function transformToAssocArray  prmstr      var params             prmarr   prmstr split   amp        for  var i   0  i  lt  prmarr length  i          var tmparr   prmarr i  split           params tmparr 0     tmparr 1         return params

User · Answer

This is a simple way to add a query parameter    const query   new URLSearchParams window location search   query append  enabled    true      And that is it more here   Please note the support specs

User · Answer

Check out https   github com derek-watson jsUri  Uri and query string manipulation in javascript   This project incorporates the excellent parseUri regular expression library by Steven Levithan  You can safely parse URLs of all shapes and sizes  however invalid or hideous

User · Answer

The simplest solution I can think of is this method  which will return the modified URI  I feel like most of you are working way too hard   function setParam uri  key  val        return uri          replace new RegExp      amp    key        amp          amp                  amp   key     encodeURIComponent val            replace        amp     amp      1

User · Answer

This will work in all modern browsers   function insertParam key value          if  history pushState              var newurl   window location protocol          window location host   window location pathname        key     value            window history pushState  path newurl     newurl

User · Answer

Vianney Bajart s answer is correct  however  URL will only work if you have the complete URL with port  host  path and query   new URL  http   server myapp php id 10 amp enabled true     And URLSearchParams will only work if you pass only the query string   new URLSearchParams   id 10 amp enabled true     If you have an incomplete or relative URL and don t care for the base URL  you can just split by   to get the query string and join later like this   function setUrlParams url  key  value      url   url split         usp   new URLSearchParams url 1      usp set key  value     url 1    usp toString      return url join          let url    myapp php id 10   url   setUrlParams url   enabled   true       url    myapp php id 10 amp enabled true  url   setUrlParams url   id   11              url    myapp php id 11 amp enabled true    Not compatible with Internet Explorer

User · Answer

This was my own attempt  but I ll use the answer by annakata as it seems much cleaner   function AddUrlParameter sourceUrl  parameterName  parameterValue  replaceDuplicates        if   sourceUrl    null      sourceUrl length    0   sourceUrl   document location href      var urlParts   sourceUrl split           var newQueryString           if  urlParts length  gt  1                var parameters   urlParts 1  split   amp             for  var i 0   i  lt  parameters length   i                          var parameterParts   parameters i  split                   if    replaceDuplicates  amp  amp  parameterParts 0     parameterName                                 if  newQueryString                            newQueryString                        else                     newQueryString      amp                    newQueryString    parameterParts 0          parameterParts 1                                     if  newQueryString                newQueryString            else         newQueryString      amp        newQueryString    parameterName         parameterValue       return urlParts 0    newQueryString      Also  I found this jQuery plugin from another post on stackoverflow  and if you need more flexibility you could use that  http   plugins jquery com project query-object  I would think the code would be  haven t tested     return   query parse sourceUrl  set parameterName  parameterValue  toString

User · Answer

Ok here I compare Two functions  one made by myself  regExp  and another one made by  annakata    Split array   function insertParam key  value        key   escape key   value   escape value        var kvp   document location search substr 1  split   amp          var i kvp length  var x  while i--                 x   kvp i  split                if  x 0   key                            x 1    value                  kvp i    x join                       break                       if i lt 0   kvp kvp length     key value  join               this will reload the page  it s likely better to store this until finished     return   amp   kvp join   amp          Regexp method   function addParameter param  value        var regexp   new RegExp          amp      param             amp        amp            if  regexp test document location search            return  document location search toString   replace regexp  function a  b  c  d                            return  b   param         value   d                    else          return document location search  param         value      Testing case   time1  new Date  getTime    for  var i 0 i lt 10000 i      addParameter  test   test      time2  new Date  getTime    for  var i 0 i lt 10000 i      insertParam  test   test       time3  new Date  getTime     console log  time2-time1       time3-time2      It seems that even with simplest solution  when regexp use only test and do not enter  replace function  it is still slower than spliting    Well  Regexp is kinda slow but    uhh

User · Answer

With the new achievements in JS here is how one can add query param to the URL   var protocol   window location protocol      host          window location host      path   window location pathname      query   window location search   var newUrl   protocol   host   path   query    query     amp             param 1    window history pushState  path newUrl        newUrl     Also see this possibility Moziila URLSearchParams append

User · Answer

As best I can tell none of the above answers address the case where the query string contains parameters which are themselves an array and hence will appear more than once  e g   http   example com sizes   a amp sizes   b   The following function is what I wrote to update document location search   It takes an array of key value pair arrays as an argument and it will return a revised version of the latter which you can do whatever you d like with   I m using it like this   var newParams           test   123          best   456          sizes     XXL      var newUrl   document location pathname   insertParams newParams   history replaceState         newUrl     If the current url was   http   example com index php test replaceme amp sizes   XL  This would get you  http   example com index php test 123 amp sizes   XL amp sizes   XXL amp best 456  Function  function insertParams params        var result      var ii   params length      var queryString   document location search substr 1       var kvps   queryString   queryString split   amp              var kvp      var skipParams           var i   kvps length      while  i--            kvp   kvps i  split               if  kvp 0  slice -2                         var ii   params length              while  ii--                    if  params ii  0     kvp 0                         kvp 1    params ii  1                       kvps i    kvp join                           skipParams push ii                                                       var ii   params length      while  ii--            if  skipParams indexOf ii      -1                kvps push params ii  join                            result   kvps length         kvps join   amp              return result

User · Answer

A basic implementation which you ll need to adapt would look something like this   function insertParam key  value        key   encodeURIComponent key       value   encodeURIComponent value           kvp looks like   key1 value1    key2 value2            var kvp   document location search substr 1  split   amp         let i 0       for   i lt kvp length  i             if  kvp i  startsWith key                       let pair   kvp i  split                   pair 1    value              kvp i    pair join                   break                       if i  gt   kvp length           kvp kvp length     key value  join                     can return this or        let params   kvp join   amp             reload page with new params     document location search   params      This is approximately twice as fast as a regex or search based solution  but that depends completely on the length of the querystring and the index of any match    the slow regex method I benchmarked against for completions sake  approx  150  slower   function insertParam2 key value        key   encodeURIComponent key   value   encodeURIComponent value        var s   document location search      var kvp   key     value       var r   new RegExp    amp        key       amp            s   s replace r   1  kvp        if  RegExp  1   s     s length gt 0     amp            kvp           again  do what you will here     document location search   s

User · Answer

As best I can tell none of the above answers address the case where the query string contains parameters which are themselves an array and hence will appear more than once  e g   http   example com sizes   a amp sizes   b   The following function is what I wrote to update document location search   It takes an array of key value pair arrays as an argument and it will return a revised version of the latter which you can do whatever you d like with   I m using it like this   var newParams           test   123          best   456          sizes     XXL      var newUrl   document location pathname   insertParams newParams   history replaceState         newUrl     If the current url was   http   example com index php test replaceme amp sizes   XL  This would get you  http   example com index php test 123 amp sizes   XL amp sizes   XXL amp best 456  Function  function insertParams params        var result      var ii   params length      var queryString   document location search substr 1       var kvps   queryString   queryString split   amp              var kvp      var skipParams           var i   kvps length      while  i--            kvp   kvps i  split               if  kvp 0  slice -2                         var ii   params length              while  ii--                    if  params ii  0     kvp 0                         kvp 1    params ii  1                       kvps i    kvp join                           skipParams push ii                                                       var ii   params length      while  ii--            if  skipParams indexOf ii      -1                kvps push params ii  join                            result   kvps length         kvps join   amp              return result

User · Answer

You can use one of these    https   developer mozilla org en-US docs Web API URL https   developer mozilla org en docs Web API URLSearchParams   Example   var url   new URL  http   foo bar  x 1 amp y 2        If your expected result is  http   foo bar  x 1 amp y 2 amp x 42  url searchParams append  x   42       If your expected result is  http   foo bar  x 42 amp y 2  url searchParams set  x   42

User · Answer

var MyApp   new Class     MyApp extend       utility            queryStringHelper  function  url                var originalUrl   url              var newUrl   url              var finalUrl              var insertParam   function  key  value                    key   escape key                   value   escape value                      The previous post had the substr strat from 1 in stead of 0                    var kvp   newUrl substr 0  split   amp                      var i   kvp length                  var x                  while  i--                        x   kvp i  split                            if  x 0     key                            x 1    value                          kvp i    x join                               break                                                           if  i  lt  0                        kvp kvp length     key  value  join                                          finalUrl   kvp join   amp                      return finalUrl                              this insertParameterToQueryString   insertParam               this insertParams   function  keyValues                    for  var keyValue in keyValues 0                         var key   keyValue                      var value   keyValues 0  keyValue                       newUrl   insertParam key  value                                     return newUrl                              return this

User · Answer

A basic implementation which you ll need to adapt would look something like this   function insertParam key  value        key   encodeURIComponent key       value   encodeURIComponent value           kvp looks like   key1 value1    key2 value2            var kvp   document location search substr 1  split   amp         let i 0       for   i lt kvp length  i             if  kvp i  startsWith key                       let pair   kvp i  split                   pair 1    value              kvp i    pair join                   break                       if i  gt   kvp length           kvp kvp length     key value  join                     can return this or        let params   kvp join   amp             reload page with new params     document location search   params      This is approximately twice as fast as a regex or search based solution  but that depends completely on the length of the querystring and the index of any match    the slow regex method I benchmarked against for completions sake  approx  150  slower   function insertParam2 key value        key   encodeURIComponent key   value   encodeURIComponent value        var s   document location search      var kvp   key     value       var r   new RegExp    amp        key       amp            s   s replace r   1  kvp        if  RegExp  1   s     s length gt 0     amp            kvp           again  do what you will here     document location search   s

User · Answer

I like the answer of Mehmet Fatih Yildiz even he did not answer the whole question   In the same line as his answer  I use this code    Its doesn t control parameter existence  and it doesn t change existing value  It adds your parameter to the end         add a parameter at the end of the URL  Manage       amp    but not the existing parameters        does escape the value  but not the key          function addParameterToURL  url  key  value         var param    key     escape  value          var sep     amp          if   url indexOf       lt  0            sep                else           var lastChar  url slice -1           if  lastChar      amp    sep             if  lastChar         sep                    url    sep   param         return  url        and the tester          function addParameterToURL TESTER sub  url key value         log  url       log addParameterToURL  url key value           function addParameterToURL TESTER        log  -------------------        var  url   www google com       addParameterToURL TESTER sub  url  key   value        addParameterToURL TESTER sub  url  key   Text Value         url   www google com        addParameterToURL TESTER sub  url  key   value         url   www google com A B       addParameterToURL TESTER sub  url  key   value         url   www google com A B amp        addParameterToURL TESTER sub  url  key   value         url   www google com A 1 amp B 2       addParameterToURL TESTER sub  url  key   value

User · Answer

A basic implementation which you ll need to adapt would look something like this   function insertParam key  value        key   encodeURIComponent key       value   encodeURIComponent value           kvp looks like   key1 value1    key2 value2            var kvp   document location search substr 1  split   amp         let i 0       for   i lt kvp length  i             if  kvp i  startsWith key                       let pair   kvp i  split                   pair 1    value              kvp i    pair join                   break                       if i  gt   kvp length           kvp kvp length     key value  join                     can return this or        let params   kvp join   amp             reload page with new params     document location search   params      This is approximately twice as fast as a regex or search based solution  but that depends completely on the length of the querystring and the index of any match    the slow regex method I benchmarked against for completions sake  approx  150  slower   function insertParam2 key value        key   encodeURIComponent key   value   encodeURIComponent value        var s   document location search      var kvp   key     value       var r   new RegExp    amp        key       amp            s   s replace r   1  kvp        if  RegExp  1   s     s length gt 0     amp            kvp           again  do what you will here     document location search   s

User · Answer

Try this      uses the URL class function setParam key  value                let url   new URL window document location               let params   new URLSearchParams url search slice 1                 if  params has key                     params set key  value                else                   params append key  value

User · Answer

It handles such URL s   empty doesn t have any parameters already have some parameters have   at the end  but at the same time doesn t have any parameters  It doesn t handles such URL s   with fragment identifier  i e  hash     if URL already have required query parameter  then there will be duplicate   Works in   Chrome 32  Firefox 26  Safari 7 1   function appendQueryParameter url  name  value        if  url length     0            return             let rawURL   url          URL with     at the end and without query parameters        leads to incorrect result      if  rawURL charAt rawURL length - 1       quot   quot             rawURL   rawURL slice 0  rawURL length - 1              const parsedURL   new URL rawURL       let parameters   parsedURL search       parameters     parameters length     0     quot   quot     quot  amp  quot       parameters    parameters   name    quot   quot    value        return  parsedURL origin   parsedURL pathname   parameters      Version with ES6 template strings  Works in   Chrome 41  Firefox 32  Safari 9 1   function appendQueryParameter url  name  value        if  url length     0            return             let rawURL   url          URL with     at the end and without query parameters        leads to incorrect result      if  rawURL charAt rawURL length - 1       quot   quot             rawURL   rawURL slice 0  rawURL length - 1              const parsedURL   new URL rawURL       let parameters   parsedURL search       parameters     parameters length     0     quot   quot     quot  amp  quot       parameters      parameters   name    value         return    parsedURL origin   parsedURL pathname   parameters

User · Answer

If you re messing around with urls in links or somewhere else  you may have to take the hash into account as well  Here s a fairly simple to understand solution  Probably not the FASTEST  since it uses a regex    but in 99 999  of cases  the difference really doesn t matter    function addQueryParam  url  key  val        var parts   url match                                   var url   parts 1       var qs   parts 2             var hash   parts 3              if    qs             return url         key         encodeURIComponent  val     hash        else           var qs parts   qs substr 1  split   amp             var i          for  i 0 i lt qs parts length i                  var qs pair   qs parts i  split                   if   qs pair 0     key                    qs parts  i     key         encodeURIComponent  val                    break                                  if   i    qs parts length                qs parts push  key         encodeURIComponent  val                        return url         qs parts join   amp      hash

User · Answer

It handles such URL s   empty doesn t have any parameters already have some parameters have   at the end  but at the same time doesn t have any parameters  It doesn t handles such URL s   with fragment identifier  i e  hash     if URL already have required query parameter  then there will be duplicate   Works in   Chrome 32  Firefox 26  Safari 7 1   function appendQueryParameter url  name  value        if  url length     0            return             let rawURL   url          URL with     at the end and without query parameters        leads to incorrect result      if  rawURL charAt rawURL length - 1       quot   quot             rawURL   rawURL slice 0  rawURL length - 1              const parsedURL   new URL rawURL       let parameters   parsedURL search       parameters     parameters length     0     quot   quot     quot  amp  quot       parameters    parameters   name    quot   quot    value        return  parsedURL origin   parsedURL pathname   parameters      Version with ES6 template strings  Works in   Chrome 41  Firefox 32  Safari 9 1   function appendQueryParameter url  name  value        if  url length     0            return             let rawURL   url          URL with     at the end and without query parameters        leads to incorrect result      if  rawURL charAt rawURL length - 1       quot   quot             rawURL   rawURL slice 0  rawURL length - 1              const parsedURL   new URL rawURL       let parameters   parsedURL search       parameters     parameters length     0     quot   quot     quot  amp  quot       parameters      parameters   name    value         return    parsedURL origin   parsedURL pathname   parameters

User · Answer

Easiest solution  works if you have already a tag or not  and removes it automatically so it wont keep adding equal tags  have fun  function changeURL tag    if window location href indexOf       gt  -1        if window location href indexOf   amp   tag   gt  -1            var url   window location href replace   amp   tag       amp   tag            else               var url   window location href   amp   tag         else      if window location href indexOf     tag   gt  -1            var url   window location href replace     tag         tag            else               var url   window location href     tag            window location   url      THEN  changeURL  i updated

User · Answer

The simplest solution I can think of is this method  which will return the modified URI  I feel like most of you are working way too hard   function setParam uri  key  val        return uri          replace new RegExp      amp    key        amp          amp                  amp   key     encodeURIComponent val            replace        amp     amp      1

User · Answer

I like the answer of Mehmet Fatih Yildiz even he did not answer the whole question   In the same line as his answer  I use this code    Its doesn t control parameter existence  and it doesn t change existing value  It adds your parameter to the end         add a parameter at the end of the URL  Manage       amp    but not the existing parameters        does escape the value  but not the key          function addParameterToURL  url  key  value         var param    key     escape  value          var sep     amp          if   url indexOf       lt  0            sep                else           var lastChar  url slice -1           if  lastChar      amp    sep             if  lastChar         sep                    url    sep   param         return  url        and the tester          function addParameterToURL TESTER sub  url key value         log  url       log addParameterToURL  url key value           function addParameterToURL TESTER        log  -------------------        var  url   www google com       addParameterToURL TESTER sub  url  key   value        addParameterToURL TESTER sub  url  key   Text Value         url   www google com        addParameterToURL TESTER sub  url  key   value         url   www google com A B       addParameterToURL TESTER sub  url  key   value         url   www google com A B amp        addParameterToURL TESTER sub  url  key   value         url   www google com A 1 amp B 2       addParameterToURL TESTER sub  url  key   value

User · Answer

Following function will help you to add update and delete parameters to or from URL     example1and  var myURL     search    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search     example2  var myURL     search category mobile    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search category mobile amp location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search category mobile amp location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search category mobile     example3  var myURL     search location texas    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search     example4  var myURL     search category mobile amp location texas    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search category mobile amp location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search category mobile amp location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search category mobile     example5  var myURL    https   example com search location texas fragment    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california fragment  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york fragment  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search fragment   Here is the function   function updateUrl url key value         if value   undefined           value   encodeURI value                 var hashIndex   url indexOf      0        if  hashIndex     -1  hashIndex   url length 0        var urls   url substring 0  hashIndex  split             var baseUrl   urls 0         var parameters             var outPara             if urls length gt 1             parameters   urls 1                 if parameters                parameters   parameters split   amp             for k in parameters             var keyVal   parameters k             keyVal   keyVal split                 var ekey   keyVal 0             var evalue                 if keyVal length gt 1                 evalue   keyVal 1                         outPara ekey    evalue                           if value   undefined           outPara key    value         else          delete outPara key                 parameters             for var k in outPara           parameters push k         outPara k                   var finalUrl   baseUrl         if parameters length gt 0           finalUrl          parameters join   amp                     return finalUrl   url substring hashIndex

User · Answer

I have a  class  that does this and here it is   function QS        this qs           var s   location search replace            g            if  s             var qsParts   s split   amp             var i  nv          for  i   0  i  lt  qsParts length  i                  nv   qsParts i  split                   this qs nv 0     nv 1                      QS prototype add   function  name  value         if  arguments length    1  amp  amp  arguments 0  constructor    Object             this addMany  arguments 0             return            this qs name    value     QS prototype addMany   function  newValues         for  nv in newValues             this qs nv    newValues nv            QS prototype remove   function  name         if  arguments length    1  amp  amp  arguments 0  constructor    Array             this removeMany  arguments 0             return            delete this qs name      QS prototype removeMany   function  deleteNames         var i      for  i   0  i  lt  deleteNames length  i               delete this qs deleteNames i             QS prototype getQueryString   function         var nv  q           for  nv in this qs             q q length    nv     this qs nv             return q join    amp         QS prototype toString   QS prototype getQueryString     examples   instantiation var qs   new QS  alert  qs       add a sinle name value qs add   new    true     alert  qs       add multiple key values qs add    x   X   y   Y       alert  qs       remove single key qs remove   new    alert  qs       remove multiple keys qs remove    x    bogus     alert  qs      I have overridden the toString method so there is no need to call QS  getQueryString  you can use QS  toString or  as I have done in the examples just rely on the object being coerced into a string

User · Answer

Thank you all for your contribution  I used annakata code and modified to also include the case where there is no query string in the url at all  Hope this would help   function insertParam key  value            key   escape key   value   escape value            var kvp   document location search substr 1  split   amp             if  kvp                      document location search         key         value                    else                var i   kvp length  var x  while  i--                    x   kvp i  split                        if  x 0     key                        x 1    value                      kvp i    x join                           break                                               if  i  lt  0    kvp kvp length     key  value  join                        this will reload the page  it s likely better to store this until finished             document location search   kvp join   amp

User · Answer

You can use one of these    https   developer mozilla org en-US docs Web API URL https   developer mozilla org en docs Web API URLSearchParams   Example   var url   new URL  http   foo bar  x 1 amp y 2        If your expected result is  http   foo bar  x 1 amp y 2 amp x 42  url searchParams append  x   42       If your expected result is  http   foo bar  x 42 amp y 2  url searchParams set  x   42

User · Answer

If you re messing around with urls in links or somewhere else  you may have to take the hash into account as well  Here s a fairly simple to understand solution  Probably not the FASTEST  since it uses a regex    but in 99 999  of cases  the difference really doesn t matter    function addQueryParam  url  key  val        var parts   url match                                   var url   parts 1       var qs   parts 2             var hash   parts 3              if    qs             return url         key         encodeURIComponent  val     hash        else           var qs parts   qs substr 1  split   amp             var i          for  i 0 i lt qs parts length i                  var qs pair   qs parts i  split                   if   qs pair 0     key                    qs parts  i     key         encodeURIComponent  val                    break                                  if   i    qs parts length                qs parts push  key         encodeURIComponent  val                        return url         qs parts join   amp      hash

User · Answer

I have a  class  that does this and here it is   function QS        this qs           var s   location search replace            g            if  s             var qsParts   s split   amp             var i  nv          for  i   0  i  lt  qsParts length  i                  nv   qsParts i  split                   this qs nv 0     nv 1                      QS prototype add   function  name  value         if  arguments length    1  amp  amp  arguments 0  constructor    Object             this addMany  arguments 0             return            this qs name    value     QS prototype addMany   function  newValues         for  nv in newValues             this qs nv    newValues nv            QS prototype remove   function  name         if  arguments length    1  amp  amp  arguments 0  constructor    Array             this removeMany  arguments 0             return            delete this qs name      QS prototype removeMany   function  deleteNames         var i      for  i   0  i  lt  deleteNames length  i               delete this qs deleteNames i             QS prototype getQueryString   function         var nv  q           for  nv in this qs             q q length    nv     this qs nv             return q join    amp         QS prototype toString   QS prototype getQueryString     examples   instantiation var qs   new QS  alert  qs       add a sinle name value qs add   new    true     alert  qs       add multiple key values qs add    x   X   y   Y       alert  qs       remove single key qs remove   new    alert  qs       remove multiple keys qs remove    x    bogus     alert  qs      I have overridden the toString method so there is no need to call QS  getQueryString  you can use QS  toString or  as I have done in the examples just rely on the object being coerced into a string

User · Answer

This will work in all modern browsers   function insertParam key value          if  history pushState              var newurl   window location protocol          window location host   window location pathname        key     value            window history pushState  path newurl     newurl

User · Answer

This was my own attempt  but I ll use the answer by annakata as it seems much cleaner   function AddUrlParameter sourceUrl  parameterName  parameterValue  replaceDuplicates        if   sourceUrl    null      sourceUrl length    0   sourceUrl   document location href      var urlParts   sourceUrl split           var newQueryString           if  urlParts length  gt  1                var parameters   urlParts 1  split   amp             for  var i 0   i  lt  parameters length   i                          var parameterParts   parameters i  split                   if    replaceDuplicates  amp  amp  parameterParts 0     parameterName                                 if  newQueryString                            newQueryString                        else                     newQueryString      amp                    newQueryString    parameterParts 0          parameterParts 1                                     if  newQueryString                newQueryString            else         newQueryString      amp        newQueryString    parameterName         parameterValue       return urlParts 0    newQueryString      Also  I found this jQuery plugin from another post on stackoverflow  and if you need more flexibility you could use that  http   plugins jquery com project query-object  I would think the code would be  haven t tested     return   query parse sourceUrl  set parameterName  parameterValue  toString

User · Answer

var MyApp   new Class     MyApp extend       utility            queryStringHelper  function  url                var originalUrl   url              var newUrl   url              var finalUrl              var insertParam   function  key  value                    key   escape key                   value   escape value                      The previous post had the substr strat from 1 in stead of 0                    var kvp   newUrl substr 0  split   amp                      var i   kvp length                  var x                  while  i--                        x   kvp i  split                            if  x 0     key                            x 1    value                          kvp i    x join                               break                                                           if  i  lt  0                        kvp kvp length     key  value  join                                          finalUrl   kvp join   amp                      return finalUrl                              this insertParameterToQueryString   insertParam               this insertParams   function  keyValues                    for  var keyValue in keyValues 0                         var key   keyValue                      var value   keyValues 0  keyValue                       newUrl   insertParam key  value                                     return newUrl                              return this

User · Answer

Adding to  Vianney s Answer https   stackoverflow com a 44160941 6609678  We can import the Built-in URL module in node as follows  const   URL     require  url      Example    Terminal   node  gt  const   URL     require  url    undefined  gt  let url   new URL      http   localhost 1989 v3 orders    undefined  gt  url href  http   localhost 1989 v3 orders   gt  let fetchAll true  timePeriod   30  b2b false  undefined  gt  url href  http   localhost 1989 v3 orders   gt   url searchParams append  fetchAll   fetchAll   undefined  gt   url searchParams append  timePeriod   timePeriod   undefined  gt   url searchParams append  b2b   b2b   undefined  gt  url href  http   localhost 1989 v3 orders fetchAll true amp timePeriod 30 amp b2b false   gt  url toString    http   localhost 1989 v3 orders fetchAll true amp timePeriod 30 amp b2b false    Useful Links   https   developer mozilla org en-US docs Web API URL https   developer mozilla org en docs Web API URLSearchParams

User · Answer

Here s a vastly simplified version  making tradeoffs for legibility and fewer lines of code instead of micro-optimized performance  and we re talking about a few miliseconds difference  realistically    due to the nature of this  operating on the current document s location   this will most likely be ran once on a page          Add a URL parameter  or changing it if it already exists     param  search  string  this is typically document location search    param  key     string  the key to set    param  val     string  value     var addUrlParam   function search  key  val     var newParam   key         val        params         newParam        If the  search  string exists  then build params from it   if  search           Try to replace an existance instance     params   search replace new RegExp      amp       key       amp         1    newParam           If nothing was replaced  then add the new param to the end     if  params     search          params      amp     newParam               return params       You would then use this like so   document location pathname   addUrlParam document location search   foo    bar

User · Answer

Ok here I compare Two functions  one made by myself  regExp  and another one made by  annakata    Split array   function insertParam key  value        key   escape key   value   escape value        var kvp   document location search substr 1  split   amp          var i kvp length  var x  while i--                 x   kvp i  split                if  x 0   key                            x 1    value                  kvp i    x join                       break                       if i lt 0   kvp kvp length     key value  join               this will reload the page  it s likely better to store this until finished     return   amp   kvp join   amp          Regexp method   function addParameter param  value        var regexp   new RegExp          amp      param             amp        amp            if  regexp test document location search            return  document location search toString   replace regexp  function a  b  c  d                            return  b   param         value   d                    else          return document location search  param         value      Testing case   time1  new Date  getTime    for  var i 0 i lt 10000 i      addParameter  test   test      time2  new Date  getTime    for  var i 0 i lt 10000 i      insertParam  test   test       time3  new Date  getTime     console log  time2-time1       time3-time2      It seems that even with simplest solution  when regexp use only test and do not enter  replace function  it is still slower than spliting    Well  Regexp is kinda slow but    uhh

User · Answer

A basic implementation which you ll need to adapt would look something like this   function insertParam key  value        key   encodeURIComponent key       value   encodeURIComponent value           kvp looks like   key1 value1    key2 value2            var kvp   document location search substr 1  split   amp         let i 0       for   i lt kvp length  i             if  kvp i  startsWith key                       let pair   kvp i  split                   pair 1    value              kvp i    pair join                   break                       if i  gt   kvp length           kvp kvp length     key value  join                     can return this or        let params   kvp join   amp             reload page with new params     document location search   params      This is approximately twice as fast as a regex or search based solution  but that depends completely on the length of the querystring and the index of any match    the slow regex method I benchmarked against for completions sake  approx  150  slower   function insertParam2 key value        key   encodeURIComponent key   value   encodeURIComponent value        var s   document location search      var kvp   key     value       var r   new RegExp    amp        key       amp            s   s replace r   1  kvp        if  RegExp  1   s     s length gt 0     amp            kvp           again  do what you will here     document location search   s

User · Answer

This was my own attempt  but I ll use the answer by annakata as it seems much cleaner   function AddUrlParameter sourceUrl  parameterName  parameterValue  replaceDuplicates        if   sourceUrl    null      sourceUrl length    0   sourceUrl   document location href      var urlParts   sourceUrl split           var newQueryString           if  urlParts length  gt  1                var parameters   urlParts 1  split   amp             for  var i 0   i  lt  parameters length   i                          var parameterParts   parameters i  split                   if    replaceDuplicates  amp  amp  parameterParts 0     parameterName                                 if  newQueryString                            newQueryString                        else                     newQueryString      amp                    newQueryString    parameterParts 0          parameterParts 1                                     if  newQueryString                newQueryString            else         newQueryString      amp        newQueryString    parameterName         parameterValue       return urlParts 0    newQueryString      Also  I found this jQuery plugin from another post on stackoverflow  and if you need more flexibility you could use that  http   plugins jquery com project query-object  I would think the code would be  haven t tested     return   query parse sourceUrl  set parameterName  parameterValue  toString

User · Answer

Following function will help you to add update and delete parameters to or from URL     example1and  var myURL     search    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search     example2  var myURL     search category mobile    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search category mobile amp location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search category mobile amp location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search category mobile     example3  var myURL     search location texas    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search     example4  var myURL     search category mobile amp location texas    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search category mobile amp location california  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search category mobile amp location new 20york  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search category mobile     example5  var myURL    https   example com search location texas fragment    myURL   updateUrl myURL  location   california    console log  added location       myURL     added location    search location california fragment  myURL   updateUrl myURL  location   new york    console log  updated location       myURL     updated location    search location new 20york fragment  myURL   updateUrl myURL  location    console log  removed location       myURL     removed location    search fragment   Here is the function   function updateUrl url key value         if value   undefined           value   encodeURI value                 var hashIndex   url indexOf      0        if  hashIndex     -1  hashIndex   url length 0        var urls   url substring 0  hashIndex  split             var baseUrl   urls 0         var parameters             var outPara             if urls length gt 1             parameters   urls 1                 if parameters                parameters   parameters split   amp             for k in parameters             var keyVal   parameters k             keyVal   keyVal split                 var ekey   keyVal 0             var evalue                 if keyVal length gt 1                 evalue   keyVal 1                         outPara ekey    evalue                           if value   undefined           outPara key    value         else          delete outPara key                 parameters             for var k in outPara           parameters push k         outPara k                   var finalUrl   baseUrl         if parameters length gt 0           finalUrl          parameters join   amp                     return finalUrl   url substring hashIndex

User · Answer

Ok here I compare Two functions  one made by myself  regExp  and another one made by  annakata    Split array   function insertParam key  value        key   escape key   value   escape value        var kvp   document location search substr 1  split   amp          var i kvp length  var x  while i--                 x   kvp i  split                if  x 0   key                            x 1    value                  kvp i    x join                       break                       if i lt 0   kvp kvp length     key value  join               this will reload the page  it s likely better to store this until finished     return   amp   kvp join   amp          Regexp method   function addParameter param  value        var regexp   new RegExp          amp      param             amp        amp            if  regexp test document location search            return  document location search toString   replace regexp  function a  b  c  d                            return  b   param         value   d                    else          return document location search  param         value      Testing case   time1  new Date  getTime    for  var i 0 i lt 10000 i      addParameter  test   test      time2  new Date  getTime    for  var i 0 i lt 10000 i      insertParam  test   test       time3  new Date  getTime     console log  time2-time1       time3-time2      It seems that even with simplest solution  when regexp use only test and do not enter  replace function  it is still slower than spliting    Well  Regexp is kinda slow but    uhh

User · Answer

This is what I use when it comes to some basic url param additions or updates on the server-side like Node js   CoffeScript    x000D   x000D      x000D       method addUrlParam Adds parameter to a given url  If the parameter already exists in the url is being replaced  x000D       param  string  url x000D       param  string  key Parameter s key x000D       param  string  value Parameter s value x000D       returns  string  new url containing the parameter x000D      x000D  addUrlParam    url  key  value  - gt  x000D      newParam   key     value x000D      result   url replace new RegExp    amp          key         amp           1    newParam  x000D      if result is url x000D          result   if url indexOf         -1 then url split      0          newParam     amp     url split      1  x000D      else if url indexOf         -1 then url split      0          newParam         url split      1  x000D      else url         newParam x000D      return result x000D   x000D   x000D    JavaScript     x000D   x000D  function addUrlParam url  key  value    x000D      var newParam   key     value  x000D      var result   url replace new RegExp    amp        key       amp           1    newParam   x000D      if  result     url     x000D          result    url indexOf         -1   url split      0      newParam   amp   url split      1   x000D                url indexOf         -1   url split      0      newParam      url split      1   x000D                  url     newParam    x000D        x000D      return result  x000D    x000D   x000D  var url    http   www example com foo bar amp ciao 3 amp doom 5 hashme   x000D  result1 innerHTML   addUrlParam url   ciao    1    x000D   lt p id  result1  gt  lt  p gt  x000D   x000D   x000D

User · Answer

Try The regular expressions  so slow  thus   var SetParamUrl   function  k   v      replace and add new parameters      let arrParams   window location search          decodeURIComponent window location search substr 1   split   amp    map  v   gt   v split         Array        let index   arrParams findIndex   v    gt   v 0       k        index   index     -1   index   arrParams length       v     null   arrParams   arrParams filter   v   i    gt   i    index    arrParams index      k   v       let  search   encodeURIComponent arrParams map  v   gt   v join       join   amp           let newurl   window location protocol          window location host   window location pathname    arrParams length  gt  0           search                 window location   newurl    reload       if  history pushState       without reload           window history pushState  path newurl   null  newurl              var GetParamUrl   function  k      get parameter by key      let sPageURL   decodeURIComponent window location search substr 1            sURLVariables   sPageURL split   amp    map  v   gt   v split            let  result   sURLVariables find  v   gt   v 0       k       return  result 1         Example              https   some com some path         GetParamUrl  cat     undefined         SetParamUrl  cat    strData      https   some com some path cat strData         GetParamUrl  cat     strData         SetParamUrl  sotr    strDataSort      https   some com some path cat strData amp sotr strDataSort         GetParamUrl  sotr     strDataSort         SetParamUrl  cat    strDataTwo      https   some com some path cat strDataTwo amp sotr strDataSort         GetParamUrl  cat     strDataTwo           remove param         SetParamUrl  cat   null     https   some com some path sotr strDataSort

User · Answer

x000D   x000D      x000D    Add a URL parameter  x000D     param  string  url  x000D     param  string  param the key to set x000D     param  string  value  x000D     x000D  var addParam   function url  param  value    x000D     param   encodeURIComponent param   x000D     var a   document createElement  a    x000D     param     value         encodeURIComponent value          x000D     a href   url  x000D     a search     a search     amp           param  x000D     return a href  x000D    x000D   x000D      x000D    Add a URL parameter  or modify if already exists  x000D     param  string  url  x000D     param  string  param the key to set x000D     param  string  value  x000D     x000D  var addOrReplaceParam   function url  param  value    x000D     param   encodeURIComponent param   x000D     var r       amp     amp amp      param      b          amp          x000D     var a   document createElement  a    x000D     var regex   new RegExp r   x000D     var str   param    value         encodeURIComponent value          x000D     a href   url  x000D     var q   a search replace regex    1  str   x000D     if  q     a search    x000D        a search     a search     amp           str  x000D       else   x000D        a search   q  x000D       x000D     return a href  x000D    x000D   x000D  url    http   www example com hashme   x000D  newurl   addParam url   ciao    1    x000D  alert newurl   x000D   x000D   x000D    And please note that parameters should be encoded before being appended in query string   http   jsfiddle net 48z7z4kx

User · Answer

Here is what I do  Using my editParams   function  you can add  remove  or change any parameter  then use the built in replaceState   function to update the URL   window history replaceState  object or string    Title    page html    editParams  enable    true          background functions below      add change remove URL parameter    use a value of false to remove parameter    returns a url-style string function editParams  key  value      key   encodeURI key      var params   getSearchParameters       if  Object keys params  length     0        if  value     false        return       key         encodeURI value       else       return            if  value     false      params key    encodeURI value     else     delete params key      if  Object keys params  length     0      return        return         map params  function  value  key        return key         value       join   amp           Get object associative array of URL parameters function getSearchParameters        var prmstr   window location search substr 1     return prmstr     null  amp  amp  prmstr          transformToAssocArray prmstr              convert parameters from url-style string to associative array function transformToAssocArray  prmstr      var params             prmarr   prmstr split   amp        for  var i   0  i  lt  prmarr length  i          var tmparr   prmarr i  split           params tmparr 0     tmparr 1         return params

User · Answer

I have a  class  that does this and here it is   function QS        this qs           var s   location search replace            g            if  s             var qsParts   s split   amp             var i  nv          for  i   0  i  lt  qsParts length  i                  nv   qsParts i  split                   this qs nv 0     nv 1                      QS prototype add   function  name  value         if  arguments length    1  amp  amp  arguments 0  constructor    Object             this addMany  arguments 0             return            this qs name    value     QS prototype addMany   function  newValues         for  nv in newValues             this qs nv    newValues nv            QS prototype remove   function  name         if  arguments length    1  amp  amp  arguments 0  constructor    Array             this removeMany  arguments 0             return            delete this qs name      QS prototype removeMany   function  deleteNames         var i      for  i   0  i  lt  deleteNames length  i               delete this qs deleteNames i             QS prototype getQueryString   function         var nv  q           for  nv in this qs             q q length    nv     this qs nv             return q join    amp         QS prototype toString   QS prototype getQueryString     examples   instantiation var qs   new QS  alert  qs       add a sinle name value qs add   new    true     alert  qs       add multiple key values qs add    x   X   y   Y       alert  qs       remove single key qs remove   new    alert  qs       remove multiple keys qs remove    x    bogus     alert  qs      I have overridden the toString method so there is no need to call QS  getQueryString  you can use QS  toString or  as I have done in the examples just rely on the object being coerced into a string

User · Answer

Thank you all for your contribution  I used annakata code and modified to also include the case where there is no query string in the url at all  Hope this would help   function insertParam key  value            key   escape key   value   escape value            var kvp   document location search substr 1  split   amp             if  kvp                      document location search         key         value                    else                var i   kvp length  var x  while  i--                    x   kvp i  split                        if  x 0     key                        x 1    value                      kvp i    x join                           break                                               if  i  lt  0    kvp kvp length     key  value  join                        this will reload the page  it s likely better to store this until finished             document location search   kvp join   amp

User · Answer

const urlParams   new URLSearchParams window location search    urlParams set  order    date     window location search   urlParams     set first agrument is the key  the second one is the value

User · Answer

This is very simple solution  Its doesn t control parameter existence  and it doesn t change existing value  It adds your parameter to end  so you can get latest value in your back-end code   function addParameterToURL param        url   location href       url      url split      1      amp          param      return  url

User · Answer

This is a simple way to add a query parameter    const query   new URLSearchParams window location search   query append  enabled    true      And that is it more here   Please note the support specs

User · Answer

This is very simple solution  Its doesn t control parameter existence  and it doesn t change existing value  It adds your parameter to end  so you can get latest value in your back-end code   function addParameterToURL param        url   location href       url      url split      1      amp          param      return  url

User · Answer

Easiest solution  works if you have already a tag or not  and removes it automatically so it wont keep adding equal tags  have fun  function changeURL tag    if window location href indexOf       gt  -1        if window location href indexOf   amp   tag   gt  -1            var url   window location href replace   amp   tag       amp   tag            else               var url   window location href   amp   tag         else      if window location href indexOf     tag   gt  -1            var url   window location href replace     tag         tag            else               var url   window location href     tag            window location   url      THEN  changeURL  i updated

User · Answer

Sometime we see   at the end URL  i found some solutions which generate results as file php  amp foo bar  i came up with my own solution work perfectly as i want   location origin   location pathname   location search    location search               amp       lang ar    Note  location origin doesn t work in IE  here is its fix

User · Answer

Sometime we see   at the end URL  i found some solutions which generate results as file php  amp foo bar  i came up with my own solution work perfectly as i want   location origin   location pathname   location search    location search               amp       lang ar    Note  location origin doesn t work in IE  here is its fix

User · Answer

This was my own attempt  but I ll use the answer by annakata as it seems much cleaner   function AddUrlParameter sourceUrl  parameterName  parameterValue  replaceDuplicates        if   sourceUrl    null      sourceUrl length    0   sourceUrl   document location href      var urlParts   sourceUrl split           var newQueryString           if  urlParts length  gt  1                var parameters   urlParts 1  split   amp             for  var i 0   i  lt  parameters length   i                          var parameterParts   parameters i  split                   if    replaceDuplicates  amp  amp  parameterParts 0     parameterName                                 if  newQueryString                            newQueryString                        else                     newQueryString      amp                    newQueryString    parameterParts 0          parameterParts 1                                     if  newQueryString                newQueryString            else         newQueryString      amp        newQueryString    parameterName         parameterValue       return urlParts 0    newQueryString      Also  I found this jQuery plugin from another post on stackoverflow  and if you need more flexibility you could use that  http   plugins jquery com project query-object  I would think the code would be  haven t tested     return   query parse sourceUrl  set parameterName  parameterValue  toString

[javascript] Adding a parameter to the URL with JavaScript

Examples related to javascript

Examples related to url

Examples related to parsing

Examples related to parameters

Examples related to query-string