如何使用JavaScript移除URL中多个参数且无需刷新页面

函数改造逻辑 #

仅需对原有函数做少量调整，即可同时支持单个/多个参数移除，且完全兼容原有调用方式，历史代码无需修改：

function removeURLParameter(url, parameters) {
    var urlparts = url.split('?');  
 
    if (urlparts.length >= 2) {
       // 统一转为数组处理，兼容单个参数传值
       const paramList = Array.isArray(parameters) ? parameters : [parameters]
       var pars = urlparts[1].split(/[&;]/g);

       // 遍历所有要删除的参数逐一匹配移除
       paramList.forEach(targetParam => {
           var prefix = encodeURIComponent(targetParam) + '=';
           for (var i = pars.length; i-- > 0;) {    
              if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                 pars.splice(i, 1);
              }
           }
       })

       return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
    }
    return url;
}

// 封装全局通用方法：直接修改当前页面URL，无需刷新
function removeCurrentPageParams(targetParams) {
    const updatedUrl = removeURLParameter(window.location.href, targetParams)
    window.history.replaceState(null, '', updatedUrl)
}

使用示例 #

// 原有单个参数移除逻辑依然可用
const url = "http://localhost:8088/products/10?param1=key1&param2=key2&param3=key3&param4=key4"
const removeSingleParam = removeURLParameter( url, 'param3')
// 输出：http://localhost:8088/products/10?param1=key1&param2=key2&param4=key4

// 同时移除多个参数
const removeMultiParams = removeURLParameter( url, ['param1', 'param3', 'param4'])
// 输出：http://localhost:8088/products/10?param2=key2

// 任意页面直接调用，无刷新更新当前页面URL
removeCurrentPageParams(['param2', 'param3'])

你可以将上述两个函数放到项目公共JS文件中全局引入，所有页面都可以直接调用。

内容的提问来源于stack exchange，提问作者frankfurt