URL参数替换优化：单次重定向实现添加/替换typ并清除其他参数

没问题，我给你写个简洁的jQuery实现，完全满足你的需求——点击span时单次重定向，只保留typ参数（添加/替换它），自动清除所有其他URL参数：

第一步：HTML结构 #

先给你的span元素加上统一的类名和自定义属性，用来存储对应的typ值：

<!-- 示例span按钮，可根据你的实际需求修改文本和data-typ值 -->
<span class="typ-switcher" data-typ="article">设置类型：文章</span>
<span class="typ-switcher" data-typ="video">设置类型：视频</span>
<span class="typ-switcher" data-typ="">清除类型参数</span>

第二步：jQuery代码实现 #

把这段代码放到你的页面脚本里（确保已经引入jQuery）：

$(document).ready(function() {
  // 给所有typ切换按钮绑定点击事件
  $('.typ-switcher').on('click', function() {
    // 获取当前点击span对应的typ值
    const targetTyp = $(this).data('typ');
    
    // 获取当前页面的基础URL（域名+路径，不含任何参数）
    const baseUrl = window.location.origin + window.location.pathname;
    
    // 构建新URL：只保留typ参数（如果targetTyp为空则直接用基础URL）
    let newUrl = baseUrl;
    if (targetTyp) {
      newUrl += `?typ=${encodeURIComponent(targetTyp)}`;
    }
    
    // 单次重定向到新URL
    window.location.href = newUrl;
  });
});

代码说明 #

• 参数管理逻辑：不管当前URL有多少个其他参数，新URL只会保留基础路径+typ参数（如果需要的话），自动清除所有其他参数，完全符合你的要求
• 灵活扩展：通过data-typ属性可以轻松添加更多类型的切换按钮，不用修改JS代码
• 编码安全：用encodeURIComponent()处理typ值，避免特殊字符导致的URL错误
• 清除参数场景：如果需要完全移除typ参数（比如第三个示例span），只要把data-typ设为空，代码会直接跳转到无参数的基础URL

测试场景验证 #

1. 当前URL：https://example.com/page?foo=bar&typ=old → 点击data-typ="video"的span后，跳转至https://example.com/page?typ=video
2. 当前URL：https://example.com/page?abc=123 → 点击data-typ="article"的span后，跳转至https://example.com/page?typ=article
3. 当前URL：https://example.com/page?typ=test&xyz=789 → 点击data-typ=""的span后，跳转至https://example.com/page

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