javascript - JSON.parse() 无法解析带有 HTML 的字符串

Question

我检查了很多问题，但没有找到解决方案。

我有 JSON，它是字符串化的(包含 HTML)。 此 JSON 作为字符串存储在元素上。 当我尝试 JSON.parse(str) 时出现错误

我知道错误是由于特殊符号\n\t 等造成的，必须转义。那么如何解析这个 JSON 字符串并将其作为对象。

var obj = {
  "blocks": [{
    "frames_content": "<div id=\"page\" class=\"page\">\n    \n    \t<div class=\"container\" id=\"divider1\">\n    \n    \t\t<div class=\"col-md-12\">\n    \n    \t\t\t<hr class=\"dashed\" data-selector=\"hr.dashed\" style=\"outline: none; cursor: inherit;\">\n    \t\n    \t\t</div><!-- /.col -->\n    \t\n    \t</div><!-- /.container -->\n    \n    </div>",
    "frames_sandbox": false,
    "frames_loaderFunction": "",
    "frames_height": 162,
    "frames_original_url": "/static/admin-users/pages/elements/divider1.html"
  }]
};
document.getElementById("debug").innerHTML = JSON.stringify(obj);
var str = document.getElementById("debug").innerHTML;
var x = JSON.parse(str);
console.log(x);

<div id="debug"></div>

=====更新

如果我用 .text() 读取元素就可以了

我还有一种情况不知道如何解决

<script>
var str = '{"pages":{"index":{"blocks":[{"frames_content":"<div id=\"page\" class=\"page\">\n    \n    \t<div class=\"container\" id=\"divider1\">\n    \n    \t\t<div class=\"col-md-12\">\n    \n    \t\t\t<hr class=\"dashed\" data-selector=\"hr.dashed\" style=\"outline: none; cursor: inherit;\">\n    \t\n    \t\t</div><!-- /.col -->\n    \t\n    \t</div><!-- /.container -->\n    \n    </div>","frames_sandbox":false,"frames_loaderFunction":"","frames_height":162,"frames_original_url":"/static/admin-users/pages/elements/divider1.html"}]}},"responsiveMode":"desktop"}';

var obj = JSON.parse(str);
</script>

我应该用 REGEX 还是什么来转义它们？ 最好的方法是什么？

Answer 1

jQuery .html() 自动将引号之类的内容转义为 HTML 实体形式。实际放入 DOM 中的 HTML 如下所示:

{"blocks":[{"frames_content":"<div id="\&quot;

请注意 "，它在浏览器中显示时将是双引号。它是一个 HTML 实体。

要从 DOM 中提取所需的代码而不包含 HTML 实体，请使用 .text() 而不是 .html()

var str=$("#debug").text();

此外，我鼓励您轻松调试代码。 console.log()-ing str 变量的内容将帮助您发现正在发生的事情。