JSON.parse（）无法使用HTML解析字符串

Question

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

我有STRINGIFIED（包含HTML）的JSON。 此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实体。

要在没有HTML实体的情况下从DOM中拉出您想要的代码，请使用.text()而不是.html()

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

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

Answer 2

使用HTML解析器和序列化程序不会返回原始字符串不变。

您应该使用JSON.stringify(obj)的不变结果调用JSON.parse 。

 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" }] }; var str = JSON.stringify(obj); document.getElementById('debug').innerHTML = str; console.log(JSON.parse(str)); 

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

Answer 3

请用：

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

这将解决反序列化JSON的问题。