如何通过jQuery或JavaScript点击事件修改URL中的指定参数（仅修改name参数）

嗨，我完全懂你不想硬写一整串URL的痛点——重复写一堆不变的参数既麻烦又容易出错对吧？下面给你两个实用的方案，都是只修改name参数，不用重新拼接整个地址：

方案1：用现代浏览器的URLSearchParams API（推荐） #

这个是ES6之后的标准API，专门用来处理URL参数，代码简洁还不容易出错，Chrome、Firefox、Edge等现代浏览器都支持：

$('.element').click(function(e) {
  e.preventDefault(); // 如果是<a>标签，先阻止默认跳转行为
  // 如果你要修改的是当前页面的URL，直接用window.location.href
  const url = new URL(window.location.href);
  // 直接设置name参数的新值，不管它原来是什么
  url.searchParams.set('name', 'JACK');
  // 跳转到修改后的URL
  window.location.href = url.toString();
});

如果你的目标是某个固定的初始URL（比如你给出的example.com/action.php?id=1&name=JOHN&email=JONH@EXAMPLE.COM），只需要把window.location.href换成这个固定URL就行：

$('.element').click(function(e) {
  e.preventDefault();
  const originalUrl = 'example.com/action.php?id=1&name=JOHN&email=JONH@EXAMPLE.COM';
  const url = new URL(originalUrl);
  url.searchParams.set('name', 'JACK');
  window.location.href = url.toString();
});

方案2：兼容旧浏览器的正则替换方案 #

如果你的项目需要支持IE这类不支持URLSearchParams的旧浏览器，可以用正则表达式精准替换name参数：

$('.element').click(function(e) {
  e.preventDefault();
  const originalUrl = 'example.com/action.php?id=1&name=JOHN&email=JONH@EXAMPLE.COM';
  // 这个正则会匹配name参数，不管它在URL的哪个位置（开头、中间、结尾）
  const modifiedUrl = originalUrl.replace(/(\?|&)name=[^&]+/, '$1name=JACK');
  window.location.href = modifiedUrl;
});

小提示 #

• 优先选方案1，URLSearchParams会帮你处理各种边缘情况（比如参数顺序、特殊字符编码），比正则靠谱多了。
• 如果用正则方案，要注意：如果URL里有多个name参数（比如name=JOHN&name=MIKE），这个正则只会替换第一个；如果你的场景不会出现这种情况，完全没问题。

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