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

Question

I checked many questions but didn't see a solution.

I have JSON which was STRINGIFIED (containing HTML). This JSON is stored as a string on an element. When I try to JSON.parse(str) I am getting errors

I know that the errors are due to the special symbols \\n \\t etc and has to be escaped. So how to parse this string which is the JSON and have it as an object.

 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> 

===== UPDATE

If I read the element with .text() works

I have one more scenario which I don't get how to solve

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

Should I escape them with REGEX or what ? What is the best way ?

Answer 1

jQuery .html() automatically escapes things like quotes into their HTML entity form. The HTML actually being put into the DOM looks like this:

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

Notice the " , which when displayed in a browser will be a double quote. It's an HTML entity.

To pull the code you want back out of the DOM without the HTML entities, use .text() instead of .html()

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

Additionally, I would encourage you to get comfortable debugging your code. console.log() -ing the contents of the str variable would have helped you uncover what's going on.

Answer 2

Using the HTML parser and serializer does not return the original string unchanged.

You should call JSON.parse with the unaltered result of JSON.stringify(obj) .

 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

Please use:

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

This will fix your issue with deserializing JSON.