js修改地址栏URL参数解决url参数问题

在JavaScript中，直接修改地址栏的URL（尤其是URL的查询字符串参数）通常涉及到两个步骤：构建新的URL字符串，并决定是否重新加载页面或仅修改历史记录。由于JavaScript不允许直接修改`window.location.href`中的查询字符串而不重新加载页面（出于安全考虑），我们通常通过构建新的URL并替换现有URL来实现这一点。

下面是一个JavaScript函数，用于修改URL的查询字符串参数，而不重新加载页面（通过修改`history.pushState`）：

function updateQueryStringParameter(uri, key, value) {
    // 解析URL
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re)) {
        // 如果参数已存在，则替换它
        return uri.replace(re, '$1' + key + "=" + encodeURIComponent(value) + '$2');
    } else {
        // 如果参数不存在，则添加它
        return uri + separator + key + "=" + encodeURIComponent(value);
    }
}

// 使用示例
var currentUrl = window.location.href;
var newUrl = updateQueryStringParameter(currentUrl, 'param1', 'newValue');

// 修改历史记录，不重新加载页面
history.pushState(null, null, newUrl);

// 注意：如果浏览器地址栏的显示没有自动更新，可能需要调用 window.location.reload(true) 来强制刷新，
// 但这通常不推荐，因为它会重新加载页面。

请注意，`history.pushState`方法仅修改了浏览器的历史记录条目和当前页面的URL，而不会重新加载页面。这意味着页面上的JavaScript变量和DOM状态将保持不变。如果你需要确保页面上的某些内容根据新的URL更新，你可能需要在调用`history.pushState`后手动更新这些内容。

另外，如果你的页面依赖于URL的查询字符串参数来加载数据，并且你希望在不重新加载页面的情况下更新这些数据，你可能需要在`history.pushState`的回调中或之后，使用AJAX或其他方法从服务器获取新数据，并更新页面内容。