How to replace url parameter with javascript jquery

Question

I ve been looking for an efficient way to do this but haven t been able to find it  basically what I need is that given this url for example   http   localhost mysite includes phpThumb php src http   media2 jupix co uk v3 clients 4 properties 795 IMG 795 1 large jpg amp w 592 amp aoe 1 amp q 100   I d like to be able to change the URL in the src parameter with another value using javascript or jquery  is this possible   Thanks in advance

User · Answer

Here is function which replaces url param with paramVal function updateURLParameter url  param  paramVal           if  url includes                    return url          param         paramVal           else if  url includes param                return url      amp     param         paramVal           else               let paramStartIndex   url search param               let paramEndIndex   url indexOf   amp    paramStartIndex               if  paramEndIndex    -1                   paramEndIndex   url length                            let brands   url substring paramStartIndex  paramEndIndex                    return url replace brands  param         paramVal

User · Answer

I use this method which    replace the url in the history return the value of the removed parameter  function getUrlParameterAndRemoveParameter paramName        var url   window location origin   window location pathname      var s   window location search substring 1       var pArray    s              s split   amp           var paramValue   null      var pArrayNew           for  var i   0  i  lt  pArray length  i              var pName   pArray i  split               if  pName 0      paramName                paramValue   pName 1      undefined   true   decodeURIComponent pName 1                      else               pArrayNew push pArray i                         url     pArrayNew length    0              pArrayNew join   amp          window history replaceState window history state  document title  url        return paramValue

User · Answer

Javascript now give a very useful functionnality to handle url parameters  URLSearchParams  var searchParams   new URLSearchParams window location search   searchParams set  src   newSrc   var newParams   searchParams toString

User · Answer

I have get best solution to replace the URL parameter   Following function will replace room value to 3 in the following URL       http   example com property  min 50000 amp max 60000 amp room 1 amp property type House  var newurl   replaceUrlParam  room   3    history pushState null  null  newurl       function replaceUrlParam paramName  paramValue       var url   window location href       if  paramValue    null            paramValue                  var pattern   new RegExp    b   paramName         amp              if  url search pattern  gt  0            return url replace pattern   1    paramValue     2               url   url replace                  return url    url indexOf      gt 0     amp            paramName         paramValue         Output   http   example com property  min 50000 amp max 60000 amp room 3 amp property type House

User · Answer

In modern browsers  everything except IE9 and below   our lives are a little easier now with the new URL api  var url   new window URL document location      fx  http   host com endpoint abc 123 url searchParams set  foo    bar    console log url toString        http   host endpoint abc 123 amp foo bar url searchParams set  foo    ooft    console log url toString        http   host endpoint abc 123 amp foo ooft

User · Answer

2020 answer since I was missing the functionality to automatically delete a parameter  so   Based on my favorite answer https   stackoverflow com a 20420424 6284674   I combined it with the ability to      automatically delete an URL param if the value if null or    based on answer https   stackoverflow com a 25214672 6284674 optionally push the updated URL directly in the window location bar IE support since it s only using regex and no URLSearchParams    JSfiddle  https   jsfiddle net MickV zxc3b47u    function replaceUrlParam url  paramName  paramValue       if paramValue    null    paramValue                return url          replace new RegExp     amp      paramValue        amp                 1            replace new RegExp      amp       paramValue        amp    amp       1           url   url replace                var pattern   new RegExp    b   paramName         amp           if url search pattern  gt  0           return url replace pattern   1    paramValue     2              return url    url indexOf      gt 0     amp            paramName         paramValue        Orginal URL  default jsfiddle console URL    https   fiddle jshell net  display  editor console true  console log replaceUrlParam window location href  a   2          https   fiddle jshell net  display  editor console true amp a 2  console log replaceUrlParam window location href  a             https   fiddle jshell net  display  editor console true  console log replaceUrlParam window location href  a  3         https   fiddle jshell net  display  editor console true amp a 3  console log replaceUrlParam window location href  a   null         https   fiddle jshell net  display  editor console true amp     Optionally also update the replaced URL in the window location bar   Note  This does not work in JSfiddle  but it does in a normal browser function pushUrl url       window history pushState         replaceUrlParam window location href  a   2            pushUrl replaceUrlParam window location href  a   2          https   fiddle jshell net  display  editor console true amp a 2  pushUrl replaceUrlParam window location href  a             https   fiddle jshell net  display  editor console true  pushUrl replaceUrlParam window location href  a  3         https   fiddle jshell net  display  editor console true amp a 3  pushUrl replaceUrlParam window location href  a   null         https   fiddle jshell net  display  editor console true amp

