How to add or update query string parameter to current url in Javascript

How to add or update query string parameter to current url in Javascript

In this post we will give you information about How to add or update query string parameter to current url in Javascript. Hear we will give you detail about How to add or update query string parameter to current url in JavascriptAnd how to use it also give you demo for it if it is necessary.

In this post, I will let you know how to add or update query string parameter to current url using Javascript and also you will know how to add query string to the current url without reloading page.


Example 1

  1. functionupdateQueryStringParameter(uri, key, value){
  2.      var re =newRegExp("([?&])"+ key +"=.*?(&|$)","i");
  3.      var separator = uri.indexOf('?')!==-1?"&":"?";
  4.      if(uri.match(re)){
  5.      return uri.replace(re,'$1'+ key +"="+ value +'$2');
  6.      }
  7.      else{
  8.      return uri + separator + key +"="+ value;
  9.      }
  10.     }
function updateQueryStringParameter(uri, key, value) {
	  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
	  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
	  if (uri.match(re)) {
	    return uri.replace(re, '$1' + key + "=" + value + '$2');
	  }
	  else {
	    return uri + separator + key + "=" + value;
	  }
	}

In above example, you will need to pass three argument, first will be your current url and second will be key which you want to update and last argument will be the value of key.

Function will return back you a new url with updated query string.


Example 2

Using below line of code, you can add query string to current url without reloading page.

  1. <button onclick="updateURL();">Update</button>
  2. <script type="text/javascript">
  3. functionupdateURL(){
  4. if(history.pushState){
  5. var newurl =window.location.protocol +"//"+window.location.host +window.location.pathname +'?param=hi';
  6. window.history.pushState({path:newurl},'',newurl);
  7. }
  8. }
  9. </script>
 <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?param=hi';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>

In above example, history object of the DOM window is used to provide access to the browser’s history.

pushState method is used to add or modify history entries and it takes three parameters : a state object, a title and a URL.

Second example will work with only modern HTML5 browsers.

Label :

jQuery

How To

JavaScript

Hope this code and post will helped you for implement How to add or update query string parameter to current url in Javascript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  20  =  22

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US