将HTML作为JSON传递的最佳做法

Question

根据我所读的内容（例如下面的链接），当以JSON格式发送HTML时，您需要转义\\和" ，但这仅是转义。

• http://www.thorntech.com/2012/07/4-things-you-must-do-when-putting-html-in-json/
• 在jQuery中，我将以JSON结果返回HTML，我必须转义什么？
• 使用jQuery转义HTML字符串

我有两种获取数据的方式：

1）从前端

我喜欢从页面中获取html，如下所示：

$('#myDiv').html()

这给了我一个包含html，换行符和空格的字符串。

<a class="some-class" href="somepage.html">
    <figure class="someClass">
        <img src="/img/pic.png" alt="">
    </figure>
</a>

我现在可以选择使用JSON.stringify （显然这是不必要的，因为我只需要转义\\和“）即可：

"<a class=\"some-class\" href=\"somepage.html\">\n        <figure class=\"someClass\"> \n             <img src=\"/img/pic.png\" alt=\"\">\n        </figure>\n    </a>"

然后使用JSON.parse将其转换回HTML并插入DOM。

或者我可以使用escapeHTML()而不是JSON.Stringify：

escapeHTML: function(htmlString) {
         var chr = {
             '"': '"',
             '&': '&',
             "'": ''',
             '/': '/',
             '<': '&lt;',
             '>': '&gt;'
     };

    return html.htmlString(/[\"&'\/<>]/g, function (a) { return chr[a]; });
}

这给了我：

<a class="some-class" href="somepage.html">
        <figure class="someClass"> 
             <img src="/img/pic.png" alt="">
        </figure>
    </a> 

然后，我可以使用以下解决方案A取消转义：

return $('<textarea/>').html( response ).val();

---

2）从后端：

上面的方法很好用，但是如果我（从后端服务）获得的响应看起来像下面的内容（“和/”转义），则它不起作用。

<a class=\"some-class\" href=\"somepage.html\">\n<figure class=\"someClass\">\n<img src=\"/img/pic.png\" alt=\"\">\n<\/figure>\n<\/a>

我首先使用解决方案A。 然后为了摆脱\\"我使用：

markup.replace('\\"', '"');

显然，这不会删除\\/ 。 为此，我的问题是：如果我要使用escapeHTML()方式，如何结合使用正则表达式来对\\和"进行转义？

将HTML作为JSON传递时，最好使用escapeHTML()或JSON.Stringify ？

Answer 1

经过大量研究和思考，我们决定使用自己内置的Javascript更好，而不是手动执行。

因此，我们将JSON.stringify与JSON.parse结合使用，并告诉后端对它们的标记进行简单的html编码，而不是手动转义"和/ " 。