Remove URL parameters without refreshing page

Question

I am trying to remove everything after the     in the browser url on document ready    Here is what I am trying   jQuery document  ready function       var url   window location href      url   url split      0         I can do this and see it the below works   jQuery document  ready function       var url   window location href      alert url split      0

User · Answer

None of these solutions really worked for me  here is a IE11-compatible function that can also remove multiple parameters         Removes URL parameters    param removeParams - param array    function removeURLParameters removeParams      const deleteRegex   new RegExp removeParams join                 const params   location search slice 1  split   amp      let search        for  let i   0  i  lt  params length  i    if  deleteRegex test params i       false  search push params i      window history replaceState     document title  location pathname    search length         search join   amp            location hash     removeURLParameters   param1    param2

User · Answer

TL DR 1- To modify current URL and add   inject it  the new modified URL  as a new URL entry to history list  use pushState  window history pushState     document title   quot   quot     quot my-new-url html quot     2- To replace current URL without adding it to history entries  use replaceState  window history replaceState     document title   quot   quot     quot my-new-url html quot     3- Depending on your business logic  pushState will be useful in cases such as   you want to support the browser s back button  you want to create a new URL  add insert push the new URL to history entries  and make it current URL  allowing users to bookmark the page with the same parameters  to show the same contents   to programmatically access the data through the stateObj then parse from the anchor    As I understood from your comment  you want to clean your URL without redirecting again  Note that you cannot change the whole URL  You can just change what comes after the domain s name  This means that you cannot change www example com  but you can change what comes after  com  www example com old-page-name   gt  can become   gt   www example com myNewPaage20180322 php  Background We can use  1- The pushState   method if you want to add a new modified URL to history entries  2- The replaceState   method if you want to update replace current history entry    replaceState   operates exactly like  pushState   except that  replaceState   modifies the current history entry instead of creating a new one  Note that this doesn t prevent the creation of a new entry in the global browser history      replaceState   is particularly useful when you want to update the state object or URL of the current history entry in response to some user action    Code To do that I will use The pushState   method for this example which works similarly to the following format  var myNewURL    quot my-new-URL php quot    the new URL window history pushState  quot object or string quot    quot Title quot    quot   quot    myNewURL     Feel free to replace pushState with replaceState based on your requirements  You can substitute the paramter  quot object or string quot  with    and  quot Title quot  with document title so the final statment will become  window history pushState     document title   quot   quot    myNewURL      Results The previous two lines of code will make a URL such as  https   domain tld some randome url which will be deleted   To become  https   domain tld my-new-url php   Action Now let s try a different approach  Say you need to keep the file s name  The file name comes after the last   and before the query string    http   www someDomain com really long address keepThisLastOne php name john  Will be  http   www someDomain com keepThisLastOne php  Something like this will get it working     fetch new URL    refineURL   gives you the freedom to alter the URL string based on your needs   var myNewURL   refineURL       here you pass the new URL extension you want to appear after the domains      Note that the previous identifiers or  quot query string quot  will be replaced   window history pushState  quot object or string quot    quot Title quot    quot   quot    myNewURL        Helper function to extract the URL between the last     and before        If URL is www example com one two file php user 55 this function will return  file php      pseudo code  edit to match your URL settings       function refineURL           get full URL     var currURL  window location href    get current address            Get the URL between what s after     and befor            1- get URL after        var afterDomain  currURL substring currURL lastIndexOf        1         2- get the part before         var beforeQueryString  afterDomain split  quot   quot   0           return beforeQueryString           UPDATE  For one liner fans  try this out in your console firebug and this page URL will change      window history pushState  quot object or string quot    quot Title quot    quot   quot  window location href substring window location href lastIndexOf        1  split  quot   quot   0     This page URL will change from  http   stackoverflow com questions 22753052 remove-url-parameters-without-refreshing-page 22753103 22753103  To http   stackoverflow com 22753103 22753103   Note  as Samuel Liew indicated in the comments below  this feature has been introduced only for HTML5  An alternative approach would be to actually redirect your page  but you will lose the query string      is it still needed or the data has been processed    window location href    window location href split  quot   quot   0      quot http   www newurl com quot     Note 2  Firefox seems to ignore window history pushState     document title       when the last argument is an empty string  Adding a slash       worked as expected and removed the whole query part of the url string  Chrome seems to be fine with an empty string

User · Answer

In jquery use  lt   window location href    window location href split      0

User · Answer

I wanted to remove only one param success  Here s how you can do this   let params   new URLSearchParams location search  params delete  success   history replaceState null            params   location hash    This also retains  hash     URLSearchParams won t work on IE  but being worked on for Edge  You can use a polyfill or a could use a na  ve helper function for IE-support   function take param key        var params   new Map location search slice 1  split   amp             map function p    return p split                     var value   params get key      params delete key      var search   Array from params entries    map          function v   return v 0      v 1     join   amp        return  search  search         search       value  value      This can be used like   history replaceState      null      take param  success   search   location hash

User · Answer

To clear out all the parameters  without doing a page refresh  AND if you are using HTML5  then you can do this   history pushState          index html       replace  index html  with whatever your page name is  This will add an entry in the browser history  You could also consider replaceState if you don t wan t to add a new entry and just want to replace the old entry

User · Answer

I belive the best and simplest method for this is   var newURL   location href split      0   window history pushState  object   document title  newURL

User · Answer

These are all misleading  you never want to add to the browser history unless you want to go to a different page in a single page app  If you want to remove the parameters without a change in the page  you must use   window history replaceState null  null  window location pathname

User · Answer

Running this js for me cleared any params on the current url without refreshing the page  window history replaceState     document title  location protocol          location host   location pathname

User · Answer

if I have a special tag at the end of my URL like  http   domain com  tag 12345 Here is the below code to remove that tag whenever it presents in the URL   lt script gt     Remove URL Tag Parameter from Address Bar if  window parent location href match  tag          if  typeof  history pushState      quot undefined quot             var obj     Title  document title  Url  window parent location pathname            history pushState obj  obj Title  obj Url         else           window parent location   window parent location pathname           lt  script gt   This gives the idea to remove one or more  or all  parameters from URL With window location pathname you basically get everything before     in the url   var pathname   window location pathname     Returns path only var url        window location href         Returns full URL

User · Answer

Here is an ES6 one liner which preserves the location hash and does not pollute browser history by using replaceState    l  gt  window history replaceState       l pathname l hash    location

User · Answer

Better solution    window history pushState null  null  window location pathname

User · Answer

Joraid code is working but i altered as below  it will work if your URL contain     mark or not   replace URL in browser if window location href indexOf       gt  -1        var newUrl   refineUrl        window history pushState  object or string    Title       newUrl       function refineUrl           get full url     var url   window location href        get url after        var value   url   url slice  0  url indexOf               get the part after before       value    value replace   System Web Configuration WebConfigurationManager AppSettings  BaseURL               return value

User · Answer

a single line solution   history replaceState  amp  amp  history replaceState    null      location pathname   location search replace      amp  my parameter    amp          replace    amp             credits   https   gist github com simonw 9445b8c24ddfcbb856ec

User · Answer

a simple way to do this  works on any page  requires HTML 5     get the string following the   var query   window location search substring 1      is there anything there   if query length          are the new history methods available      if window history    undefined  amp  amp  window history pushState    undefined               if pushstate exists  add a new state to the history  this changes the url without reloading the page          window history pushState     document title  window location pathname

[javascript] Remove URL parameters without refreshing page

Examples related to javascript

Examples related to jquery