如何在JavaScript中转义含单引号的JSON值（PHP传参场景）

这个问题我之前也碰到过！本质是引号冲突搞的鬼——你用单引号包裹onclick的内容，但JSON里的单引号（比如Assassin's里的那个）会被浏览器误判成onclick属性的结束标记，直接打乱了语法结构，所以才抛出Uncaught SyntaxError错误。

方案1：修复内联onclick的输出逻辑 #

只需要在PHP输出JSON时，用htmlspecialchars对JSON字符串做转义处理，并且指定ENT_QUOTES参数（会同时转义单引号和双引号为HTML实体），就能避免引号冲突。

修改后的PHP代码：

onclick='UserQueries(<?php echo htmlspecialchars(json_encode($askInfoData), ENT_QUOTES); ?>)'

原理：json_encode生成的JSON里的单引号会被转成'，双引号转成"，这样放在单引号包裹的onclick属性里时，浏览器不会把它们当成属性的闭合标记，JS函数能正确接收完整的JSON对象。比如原来报错的Assassin's会被转成Assassin's，传入UserQueries后，JS解析出来的依然是正确的Assassin's字符串。

方案2：用事件监听+Data属性（更推荐） #

内联事件写法容易引发这类引号问题，还不符合“行为与结构分离”的前端最佳实践。更稳妥的做法是把JSON数据存在元素的data-*属性里，然后用JS添加点击事件监听：

PHP端代码：

<button class="query-btn" data-info='<?php echo htmlspecialchars(json_encode($askInfoData), ENT_QUOTES); ?>'>
  触发查询
</button>

JavaScript代码：

// 给所有带query-btn类的元素添加点击事件
document.querySelectorAll('.query-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 解析data-info里的JSON数据
    const data = JSON.parse(this.dataset.info);
    console.log(data);
  });
});

这种方式彻底避免了内联事件的引号冲突问题，代码结构也更清晰，后期维护起来更方便。

内容的提问来源于stack exchange，提问作者Nɪsʜᴀɴᴛʜ ॐ