Comment modifier la chaîne de requête URL sans recharger

Question

J'utilise la méthode suivante pour modifier le paramètre d'URL de requête correspondant à l'entrée/la liste déroulante sur un formulaire. Actuellement window.location.href entraînera un rechargement de la page lors du changement. Comment puis-je intégrer history.replaceState() à la place pour modifier l'URL sans recharger?

fonction REGEX

function replaceQueryString(url, param, value) { 
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i"); 
    if (url.match(re)) 
     return url.replace(re, '$1' + param + "=" + value + '$2'); 
    else 
     return url + '&' + param + "=" + value; 
} 

Le changement d'entrée

$("#input_field").on('change', function(e) { 
    window.location.href = replaceQueryString(window.location.href, 'input_value', $(this).val()); 
}); 

Mise à jour

J'ai maintenant réussi à mettre à jour l'URL à la valeur domain.com/2 sur le changement, mais comment puis-je courir à travers la fonction replaceQueryString pour analyser dans domain.com/?input_value=2

$("#input_field").on('change', function(e) { 
    window.history.replaceState("#input_field", "input_value", $(this).val()); 
}); 

Answer 1

Passe fonction replaceQueryString() à la troisième paramètre de .replaceState()

window.history.replaceState({} 
, "input_value" 
, replaceQueryString(location.href, "input_value", $(this).val()));