User · Answer

Nowdays that s possible with native JS  var href   new URL  https   google com q cats    href searchParams set  q    dogs    console log href toString        https   google com  q dogs

User · Answer

If you look closely you ll see two surprising things about URLs    1  they  seem simple  but the details and corner cases are actually hard   2  Amazingly JavaScript doesn t provide a full API for making working with them any easier    I think a full-fledged library is in order to avoid people re-inventing the wheel themselves or copying some random dude s clever  but likely buggy regex code snippet    Maybe try URI js  http   medialize github io URI js

User · Answer

UpdatE  Make it into a nice function for you   http   jsfiddle net wesbos KH25r 1   function swapOutSource url  newSource        params   url split   amp         var src   params 0  split           params shift        src 1    newSource      var newUrl     src join        params join   amp           return newUrl       Then go at it   var newUrl   swapOutSource  http   localhost mysite includes phpThumb php src http   media2 jupix co uk v3 clients 4 properties 795 IMG 795 1 large jpg amp w 592 amp aoe 1 amp q 100   http   link to new jpg      console log newUrl

User · Answer

In addition to  stenix  this worked perfectly to me   url    window location href      paramName    myparam           paramValue     this  val            var pattern   new RegExp     paramName         amp                var newUrl   url replace pattern   1    paramValue     2            var n url indexOf paramName           alert n          if n    -1               newUrl   newUrl    newUrl indexOf      gt 0     amp            paramName         paramValue                    window location href   newUrl    Here no need to save the  url  variable  just replace in current url

User · Answer

How about something like this    lt script gt  function changeQueryVariable keyString  replaceString        var query   window location search substring 1       var vars   query split   amp         var replaced   false      for  var i   0  i  lt  vars length  i              var pair   vars i  split               if  pair 0     keyString                vars i    pair 0         replaceString              replaced   true                      if   replaced  vars push keyString         replaceString       return vars join   amp        lt  script gt

User · Answer

Wouldn t this be a better solution   var text    http   localhost mysite includes phpThumb php src http   media2 jupix co uk v3 clients 4 properties 795 IMG 795 1 large jpg amp w 592 amp aoe 1 amp q 100   var newSrc    www google com   var newText   text replace   src       amp      1    newSrc     2      EDIT   added some clarity in code and kept  src  in the resulting link   1 represents first part within the     i e  src  and  2 represents the second part within the     i e   amp   so this indicates you are going to change the value between src and  amp   More clear  it should be like this    src  changed value  amp     this is to be replaced with your original url   ADD-ON for replacing all the ocurrences   If you have several parameters with the same name  you can append to the regex global flag  like this text replace   src       amp   g   1    newSrc     2    and that will replaces all the values for those params that shares the same name

User · Answer

Here is modified stenix s code  it s not perfect but it handles cases where there is a param in url that contains provided parameter  like    search searchquery text and  query  is provided    In this case searchquery param value is changed   Code   function replaceUrlParam url  paramName  paramValue       var pattern   new RegExp          amp     paramName         amp           var newUrl url     if url search pattern  gt  0           newUrl   url replace pattern   1 2    paramValue     3              else          newUrl   newUrl    newUrl indexOf      gt 0     amp            paramName         paramValue           return newUrl

User · Answer

