Change URL parameters

Question

I have this URL   site fwx position 1 amp archiveid 5000 amp columns 5 amp rows 20 amp sorting ModifiedTimeAsc   what I need is to be able to change the  rows  url param value to something i specify  lets say 10  And if the  rows  doesn t exist  I need to add it to the end of the url and add the value i ve already specified  10

User · Answer

URL query parameters can be easily modified using URLSearchParams and History interfaces:

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
//queryParams.set("myParam", "myValue");
queryParams.set("rows", "10");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

Alternatively instead of modifying current history entry using replaceState() we can use pushState() method to create a new one:

history.pushState(null, null, "?"+queryParams.toString());

https://zgadzaj.com/development/javascript/how-to-change-url-query-parameter-with-javascript-only

User · Answer

I ve extended Sujoy s code to make up a function          http   stackoverflow com a 10997390 11236     function updateURLParameter url  param  paramVal       var newAdditionalURL           var tempArray   url split           var baseURL   tempArray 0       var additionalURL   tempArray 1       var temp           if  additionalURL            tempArray   additionalURL split   amp             for  var i 0  i lt tempArray length  i                 if tempArray i  split      0     param                   newAdditionalURL    temp   tempArray i                   temp     amp                                       var rows txt   temp        param         paramVal      return baseURL         newAdditionalURL   rows txt      Function Calls   var newURL   updateURLParameter window location href   locId    newLoc    newURL   updateURLParameter newURL   resId    newResId     window history replaceState         updateURLParameter window location href   param    value       Updated version that also take care of the anchors on the URL    function updateURLParameter url  param  paramVal        var TheAnchor   null      var newAdditionalURL           var tempArray   url split           var baseURL   tempArray 0       var additionalURL   tempArray 1       var temp            if  additionalURL                 var tmpAnchor   additionalURL split               var TheParams   tmpAnchor 0               TheAnchor   tmpAnchor 1           if TheAnchor              additionalURL   TheParams           tempArray   additionalURL split   amp              for  var i 0  i lt tempArray length  i                          if tempArray i  split      0     param                                newAdditionalURL    temp   tempArray i                   temp     amp                                              else               var tmpAnchor   baseURL split               var TheParams   tmpAnchor 0               TheAnchor    tmpAnchor 1            if TheParams              baseURL   TheParams             if TheAnchor          paramVal          TheAnchor       var rows txt   temp        param         paramVal      return baseURL         newAdditionalURL   rows txt

User · Answer

A modern approach to this is to use native standard based URLSearchParams  It s supported by all major browsers  except for IE where they re polyfills available   const paramsString    site fwx position 1 amp archiveid 5000 amp columns 5 amp rows 20 amp sorting ModifiedTimeAsc  const searchParams   new URLSearchParams paramsString   searchParams set  rows   10   console log searchParams toString        return modified string

User · Answer

I too have written a library for getting and setting URL query parameters in JavaScript   Here is an example of its usage   var url   Qurl create       query     foo       Get query params as an object  by key  or add change remove      returns   foo   bar   baz   qux    for  foo bar amp baz qux query   url query        get the current value of foo foo   url query  foo        set  foo bar amp baz qux url query  foo    bar    url query  baz    qux        unset foo  leaving  baz qux url query  foo   false      unsets foo

User · Answer

Would a viable alternative to String manipulation be to set up an html form and just modify the value of the rows element   So  with html that is something like   lt form id  myForm  target  site fwx  gt       lt input type  hidden  name  position  value  1   gt       lt input type  hidden  name  archiveid  value  5000   gt       lt input type  hidden  name  columns  value  5   gt       lt input type  hidden  name  rows  value  20   gt       lt input type  hidden  name  sorting  value  ModifiedTimeAsc   gt   lt  form gt    With the following JavaScript to submit the form  var myForm   document getElementById  myForm    myForm rows value   yourNewValue  myForm submit      Probably not suitable for all situations  but might be nicer than parsing the URL string

