JSON.parse()无法使用HTML解析字符串

最后发布: 2016-10-15 22:10:47


问题

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

我有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还是它们来逃脱? 什么是最好的方法 ?

javascript json
回答

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

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

请注意&quot; ,当显示在浏览器中时将是双引号。 这是一个HTML实体。

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

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

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


回答

使用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> 


回答

请用:

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

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