使用正则表达式替换URL片段：解决动态参数重复追加问题

嘿，这个问题我太熟了！每次点击按钮都往URL后面重复塞site参数，最后URL变得乱糟糟的对吧？其实核心就是要替换已有的参数而不是追加，给你两种实用的解决办法：

这个API是浏览器原生提供的，专门用来处理URL参数，代码简洁还不容易出错，现代浏览器（Chrome、Firefox、Edge等）都支持。

实现步骤：

• 解析当前完整URL，拿到可操作的参数对象
• 获取复选框的选中值（单个或多个都能处理）
• 用set()方法替换已有的site参数（如果没有就自动新增）
• 更新URL（可以选择无刷新更新或跳转刷新）

代码示例（单个复选框的情况）：

// 给按钮绑定点击事件
document.getElementById('your-button-id').addEventListener('click', function() {
  // 获取选中的复选框值
  const selectedSite = document.getElementById('site-checkbox').value;
  
  // 解析当前页面的URL
  const currentUrl = new URL(window.location.href);
  
  // 替换或新增site参数
  currentUrl.searchParams.set('site', selectedSite);
  
  // 无刷新更新URL地址栏（如果需要页面跳转刷新，就换成 window.location.href = currentUrl.toString()）
  history.pushState({}, '', currentUrl.toString());
});

如果是多个复选框多选的场景，只需要稍微修改获取值的逻辑，把选中的值拼成逗号分隔的字符串：

document.getElementById('your-button-id').addEventListener('click', function() {
  // 获取所有选中的复选框值，拼成逗号分隔的字符串
  const selectedSites = Array.from(document.querySelectorAll('.site-checkbox:checked'))
    .map(checkbox => checkbox.value)
    .join(',');
  
  const currentUrl = new URL(window.location.href);
  currentUrl.searchParams.set('site', selectedSites);
  
  history.pushState({}, '', currentUrl.toString());
});

如果需要兼容IE这类旧浏览器，就用正则表达式手动匹配并替换参数：

先写一个工具函数用来更新URL参数：

function updateUrlParam(paramKey, paramValue) {
  const currentUrl = window.location.href;
  // 匹配参数的正则：要么是?后面的第一个参数，要么是&后面的参数
  const paramRegex = new RegExp(`([?&])${paramKey}=.*?(&|$)`, 'i');
  // 判断URL里有没有问号，决定用?还是&来拼接新参数
  const separator = currentUrl.indexOf('?') !== -1 ? '&' : '?';

  if (currentUrl.match(paramRegex)) {
    // 已有该参数，替换它的值
    return currentUrl.replace(paramRegex, `$1${paramKey}=${paramValue}$2`);
  } else {
    // 没有该参数，追加到URL末尾
    return `${currentUrl}${separator}${paramKey}=${paramValue}`;
  }
}

然后在按钮点击事件里调用这个函数：

document.getElementById('your-button-id').addEventListener('click', function() {
  const selectedSite = document.getElementById('site-checkbox').value;
  const newUrl = updateUrlParam('site', selectedSite);
  
  // 无刷新更新地址栏，或者用window.location.href = newUrl跳转
  history.pushState({}, '', newUrl);
});

两种方法都能解决你多次点击按钮重复追加参数的问题，优先推荐第一种，毕竟原生API更可靠~

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