User · Answer

To answer my own question 4 years later  after having learned a lot  Especially that you shouldn t use jQuery for everything  I ve created a simple module that can parse stringify a query string  This makes it easy to modify the query string   You can use query-string as follows      parse the query string into an object var q   queryString parse location search      set the  row  property q rows   10     convert the object to a query string    and overwrite the existing query string location search   queryString stringify q

User · Answer

Here is a simple solution using the query-string library  const qs   require  query-string   function addQuery key  value      const q   qs parse location search    const url   qs stringifyUrl              url  location pathname        query             q         key   value                        skipEmptyString  true          window location href   url      if you are using Turbolinks      add this  Turbolinks visit url       Usage addQuery  page   2   If you are using react without react-router export function useAddQuery       const location   window location    const addQuery   useCallback       key  value    gt          const q   qs parse location search         const url   qs stringifyUrl                      url  location pathname            query                   q               key   value                                    skipEmptyString  true                  window location href   url             location          return   addQuery         Usage const   addQuery     useAddQuery   addQuery  page   2   If you are using react with react-router export function useAddQuery       const location   useLocation      const history   useHistory       const addQuery   useCallback       key  value    gt          let pathname   location pathname        let searchParams   new URLSearchParams location search         searchParams set key  value         history push           pathname  pathname          search  searchParams toString                         location  history          return   addQuery          Usage const   addQuery     useAddQuery   addQuery  page   2   PS  qs is the import from query-string module

User · Answer

I know this is an old question  I have enhanced the function above to add or update query params  Still a pure JS solution only                         function addOrUpdateQueryParam param  newval  search                             var questionIndex   search indexOf                                if  questionIndex  lt  0                                search   search                                    search   search   param         newval                              return search                                                     var regex   new RegExp       amp       param       amp       amp                               var query   search replace regex    1   replace   amp                                   var indexOfEquals   query indexOf                                return  indexOfEquals  gt   0   query     amp     query          newval   param         newval

User · Answer

Using javascript URL  var url   new URL window location    url searchParams has  rows     url searchParams set  rows   rows    url searchParams append  rows   rows    window location   url

User · Answer

you can do it via normal JS also  var url   document URL var newAdditionalURL       var tempArray   url split       var baseURL   tempArray 0   var aditionalURL   tempArray 1    var temp       if aditionalURL    var tempArray   aditionalURL split   amp     for   var i in tempArray        if tempArray i  indexOf  rows      -1               newAdditionalURL    temp tempArray i                   temp     amp                              var rows txt   temp  rows 10   var finalURL   baseURL     newAdditionalURL rows txt

User · Answer

I wrote a little helper function that works with any select   All you need to do is add the class  redirectOnChange  to any select element  and this will cause the page to reload with a new changed querystring parameter  equal to the id and value of the select  e g    lt select id  myValue  class  redirectOnChange  gt        lt option value  222  gt test222 lt  option gt       lt option value  333  gt test333 lt  option gt   lt  select gt    The above example would add   myValue 222  or   myValue 333   or using   amp   if other params exist   and reload the page   jQuery     document  ready function             Redirect on Change         redirectOnChange   change function              var href   window location href substring 0  window location href indexOf                var qs   window location href substring window location href indexOf        1  window location href length           var newParam     this  attr  id             this  val             if  qs indexOf   this  attr  id             -1                if  qs                          qs                                 else                   qs   qs     amp                             qs   qs   newParam                     else               var start   qs indexOf   this  attr  id                       var end   qs indexOf   amp    start               if  end    -1                    end   qs length                            var curParam   qs substring start  end               qs   qs replace curParam  newParam                     window location replace href         qs

User · Answer

I was looking for the same thing and found  https   github com medialize URI js which is quite nice     -- Update  I found a better package  https   www npmjs org package qs it also deals with arrays in get params

User · Answer

