如何用JavaScript将URL查询字符串中的#替换为转义标识符并更新当前地址

实现方案 #

你的现有代码已经完成了#转%23的编码逻辑，URL实例的searchParams.set方法原生就会对特殊参数值做自动URL编码，不需要手动替换。只需要补充浏览历史推入的逻辑即可，完整代码如下：

let currentUrl = 'http://localhost:8088/stores/1/brands?q=#';
let url = new URL(currentUrl);

url.searchParams.set("q", "#"); 
// 清空原始URL里被识别为片段的hash部分
url.hash='';

let newUrl = url.href; 
// 将新地址推入浏览历史，不会触发页面刷新
history.pushState(null, document.title, newUrl);

console.log(newUrl); // 输出：http://localhost:8088/stores/1/brands?q=%23

补充说明 #

浏览器解析URL时会默认把#识别为片段标识符的起始标记，所以你传入的原始URLhttp://localhost:8088/stores/1/brands?q=#中，#不会被识别为q参数的取值，而是会被归类到hash属性中，所以代码里需要显式清空hash再重新设置q参数的值，就能得到正确编码后的地址。

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