PHP生成的JSON字符串无法正确传入JavaScript函数问题求助

问题根源 #

报错是多层上下文转义规则冲突导致的，输出的代码同时需要满足两层转义要求：

1. JSON字符串作为JavaScript单引号包裹的入参，需要符合JS字符串的转义规则
2. 整个javascript:xxx代码块放在HTML的href双引号属性中，需要符合HTML属性的转义规则
   你之前使用的addslashes是通用转义方法，没有针对这两个场景做适配，所以无法解决冲突。

解决方案 #

方案1：快速修复原有写法 #

仅修改PHP输出链接的代码即可，按顺序做两次转义：

foreach ($log as $field => $entry) {
    // 第一步：将JSON字符串转为合法的JavaScript字符串字面量，JSON_HEX_APOS避免单引号冲突
    $jsParam = json_encode($field, JSON_HEX_APOS);
    // 第二步：将JS代码转为合法的HTML属性值，ENT_QUOTES同时转义单双引号
    $jsHref = htmlspecialchars("javascript:PopUP($jsParam)", ENT_QUOTES);
    echo "<td><a href=\"$jsHref\">JSON</a></td>";
}

方案2：更推荐的实现方式（规避转义冲突） #

不要使用href="javascript:"这种不推荐的写法，改用data自定义属性存储JSON内容，统一绑定点击事件触发弹窗：

1. 修改PHP输出代码：

foreach ($log as $field => $entry) {
    // 仅做HTML属性转义即可
    $jsonContent = htmlspecialchars($field, ENT_QUOTES);
    echo "<td><a href=\"javascript:void(0)\" class=\"json-trigger\" data-json=\"$jsonContent\">JSON</a></td>";
}

2. 新增全局JS事件绑定：

// 所有带json-trigger类的元素点击时弹出对应JSON内容
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('json-trigger')) {
        alert(e.target.dataset.json);
        // 如果要复用原来的PopUP函数，改成 PopUP(e.target.dataset.json) 即可
    }
});

这种方案完全规避了多层嵌套转义的问题，后续如果要修改弹窗逻辑（比如换成自定义弹窗代替alert），不需要修改PHP输出代码，仅调整JS即可，可维护性更高。

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