If you want to change the url in address bar  const search   new URLSearchParams location search   search set  rows   10   location search   search toString     Note  changing location search reloads the page

User · Answer

Here I have taken Adil Malik s answer and fixed the 3 issues I identified with it          Adds or updates a URL parameter         param  string  url  the URL to modify     param  string  param  the name of the parameter     param  string  paramVal  the new value for the parameter     return  string   the updated URL     self setParameter   function  url  param  paramVal        http   stackoverflow com a 10997390 2391566   var parts   url split         var baseUrl   parts 0     var oldQueryString   parts 1     var newParameters         if  oldQueryString        var oldParameters   oldQueryString split   amp         for  var i   0  i  lt  oldParameters length  i            if oldParameters i  split      0     param            newParameters push oldParameters i                        if  paramVal         amp  amp  paramVal     null  amp  amp  typeof paramVal      undefined         newParameters push param         encodeURI paramVal          if  newParameters length  gt  0        return baseUrl         newParameters join   amp         else       return baseUrl

User · Answer

No library  using URL   WebAPI  https   developer mozilla org en-US docs Web API URL  function setURLParameter url  parameter  value        let url   new URL url       if  url searchParams get parameter      value            return url            url searchParams set parameter  value       return url href     This doesn t work on IE  https   developer mozilla org en-US docs Web API URL Browser compatibility

User · Answer

This is the modern way to change URL parameters   function setGetParam key value      if  history pushState        var params   new URLSearchParams window location search       params set key  value       var newUrl   window location protocol          window location host   window location pathname         params toString        window history pushState  path newUrl     newUrl

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  sorting   ModifiedTimeAsc         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

my function support removing param  function updateURLParameter url  param  paramVal  remove   false            var newAdditionalURL               var tempArray   url split               var baseURL   tempArray 0           var additionalURL   tempArray 1           var rows txt                if  additionalURL              newAdditionalURL   decodeURI additionalURL      amp             if  remove              newAdditionalURL   newAdditionalURL replace param         paramVal               else             rows txt   param         paramVal           window history replaceState          baseURL         newAdditionalURL   rows txt  replace    amp         replace   amp  amp      amp    replace    amp

User · Answer

Ben Alman has a good jquery querystring url plugin here that allows you to manipulate the querystring easily   As requested -   Goto his test page here   In firebug enter the following into the console   jQuery param querystring window location href   a 3 amp newValue 100     It will return you the following amended url string     http   benalman com code test js-jquery-url-querystring html a 3 amp b Y amp c Z amp newValue 100 n 1 amp o 2 amp p 3   Notice the a querystring value for a has changed from X to 3 and it has added the new value   You can then use the new url string however you wish e g  using document location   newUrl or change an anchor link etc

User · Answer

I think you want the query plugin   E g    window location search   jQuery query set  rows   10     This will work regardless of the current state of rows

User · Answer

