javascript - HTML 转义从 ajax/json 返回的数据

Question

我正在使用 ajax 从后端检索一些数据。我得到的结果是 json。

然后我使用 jquery 将它添加到页面:

$(...).append('<H3>' + data.title + '</H3>')

我刚刚意识到 json 数据不是 HTML 转义的，这很糟糕。

我该怎么办？

1. 将后端返回的数据全部转义到json中？
2. 在连接字符串时是否在前端进行所有转义？ (即将所有外部数据包装在转义函数中)

选项 1 意味着 json 中的数据并不是真正的“正确”，它对 HTML 很有用，但它不包含真实数据。更糟糕的是，这意味着我不能只使用 json_encode() - 我首先必须遍历数组数据并转义所有内容。

选项 2 似乎更复杂，我担心我可能会漏掉一个位置。另一方面，这就是从 SQL 获取数据并用 PHP 构建数据时所做的事情，所以我想我已经习惯了。

请不要建议:

$(...).append($('<H3></H3>').text(data.title))

当您有多层嵌套标签时，这种编写方法会变得笨拙。我喜欢编写 HTML，而不是 DOM 调用。

附言。我知道我需要一个 Javascript 模板库，但现在我需要用字符串连接来完成它。

Answer 1

这是一个简单的 jQuery 扩展，它添加了带有 html 转义符的 $append() 格式化方法:

(function( $ ){
  $.fn.$append = function()
  {
    var out = arguments[0];
    for (var i = 1; i < arguments.length; ++i) 
      out = out.replace("{" + arg + "}", arguments[arg].toString().htmlEscape());
    this.append(out);
  };
})( jQuery );

用这个方法你可以写:

$(...).$append('<H3>{1}</H3>', data.title);

并且数据将被转义。在上面添加盐和胡椒粉 - 根据您的口味。

更新:您还需要:

String.prototype.htmlEscape = function() {
   return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}