A solution without Regex  a little bit easier on the eye  one I was looking for  This supports ports  hash parameters etc   Uses browsers attribute element as a parser   function setUrlParameters url  parameters        var parser   document createElement  a        parser href   url       url            if  parser protocol            url    parser protocol                    if  parser host            url    parser host             if  parser pathname            url    parser pathname             var queryParts            if  parser search            var search   parser search substring 1            var searchParts   search split   amp             for  var i   0  i  lt  searchParts length  i                  var searchPart   searchParts i                var whitespaceIndex   searchPart indexOf                    if  whitespaceIndex     -1                    var key   searchPart substring 0  whitespaceIndex                   var value   searchPart substring whitespaceIndex   1                    queryParts key    value                else                   queryParts searchPart    false                                     var parameterKeys   Object keys parameters        for  var i   0  i  lt  parameterKeys length  i              var parameterKey   parameterKeys i            queryParts parameterKey    parameters parameterKey               var queryPartKeys   Object keys queryParts        var query            for  var i   0  i  lt  queryPartKeys length  i              if  query length     0                query                           if  query length  gt  1                query      amp                       var queryPartKey   queryPartKeys i            query    queryPartKey           if  queryParts queryPartKey                 query                      query    queryParts queryPartKey                        url    query       if  parser hash            url    parser hash             return url

User · Answer

Editing a Parameter The set method of the URLSearchParams object sets the new value of the parameter   After setting the new value you can get the new query string with the toString   method  This query string can be set as the new value of the search property of the URL object   The final new url can then be retrieved with the toString   method of the URL object    var query string   url search   var search params   new URLSearchParams query string        new value of  id  is set to  101  search params set  id    101        change the search property of the main url url search   search params toString        the new url string var new url   url toString        output   http   demourl com path id 101 amp topic main console log new url      Source - https   usefulangle com post 81 javascript-change-url-parameters

User · Answer

try this  var updateQueryStringParam   function  key  value         var baseUrl    location protocol        location host  location pathname  join              urlQueryString   document location search          newParam   key         value          params         newParam          If the  search  string exists  then build params from it     if  urlQueryString            var updateRegex   new RegExp       amp       key       amp               var removeRegex   new RegExp       amp       key        amp      amp                 if  typeof value     undefined     value    null    value              Remove param if value is empty             params   urlQueryString replace removeRegex    1                params   params replace     amp                        else if  urlQueryString match updateRegex      null       If param exists already  update it             params   urlQueryString replace updateRegex    1    newParam              else      Otherwise  add it to end of query string             params   urlQueryString     amp     newParam                          no parameter was set so we don t need the question mark     params   params               params       window history replaceState         baseUrl   params

User · Answer

If you are having very narrow and specific use-case like replacing a particular parameter of given name that have alpha-numeric values with certain special characters capped upto certain length limit  you could try this approach   urlValue replace   bsrc  0-9a-zA-Z     -  1 50  b    src     newValue     Example   let urlValue    www example com a b amp src test-value amp p q   const newValue    sucess   console log urlValue replace   bsrc  0-9a-zA-Z     -  1 50  b    src     newValue       output - www example com a b amp src sucess amp p q

User · Answer

The following solution combines other answers and handles some special cases    The parameter does not exist in the original url The parameter is the only parameter The parameter is first or last The new parameter value is the same as the old The url ends with a   character  b ensures another parameter ending with paramName won t be matched   Solution   function replaceUrlParam url  paramName  paramValue        if  paramValue    null            paramValue                 var pattern   new RegExp    b   paramName         amp              if  url search pattern  gt  0            return url replace pattern   1    paramValue     2              url   url replace                  return url    url indexOf      gt 0     amp            paramName         paramValue      Known limitations    Does not clear a parameter by setting paramValue to null  instead it sets it to empty string  See https   stackoverflow com a 25214672 if you want to remove the parameter

[javascript] How to replace url parameter with javascript/jquery?

Examples related to javascript

Examples related to jquery

Examples related to url

Examples related to url-parameters