usage  clear   cd src js node js-unit-tests 01-set-url-param   npm test   cd -         prereqs    nodejs   mocha         URI   scheme    authority path  paramName1 paramValue1 amp paramName2 paramValue2   fragment          call by  uri   uri setUriParam  as   md        String prototype setUriParam   function  paramName  paramValue            var uri   this         var fragment     uri indexOf          -1          uri split      1          uri     uri indexOf          -1     uri   uri split      0          if   uri indexOf          -1     uri   uri      amp             uri   uri replace         paramName      amp     paramName          var toRepl    paramValue    null       1    paramValue               var toSrch   new RegExp     amp      paramName           amp                  uri   uri replace toSrch toRepl          if  uri indexOf paramName            -1  amp  amp  toRepl                      var ampersandMayBe   uri endsWith   amp             amp              uri   uri   ampersandMayBe   paramName         String paramValue                    uri     fragment length    0     uri    uri     fragment    may-be re-add the fragment         return uri              var assert   require  assert         describe  replacing url param value   function                  scheme   authority path  p1 v1 amp p2 v2 fragment            a clean url         it  http   org com path - gt  http   org com path  amp prm tgt v   function                var uri    http   site eu 80 qto view devops guide doc             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   with num value         it  http   org com path prm src v - gt  http   org com path  amp prm tgt v   function                var uri    http   site eu 80 qto view devops guide doc bid 57             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   but string value         it  http   org com path prm src v - gt  http   org com path  amp prm tgt v   function                var uri    http   site eu 80 qto view devops guide doc bid boo-bar             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid boo-bar-baz             var uriActual   uri setUriParam  bid   boo-bar-baz              assert equal uriActual  uriExpected                           has the url param existing after the   amp  but string value         it  http   org com path  amp prm src v - gt  http   org com path  amp prm tgt v   function                var uri    http   site eu 80 qto view devops guide doc  amp bid 5             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   with other param         it  http   org com path prm src v amp other p other v - gt  http   org com path  amp prm tgt v amp other p other v   function                var uri    http   site eu 80 qto view devops guide doc bid 5 amp other p other v             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10 amp other p other v             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   amp  with other param         it  http   org com path  amp prm src v amp other p other v - gt  http   org com path  amp prm tgt v amp other p other v   function                var uri    http   site eu 80 qto view devops guide doc  amp bid 5 amp other p amp other v             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10 amp other p amp other v             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   with other param with fragment         it  http   org com path prm src v amp other p other v f - gt  http   org com path  amp prm tgt v amp other p other v f   function                var uri    http   site eu 80 qto view devops guide doc bid 5 amp other p other v f             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10 amp other p other v f             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           has the url param existing after the   amp  with other param with fragment         it  http   org com path  amp prm src v amp other p other v f - gt  http   org com path  amp prm tgt v amp other p other v f   function                var uri    http   site eu 80 qto view devops guide doc  amp bid 5 amp other p amp other v f             var uriExpected    http   site eu 80 qto view devops guide doc  amp bid 10 amp other p amp other v f             var uriActual   uri setUriParam  bid  10             assert equal uriActual  uriExpected                           remove the param-name   param-value pair         it  http   org com path prm src v amp other p other v f - gt  http   org com path  amp prm tgt v amp other p other v f   function                var uri    http   site eu 80 qto view devops guide doc bid 5 amp other p other v f             var uriExpected    http   site eu 80 qto view devops guide doc  amp other p other v f             var uriActual   uri setUriParam  bid  null             assert equal uriActual  uriExpected                           remove the param-name   param-value pair         it  http   org com path  amp prm src v amp other p other v f - gt  http   org com path  amp prm tgt v amp other p other v f   function                var uri    http   site eu 80 qto view devops guide doc  amp bid 5 amp other p other v f             var uriExpected    http   site eu 80 qto view devops guide doc  amp other p other v f             var uriActual   uri setUriParam  bid  null             assert equal uriActual  uriExpected                           add a new param name   param value pair         it  http   org com path prm src v amp other p other v f - gt  http   org com path  amp prm tgt v amp other p other v f   function                var uri    http   site eu 80 qto view devops guide doc  amp other p other v f             var uriExpected    http   site eu 80 qto view devops guide doc  amp other p other v amp bid foo-bar f             var uriActual   uri setUriParam  bid   foo-bar              assert equal uriActual  uriExpected

User · Answer

Another variation on Sujoy s answer   Just changed the variable names  amp  added a namespace wrapper   window MyNamespace   window MyNamespace         window MyNamespace Uri   window MyNamespace Uri          function  ns         ns SetQueryStringParameter   function url  parameterName  parameterValue             var otherQueryStringParameters                var urlParts   url split                var baseUrl   urlParts 0           var queryString   urlParts 1            var itemSeparator               if  queryString                 var queryStringParts   queryString split   amp                  for  var i   0  i  lt  queryStringParts length  i                      if queryStringParts i  split      0     parameterName                        otherQueryStringParameters    itemSeparator   queryStringParts i                       itemSeparator     amp                                                       var newQueryStringParameter   itemSeparator   parameterName         parameterValue           return baseUrl         otherQueryStringParameters   newQueryStringParameter             window MyNamespace Uri     Useage is now   var changedUrl   MyNamespace Uri SetQueryStringParameter originalUrl   CarType    Ford

