如何用jQuery修改href指定URL参数且保留其他参数

需求说明 #

点击按钮时修改a标签的href属性，将URL中的post=55替换为post=44，同时保留URL内的其他所有动态参数（例如示例中的thread=7，实际场景下参数值不固定，无法提前硬编码），不能丢失原有参数。

现有代码 #

HTML结构 #

<button class="button">button</button>
<a href="posts.php?thread=7&post=55" class="post-link">Post</a>

无效的初始JS写法 #

$('.button').on('click', function() {
  // 问题：直接写死路径会丢失所有原有动态参数
  $("a").attr('href','posts.php?post=44')
  // 问题：硬编码thread参数值，无法适配thread动态变化的场景
  $("a").attr('href','posts.php?thread=7&post=44')
});

效果要求 #

• 初始a标签状态：

<a href="posts.php?thread=7&post=55" class="post-link">Post</a>

• 点击按钮后预期状态：

<a href="posts.php?thread=7&post=44" class="post-link">Post</a>

• 通用要求：无论URL包含多少个其他动态参数、post参数在参数列表的什么位置，替换时都要完整保留非post的所有参数。

可直接使用的实现代码 #

通过正则精准匹配post参数片段完成替换，不需要提前解析所有URL参数，适配所有参数排列场景：

$('.button').on('click', function() {
  // 精准选中目标链接，避免误改页面其他a标签
  const $targetLink = $('.post-link');
  // 获取原有href属性值
  const originalUrl = $targetLink.attr('href');
  // 正则匹配post参数，替换参数值为44
  // 正则说明：([?&]) 匹配参数前的连接符（第一个参数前是?，其余参数前是&），避免匹配到名称含post的其他参数
  const updatedUrl = originalUrl.replace(/([?&])post=[^&]*/, '$1post=44');
  // 将新的url赋值给href属性
  $targetLink.attr('href', updatedUrl);
});

写法说明 #

• 该写法不需要提前知晓其他参数的键名和值，无论URL有多少个动态参数都可以正常保留
• 正则中[^&]*可以匹配任意格式的post参数值（数字、字符串等都支持），如果确定post值一定是数字，也可以替换为\d+，匹配逻辑更严格
• 选择器使用.post-link类名选中目标链接，比直接使用标签选择器a更稳妥，不会误改页面其他链接

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