How can I add or update a query string parameter

Question

With javascript how can I add a query string parameter to the url if not present or if it present  update the current value  I am using jquery for my client side development

User · Answer

Yeah I had an issue where my querystring would overflow and duplicate, but this was due to my own sluggishness. so I played a bit and worked up some js jquery(actualy sizzle) and C# magick.

So i just realized that after the server has done with the passed values, the values doesn't matter anymore, there is no reuse, if the client wanted to do the same thing evidently it will always be a new request, even if its the same parameters being passed. And thats all clientside, so some caching/cookies etc could be cool in that regards.

JS:

$(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

HTML:

<div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

C#:

    using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

Okay criticism is welcome (this was a nightly concoction so feel free to note adjustments). If this helped at all, thumb it up, Happy Coding.

No duplicates, each request as unique as you modified it, and due to how this is structured,easy to add more queries dynamicaly from wthin the dom.

User · Answer

Here is my library to do that  https   github com Mikhus jsurl  var u   new Url  u query param  value      adds or replaces the param alert u

User · Answer

Here s my approach  The location params   function  shown below  can be used as a getter or setter   Examples   Given the URL is http   example com  foo bar amp baz some-hash    location params   will return an object with all the query parameters   foo   bar   baz  true   location params  foo   will return  bar   location params  foo  undefined  hello   world   test  true   will change the URL to http   example com  baz amp hello world amp test some-hash    Here is the params   function  which can optionally be assigned to the window location object   location params   function params      var obj       i  parts  len  key  value     if  typeof params      string         value   location search match new RegExp     amp      params          amp      amp              return value   value 1    undefined         var  params   location search substr 1  split   amp        for  i   0  len    params length  i  lt  len  i          parts    params i  split           if    parts 0    continue       obj parts 0     parts 1     true         if  typeof params      object    return obj      for  key in params        value   params key       if  typeof value      undefined           delete obj key         else         obj key    value               parts         for  key in obj        parts push key    obj key      true              obj key            location search   parts join   amp

User · Answer

A different approach without using regular expressions  Supports  hash  anchors at the end of the url as well as multiple question mark charcters      Should be slightly faster than the regular expression approach   function setUrlParameter url  key  value      var parts   url split      2   anchor   parts length  gt  1         parts 1          var query    url   parts 0   split      2     if  query length     1       return url         key         value   anchor     for  var params   query query length - 1  split   amp     i   0  i  lt  params length  i        if  params i  toLowerCase   startsWith key toLowerCase                 return params i    key         value  query query length - 1    params join   amp     query join        anchor     return url     amp     key         value   anchor

User · Answer

I realize this question is old and has been answered to death  but here s my stab at it  I m trying to reinvent the wheel here because I was using the currently accepted answer and the mishandling of URL fragments recently bit me in a project   The function is below  It s quite long  but it was made to be as resilient as possible  I would love suggestions for shortening improving it  I put together a small jsFiddle test suite for it  or other similar functions   If a function can pass every one of the tests there  I say it s probably good to go   Update  I came across a cool function for using the DOM to parse URLs  so I incorporated that technique here  It makes the function shorter and more reliable  Props to the author of that function          Add or update a query string parameter  If no URI is given  we use the current    window location href value for the URI         Based on the DOM URL parser described here     http   james padolsey com javascript parsing-urls-with-the-dom         param    string     uri     Optional  The URI to add or update a parameter in     param    string     key     The key to add or update     param    string     value   The new value to set for key       Tested on Chrome 34  Firefox 29  IE 7 and 11     function update query string  uri  key  value             Use window URL if no query string is provided     if     uri     uri   window location href            Create a dummy element to parse the URI with     var a   document createElement   a                  match the key  optional square brackets  an equals sign or end of string  the optional value         reg ex   new RegExp  key                                                  Setup some additional variables         qs          qs len          key found   false          Use the JS API to parse the URI      a href   uri          If the URI doesn t have a query string  add it and return     if     a search              a search         key         value           return a href                Split the query string by ampersands     qs   a search replace              split    amp    amp            qs len   qs length           Loop through each query string part     while   qs len  gt  0              qs len--              Remove empty elements to prevent double ampersands         if     qs qs len      qs splice qs len  1   continue                Check if the current part matches our key         if   reg ex test  qs qs len                        Replace the current value             qs qs len    qs qs len  replace  reg ex  key     1            value               key found   true                             If we haven t replaced any occurrences above  add the new parameter and value     if     key found     qs push  key         value              Set the new query string     a search         qs join    amp           return a href

User · Answer

It s the end of 2020  thanks to modern javascript  node js and browsers support  we can get out of 3rd-party library whirlpool  jquery  query-string etc   and DRY ourselves  Here are javascript node js  and typescript version for a function that adds or updates query params of given url  Javascript  x000D   x000D  const getUriWithParam    baseUrl  params    gt      const Url   new URL baseUrl     let urlParams   new URLSearchParams Url search     for  const key in params        if  params key      undefined          urlParams set key  params key                Url search   urlParams toString      return Url toString        console info  expected  https   example com  foo bar    console log getUriWithParam  https   example com    foo   bar       console info  expected  https   example com slug foo bar hash    console log getUriWithParam  https   example com slug hash    foo   bar       console info  expected  https   example com  bar baz amp foo bar    console log getUriWithParam  https   example com bar baz    foo   bar       console info  expected  https   example com  foo baz amp bar baz    console log getUriWithParam  https   example com foo bar amp bar baz    foo   baz      x000D   x000D   x000D   Typescript type RequestParamType        key  string   any      const getUriWithParam       baseUrl  string    params  RequestParamType    string   gt      const Url   new URL baseUrl     let urlParams  URLSearchParams   new URLSearchParams Url search     for  const key in params        if  params key      undefined          urlParams set key  params key                Url search   urlParams toString      return Url toString

User · Answer

My take from here  compatible with  use strict   does not really use jQuery    function decodeURIParams query      if  query    null      query   window location search    if  query 0              query   query substring 1      var params   query split   amp       var result         for  var i   0  i  lt  params length  i          var param   params i       var pos   param indexOf           if  pos  gt   0            var key   decodeURIComponent param substring 0  pos            var val   decodeURIComponent param substring pos   1            result key    val        else           var key   decodeURIComponent param           result key    true              return result     function encodeURIParams params  addQuestionMark      var pairs         for  var key in params  if  params hasOwnProperty key         var value   params key       if  value    null     matches null and undefined            pairs push encodeURIComponent key          encodeURIComponent value               if  pairs length    0      return       return  addQuestionMark               pairs join   amp             alternative to   extend if not using jQuery     function mergeObjects destination  source         for  var key in source  if  source hasOwnProperty key            destination key    source key               return destination        function navigateWithURIParams newParams      window location search   encodeURIParams   extend decodeURIParams    newParams   true       Example usage      add update parameters navigateWithURIParams   foo   bar   boz  42         remove parameter navigateWithURIParams   foo  null         submit the given form by adding replacing URI parameters  with jQuery      filter-form   submit function e      e preventDefault      navigateWithURIParams decodeURIParams   this  serialize

User · Answer

There are a lot of awkward and unnecessarily complicated answers on this page  The highest rated one   amateur s  is quite good  although it has a bit of unnecessary fluff in the RegExp  Here is a slightly more optimal solution with cleaner RegExp and a cleaner replace call   function updateQueryStringParamsNoHash uri  key  value      var re   new RegExp      amp       key        amp       i      return re test uri           uri replace re    1    key         value           uri   separator   key         value         As an added bonus  if uri is not a string  you won t get errors for trying to call match or replace on something that may not implement those methods   And if you want to handle the case of a hash  and you ve already done a check for properly formatted HTML   you can leverage the existing function instead of writing a new function containing the same logic   function updateQueryStringParams url  key  value        var splitURL   url split           var hash   splitURL 1       var uri   updateQueryStringParamsNoHash splitURL 0        return hash    null   uri   uri         hash      Or you can make some slight changes to  Adam s otherwise excellent answer   function updateQueryStringParameter uri  key  value      var re   new RegExp      amp       key        amp        i      if  re test uri         return uri replace re    1    key         value       else       var matchData   uri match                         var separator        test uri      amp                  return matchData 0    separator   key         value    matchData 1

User · Answer

By using jQuery we can do like below  var query object     query string  query object  KEY      VALUE   var new url   window location pathname         param query object    In variable new url we will have new query parameters   Reference  http   api jquery com jquery param

User · Answer

Based on  amateur s answer  and now incorporating the fix from  j walker dev comment   but taking into account the comment about hash tags in the url I use the following   function updateQueryStringParameter uri  key  value      var re   new RegExp      amp       key          amp          i      if  uri match re         return uri replace re    1    key         value     2        else       var hash            if  uri indexOf          -1            hash   uri replace                      uri   uri replace                       var separator   uri indexOf          -1     amp                  return uri   separator   key         value   hash          Edited to fix     amp   in regex which should of course be    amp   as pointed out in the comments  Edit  Alternative version to support removing URL params as well   I have used value     undefined as the way to indicate removal   Could use value     false or even a separate input param as wanted   function updateQueryStringParameter uri  key  value      var re   new RegExp      amp       key          amp          i      if  value     undefined         if  uri match re             return uri replace re    1 2          else           return uri            else       if  uri match re             return uri replace re    1    key         value     2          else       var hash            if  uri indexOf          -1            hash   uri replace                      uri   uri replace                       var separator   uri indexOf          -1     amp                  return uri   separator   key         value   hash                See it in action at https   jsfiddle net bp3tmuxh 1

User · Answer

Java script code to find a specific query string and replace its value      input letter   click function                        0- prepare values                 var qsTargeted    letter     this value     letter A                   var windowUrl                       var qskey   qsTargeted split      0                   var qsvalue   qsTargeted split      1                     1- get row url                 var originalURL   window location href                    2- get query string part  and url                 if  originalURL split      length  gt  1    qs is exists                                       windowUrl   originalURL split      0                       var qs   originalURL split      1                         3- get list of query strings                     var qsArray   qs split   amp                         var flag   false                        4- try to find query string key                     for  var i   0  i  lt  qsArray length  i                              if  qsArray i  split      length  gt  0                                if  qskey    qsArray i  split      0                                       exists key                                 qsArray i    qskey         qsvalue                                  flag   true                                  break                                                                                                    if   flag        5- if exists modify else add                                               qsArray push qsTargeted                                             var finalQs   qsArray join   amp                           6- prepare final url                     window location   windowUrl         finalQs                                    else                         6- prepare final url                       add query string                     window location   originalURL         qsTargeted

User · Answer

I know this is quite old but i want to fires my working version in here    x000D   x000D  function addOrUpdateUrlParam uri  paramKey  paramVal    x000D    var re   new RegExp      amp       paramKey        amp        i    x000D    if  re test uri     x000D      uri   uri replace re    1    paramKey         paramVal   x000D      else   x000D      var separator        test uri      amp          x000D      uri   uri   separator   paramKey         paramVal  x000D      x000D    return uri  x000D    x000D   x000D  jQuery document  ready function      x000D        paramKey  paramValue   on  change   function     x000D      if      paramKey   val          amp  amp      paramValue   val            x000D            uri   val addOrUpdateUrlParam     uri   val        paramKey   val        paramValue   val      x000D        x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input style  width 100   type  text  id  uri  value  http   www example com text php  gt  x000D   lt label style  display block   gt paramKey x000D     lt input type  text  id  paramKey  gt  x000D   lt  label gt  x000D   lt label style  display block   gt paramValue x000D     lt input type  text  id  paramValue  gt  x000D   lt  label gt  x000D   x000D   x000D    NOTE This is a modified version of  elreimundo

User · Answer

Use this function to add  remove and modify query string parameter from URL based on jquery       param String url  param object param  key  value  query parameter    function modifyURLQuery url  param       var value            var query   String url  split            if  query 1             var part   query 1  split   amp              for  i   0  i  lt  part length  i                  var data   part i  split                    if  data 0   amp  amp  data 1                     value data 0     data 1                                      value     extend value  param           Remove empty value     for  i in value           if  value i                delete value i                           Return url with modified parameter     if value           return query 0            param value         else           return query 0             Add new and modify existing parameter to url  var new url   modifyURLQuery  http   google com foo 34    foo  50  bar  45       Result  http   google com foo 50 amp bar 45   Remove existing  var new url   modifyURLQuery  http   google com foo 50 amp bar 45    bar  null       Result  http   google com foo 50

User · Answer

This is my preference  and it covers the cases I can think of  Can anyone think of a way to reduce it to a single replace   function setParam uri  key  val        return uri          replace RegExp      amp    key        amp          amp                  amp   key     encodeURIComponent val            replace        amp     amp      1

User · Answer

This should serve the purpose    function updateQueryString url  key  value        var arr    url split           var url   arr 0       var fragmentId   arr 1       var updatedQS           if  url indexOf         -1            updatedQS   encodeURIComponent key          encodeURIComponent value             else           updatedQS   addOrModifyQS url substring url indexOf        1   key  value              url   url substring 0  url indexOf               updatedQS      if  typeof fragmentId      undefined             url   url         fragmentId            return url     function addOrModifyQS queryStrings  key  value        var oldQueryStrings   queryStrings split   amp         var newQueryStrings   new Array        var isNewKey   true      for  var i in oldQueryStrings            var currItem   oldQueryStrings i           var searchKey   key                if  currItem indexOf searchKey     -1                currItem   encodeURIComponent key          encodeURIComponent value               isNewKey   false                    newQueryStrings push currItem             if  isNewKey            newQueryStrings push encodeURIComponent key          encodeURIComponent value              return newQueryStrings join   amp

User · Answer

Here s an alternative method using the inbuilt properties of the anchor HTML element    Handles multi-valued parameters  No risk of modifying the   fragment  or anything other than the query string itself  May be a little easier to read  But it is longer     x000D   x000D      var a   document createElement  a    x000D   x000D   getHrefWithUpdatedQueryString   function param  value    x000D       return updatedQueryString window location href  param  value   x000D      x000D   x000D   updatedQueryString   function url  param  value    x000D          x000D        A function which modifies the query string  x000D               by setting one parameter to a single value  x000D   x000D        Any other instances of parameter will be removed replaced  x000D           x000D       var fragment   encodeURIComponent param     x000D                                   encodeURIComponent value   x000D   x000D       a href   url  x000D   x000D       if  a search length     0    x000D    a search         fragment  x000D         else   x000D    var didReplace   false  x000D           Remove leading     x000D        parts   a search substring 1  x000D       Break into pieces x000D      split   amp     x000D   x000D        reassemble       x000D        len   parts length  x000D   x000D    for  var i   0  i  lt  len  i      x000D         x000D        var pieces   parts i  split       x000D        if  pieces 0      param    x000D     if   didReplace    x000D         reassemble push   amp     fragment   x000D         didReplace   true  x000D       x000D          else   x000D     reassemble push parts i    x000D          x000D      x000D   x000D    if   didReplace    x000D        reassemble push   amp     fragment   x000D      x000D   x000D    a search   reassemble join   amp     x000D         x000D   x000D       return a href  x000D      x000D   x000D   x000D

User · Answer

If it s not set or want to update with a new value you can use   window location search    param value      or param new value   This is in simple Javascript  by the way   EDIT  You may want to try using the jquery query-object plugin     window location search     jQuery query set  param   5

User · Answer

Update  2020   URLSearchParams is now supported by all modern browsers  The URLSearchParams utility can be useful for this in combination with window location search  For example  if   URLSearchParams  in window        var searchParams   new URLSearchParams window location search       searchParams set  quot foo quot    quot bar quot        window location search   searchParams toString       Now foo has been set to bar regardless of whether or not it already existed  However  the above assignment to window location search will cause a page load  so if that s not desirable use the History API as follows  if   URLSearchParams  in window        var searchParams   new URLSearchParams window location search      searchParams set  quot foo quot    quot bar quot        var newRelativePathQuery   window location pathname         searchParams toString        history pushState null      newRelativePathQuery      Now you don t need to write your own regex or logic to handle the possible existence of query strings  However  browser support is poor as it s currently experimental and only in use in recent versions of Chrome  Firefox  Safari  iOS Safari  Android Browser  Android Chrome and Opera  Use with a polyfill if you do decide to use it

User · Answer

Here is a shorter version that takes care of    query with or without a given parameter query with multiple parameter values query containing hash   Code   var setQueryParameter   function uri  key  value      var re   new RegExp      amp       key         amp        g      if  uri match re        return uri replace re    1 2    value         need to add parameter to URI   var paramString    uri indexOf       lt  0           amp      key         value    var hashIndex   uri indexOf         if  hashIndex  lt  0      return uri   paramString    else     return uri substring 0  hashIndex    paramString   uri substring hashIndex       The regex description can be found here   NOTE  This solution is based on  amateur answer  but with many improvements

User · Answer

I wrote the following function which accomplishes what I want to achieve   function updateQueryStringParameter 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    1    key         value     2          else       return uri   separator   key         value

User · Answer

window location search is read write   However - modifying the query string will redirect the page you re on and cause a refresh from the server   If what you re attempting to do is maintain client side state  and potentially make it bookmark-able   you ll want to modify the URL hash instead of the query string  which keeps you on the same page  window location hash is read write   This is how web sites like twitter com do this   You ll also want the back button to work  you ll have to bind javascript events to the hash change event  a good plugin for that is http   benalman com projects jquery-hashchange-plugin

User · Answer

To give an code example for modifying window location search as suggested by Gal and tradyblix   var qs   window location search         var param   key         value     remember to URI encode your parameters if  qs length  gt  1           more than just the question mark  so append with ampersand     qs   qs     amp      qs   qs   param  window location search   qs

User · Answer

if you want to set multiple parameters at once   function updateQueryStringParameters uri  params        for key in params         var value   params key             re   new RegExp      amp       key          amp        i              separator   uri indexOf          -1     amp                if  uri match re             uri   uri replace re    1    key         value     2                  else           uri   uri   separator   key         value                    return uri      same function as  amateur s  if jslint gives you an error add this after the for loop  if params hasOwnProperty key

User · Answer

This answer is just a small tweak of ellemayo s answer  It will automatically update the URL instead of just returning the updated string  function  updateQueryString key  value  url        if   url  url   window location href       let updated          var re   new RegExp  quot     amp    quot    key    quot       amp           quot    quot gi quot            hash       if  re test url             if  typeof value      undefined   amp  amp  value     null                updated   url replace re    1    key    quot   quot    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                             updated   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                             updated   url                    else               updated   url                       window history replaceState   path  updated        updated

User · Answer

Based on the answer  ellemayo gave  I came up with the following solution that allows for disabling of the hash tag if desired   function updateQueryString key  value  options        if   options  options            var url   options url    location href      var re   new RegExp      amp       key          amp              gi    hash       hash   url split           url   hash 0       if  re test url             if  typeof value      undefined   amp  amp  value     null                url   url replace re    1    key         value     2 3              else               url   url replace re    1 3   replace    amp                              else if  typeof value      undefined   amp  amp  value     null            var separator   url indexOf          -1     amp                  url   url   separator   key         value             if   typeof options hash      undefined     options hash   amp  amp          typeof hash 1       undefined   amp  amp  hash 1      null          url          hash 1       return url      Call it like this   updateQueryString  foo    bar         url   http   my example com hash       hash  false       Results in   http   my example com foo bar

User · Answer

I have expanded the solution and combined it with another that I found to replace update remove the querystring parameters based on the users input and taking the urls anchor into consideration   Not supplying a value will remove the parameter  supplying one will add update the parameter  If no URL is supplied  it will be grabbed from window location  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   Second Update  As suggested by  Jar  nBarends - Tweak value check to check against undefined and null to allow setting 0 values  Third Update  There was a bug where removing a querystring variable directly before a hashtag would lose the hashtag symbol which has been fixed  Fourth Update  Thanks  rooby for pointing out a regex optimization in the first RegExp object  Set initial regex to     amp    due to issue with using      amp   found by  YonatanKarni  Fifth Update  Removing declaring hash var in if else statement

User · Answer

Here s my slightly different approach to this  written as an excercise function addOrChangeParameters  url  params       let splitParams         let splitPath                   exec url     if   splitPath  amp  amp  splitPath 2        splitPath 2  split  quot  amp  quot   forEach  k   gt    let d   k split  quot   quot    splitParams d 0     d 1          let newParams   Object assign  splitParams  params      let finalParams   Object keys newParams  map   a    gt  a  quot   quot  newParams a    join  quot  amp  quot      return splitPath    splitPath 1     quot   quot    finalParams     url    quot   quot    finalParams      usage  const url    quot http   testing com path empty amp value1 test amp id 3 quot    addOrChangeParameters  url   value1 1  empty  quot empty quot   new 0      quot http   testing com path empty empty amp value1 1 amp id 3 amp new 0 quot

User · Answer

Code that appends a list of parameters to an existing url using ES6 and jQuery   class UrlBuilder       static appendParametersToUrl baseUrl  listOfParams             if  jQuery isEmptyObject listOfParams                 return baseUrl                     const newParams   jQuery param listOfParams            let partsWithHash   baseUrl split               let partsWithParams   partsWithHash 0  split                let previousParams           partsWithParams length     2    partsWithParams 1      amp                  let previousHash    partsWithHash length     2          partsWithHash 1                 return partsWithParams 0    previousParams   newParams   previousHash            Where listOfParams is like  const listOfParams          name 1    value 1        name 2    value 2        name N    value N        Example of Usage       UrlBuilder appendParametersToUrl urlBase  listOfParams     Fast tests       url    http   hello world       console log    gt     UrlParameters appendParametersToUrl url  null           Output   http   hello world      url    http   hello world h1       console log    gt     UrlParameters appendParametersToUrl url  null           Output   http   hello world h1      url    http   hello world       params     p1    v1    p2    v2        console log    gt     UrlParameters appendParametersToUrl url  params           Output  http   hello world p1 v1 amp p2 v2      url    http   hello world p0 v0       params     p1    v1    p2    v2        console log    gt     UrlParameters appendParametersToUrl url  params           Output  http   hello world p0 v0 amp p1 v1 amp p2 v2      url    http   hello world h1       params     p1    v1    p2    v2        console log    gt     UrlParameters appendParametersToUrl url  params          Output  http   hello world p1 v1 amp p2 v2 h1      url    http   hello world p0 v0 h1       params     p1    v1    p2    v2        console log    gt     UrlParameters appendParametersToUrl url  params           Output  http   hello world p0 v0 amp p1 v1 amp p2 v2 h1

User · Answer

It s so simple with URLSearchParams  supported in all modern browsers  caniuse    x000D   x000D  let p   new URLSearchParams    p set  foo    bar    p set  name    Jack  amp  Jill     console log  http   example com      p toString     x000D   x000D   x000D   If you want to modify the existing URL  construct the object like this  new URLSearchParams window location search  and assign the string to window location search

[javascript] How can I add or update a query string parameter?

Examples related to javascript

Examples related to jquery

Examples related to query-string