User · Answer

I think we use the URLSearchParams to get and set the parameters value into href Here is the example to get the current URL and set the value of the parameter test let newUrl   new URL window location href   let params   new URLSearchParams newUrl search   params set  test   testValue   newUrl search   params  newUrl          newUrl toString    history pushState     null  newUrl

User · Answer

Quick little solution in pure js  no plugins needed   function replaceQueryParam param  newval  search        var regex   new RegExp       amp       param       amp       amp           var query   search replace regex    1   replace   amp               return  query length  gt  2   query     amp             newval   param         newval            Call it like this    window location     mypage    replaceQueryParam  rows   55  window location search    Or  if you want to stay on the same page and replace multiple params    var str   window location search  str   replaceQueryParam  rows   55  str   str   replaceQueryParam  cols    no   str   window location   window location pathname   str   edit  thanks Luke  To remove the parameter entirely  pass false or null for the value  replaceQueryParam  rows   false  params    Since 0 is also falsy  specify  0

User · Answer

My solution   const setParams    data    gt        if  typeof data      undefined   amp  amp  typeof data      object             return            let url   new URL window location href      const params   new URLSearchParams url search       for  const key of Object keys data             if  data key     0                params delete key            else               params set key  data key                        url search   params     url   url toString       window history replaceState   url  url    null  url      Then just call  setParams  and pass an object with data you want to set   Example      select   on  change   e   gt        const  this     e currentTarget      setParams    this attr  name     this val           In my case I had to update a html select input when it changes and if the value is  0   remove the parameter  You can edit the function and remove the parameter from the url if the object key is  null  as well   Hope this helps yall

User · Answer

I just wrote a simple module to deal with reading and updating the current url query params   Example usage   import UrlParams from    UrlParams   UrlParams remove  foo     removes all occurences of foo   UrlParams set  foo    bar     set all occurences of foo equal to bar UrlParams add  foo    bar2     add bar2 to foo result  foo bar amp foo bar2 UrlParams get  foo     returns bar UrlParams get  foo   true    returns  bar  bar2    Here is my code named UrlParams  js ts    class UrlParams                   Get params from current url                 returns URLSearchParams             static getParams            let url   new URL window location href          return new URLSearchParams url search slice 1                         Update current url with params                 param params URLSearchParams             static update params           if    params                 window history replaceState            location pathname    params              else               window history replaceState            location pathname                                    Remove key from url query                 param param string             static remove param           let params   this getParams           if params has param                params delete param              this update params                                  Add key value pair to current url                 param key string         param value string             static add key  value           let params   this getParams           params append key  value          this update params                        Get value or values of key                 param param string         param all string   string               static get param  all false           let params   this getParams           if all               return params getAll param                    return params get param                        Set value of query param                 param key string         param value string             static set key  value           let params   this getParams           params set key  value          this update params           export default UrlParams export   UrlParams

User · Answer

You can use this my library to do the job  https   github com Mikhus jsurl  var url   new Url  site fwx position 1 amp archiveid 5000 amp columns 5 amp rows 20 amp sorting ModifiedTimeAsc    url query rows   10  alert  url

User · Answer

2020 Solution  sets the variable or removes iti if you pass null or undefined to the value   var setSearchParam   function key  value        if   window history pushState            return             if   key            return             var url   new URL window location href       var params   new window URLSearchParams window location search       if  value     undefined    value     null            params delete key         else           params set key  value              url search   params      url   url toString        window history replaceState  url  url   null  url

[javascript] Change URL parameters

Examples related to javascript

Examples related to url

Examples related to query-string

Examples related to url-parameters

Examples related to url-parsing