JavaScript格式化含双引号的JSON时出现解析错误求解决方案

你遇到的核心问题是：Golang模板往<pre id="jsonText">里填充JSON时，没正确转义字符串值里的双引号（比如description字段里的"hardcore"），导致前端拿到的是不合法的JSON结构，执行JSON.parse时直接抛出语法错误。之前尝试的正则全局替换要么把JSON本身的结构引号也转义了，要么没命中真正需要转义的位置，所以无效。

方案一：后端Golang模板正确输出JSON（优先推荐） #

这是根治问题的办法，利用Golang模板内置的json函数输出JSON，它会自动处理所有需要转义的字符（双引号、换行、特殊字符等），确保输出的是标准合法的JSON字符串。

模板代码修改示例： #

如果你的模板原本是直接输出JSON数据：

<pre id="jsonText">{{.JsonData}}</pre>

改成用json函数输出：

<pre id="jsonText">{{json .JsonData}}</pre>

这里的.JsonData如果是Go的结构体、map等可序列化对象，json函数会直接把它转成标准JSON字符串；如果.JsonData已经是字符串类型，先把它解析成Go对象再用json函数，或者改用JS函数（也能处理HTML文本中的转义）：

<pre id="jsonText">{{JS .JsonString}}</pre>

方案二：前端临时兼容修复（不推荐长期用） #

如果后端暂时没法改，前端可以尝试针对性修复文本，但这种方法有局限性，复杂JSON可能失效。

思路是：只转义字段值内部的未转义双引号，避开JSON结构本身的引号（比如键名的引号、结构分隔的引号）。修改后的JS代码：

var pList = document.querySelectorAll("#jsonText");
[...pList].forEach(p => {
  let rawText = p.textContent;
  // 仅匹配不在结构引号内的未转义双引号，添加转义符
  let fixedText = rawText.replace(/(?<!\\)"(?!\s*:|\s*})/g, '\\"');
  try {
    let parsedData = JSON.parse(fixedText);
    p.textContent = JSON.stringify(parsedData, null, 2);
  } catch (err) {
    console.error("JSON修复失败:", err);
    // 解析失败时保留原文本，避免页面空白
    p.textContent = rawText;
  }
});

注意：这个正则只适配简单场景，要是JSON有嵌套对象、特殊转义字符等复杂情况，大概率还是会出问题，所以尽量优先改后端。

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