javascript - 将 HTML 作为 JSON 传递的最佳实践

Question

根据我读到的内容(例如下面的链接)，在将 HTML 作为 JSON 发送时，您需要转义 \ 和 "，但这就是您需要的全部逃脱。

• http://www.thorntech.com/2012/07/4-things-you-must-do-when-putting-html-in-json/
• In jQuery, I am returning HTML in a JSON result, what do I have to escape?
• Escaping HTML strings with jQuery

我有两种获取数据的方法:

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 编码，而不是转义 " 和 / 手动。