如何在不重新加载的情况下修改 URL 查询字符串

Question

我正在使用以下方法更改与表单上的 input/dropdown 相对应的查询 URL 参数。当前 window.location.href 将导致页面在更改时重新加载。如何在不重新加载的情况下集成 history.replaceState() 而不是修改 URL？

REGEX 函数

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

输入改变

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

更新

我现在已经设法在更改时将 URL 更新为值 domain.com/2，但是我如何 运行 通过 replaceQueryString 函数来解析它进入 domain.com/?input_value=2

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

Answer 1

将replaceQueryString()函数传递给.replaceState()的第三个参数

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