title: How to modify URL Query String without reload
body: <p>I'm using the following method to change the query URL parameter corresponding to the input/dropdown on a form. Currently <code>window.location.href</code> will cause a page reload on change. How can I integrate <code>history.replaceState()</code> instead to modify the URL without reloading?</p>
  
  <p><strong>REGEX function</strong></p>
  
  <pre><code>function replaceQueryString(url, param, value) {
      var re = new RegExp("([?|&amp;])" + param + "=.*?(&amp;|$)", "i");
      if (url.match(re))
          return url.replace(re, '$1' + param + "=" + value + '$2');
      else
          return url + '&amp;' + param + "=" + value;
  }
  </code></pre>
  
  <p><strong>On input change</strong></p>
  
  <pre><code>$("#input_field").on('change', function(e) {
      window.location.href = replaceQueryString(window.location.href, 'input_value', $(this).val());
  });
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I've now managed to update the URL to the value <code>domain.com/2</code> on change, but how can I run it through the <code>replaceQueryString</code> function to parse it into <code>domain.com/?input_value=2</code></p>
  
  <pre><code>$("#input_field").on('change', function(e) {
       window.history.replaceState("#input_field", "input_value", $(this).val());
  });
  </code></pre>