使用history.replaceState()带多动态参数时的URL转义问题

问题根源 #

你遇到的&冗余问题，核心原因是通过innerHTML获取JSON内容时，浏览器自动解析了HTML实体。服务器返回的datatransfer容器中的JSON字符串，原本的&被HTML转义为&，当你用innerHTML读取时，若服务器返回的JSON本身存在双重转义（比如URL里的&被转成&后又被JSON转义），最终会导致JSON解析后的URL出现&，进而被PHP解析为带amp;前缀的GET参数。

最优前端修复方案 #

直接改用textContent替代innerHTML获取JSON内容——textContent会读取元素的原始文本，不会解析HTML实体，能从源头避免不必要的转义：

// 替换原有的innerHTML读取逻辑
const datatransferElement = containerWithJsonString.querySelector('datatransfer');
const jsonString = datatransferElement.textContent; // 用textContent而非innerHTML
const dataFromAjaxCall = JSON.parse(jsonString);
makeNavigatableBackUrl(dataFromAjaxCall.url);

function makeNavigatableBackUrl(url) {
  history.replaceState({}, "", url);
}

辅助修复方案（前端修改受限时） #

如果无法调整前端内容获取方式，可在JSON解析后对URL做HTML实体解码：

const decodedUrl = dataFromAjaxCall.url.replace(/&/g, '&');
makeNavigatableBackUrl(decodedUrl);

服务器端根源优化 #

确保服务器返回的JSON字符串中，URL参数里的&保持原始状态，不要被HTML转义为&。JSON本身会处理特殊字符的转义（比如\），额外的HTML转义会导致前端解析时出现冗余转义问题。

不推荐的备选方案 #

遍历$_GET数组去除amp;前缀属于事后补救，会增加后端维护成本，且无法修正URL本身的错误，不建议作为首选方案。

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