不修改其他参数的情况下替换URL中的指定参数

直接拼接?par2=xxx的方式会覆盖整个查询字符串，导致其他参数丢失。可以用浏览器原生的URLSearchParams API来处理，既能修改指定参数，又能完整保留其他参数，代码如下：

// 目标值
const hello = "max";
// 获取当前URL的查询参数对象
const params = new URLSearchParams(window.location.search);
// 修改指定参数par2的值
params.set('par2', hello);
// 更新URL，保留原有路径，替换查询字符串
window.history.replaceState(null, null, `${window.location.pathname}?${params.toString()}`);

代码说明 #

• URLSearchParams(window.location.search)：把当前URL的查询字符串转换成可操作的参数对象
• params.set('par2', hello)：修改指定参数par2的值，若参数不存在则会自动新增
• params.toString()：把参数对象转回标准的查询字符串格式
• 最后用replaceState更新URL时，保留原路径window.location.pathname，再拼接修改后的查询字符串

运行这段代码后，URL会变为你期望的样子：

http://mywebsite.com/?par1=mynameis&par2=max&par3=nicetomeetyou

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