jQuery（或 JS）解码字符串中的 HTML 字符实体

Question

我正在尝试使用 jQuery 和 JSON 响应中返回的字符串数组中的选项值动态填充 <select> 元素。选项值之一是Joe's Cafe，解码后是Joe's Cafe。但是，当我使用以下代码时：

$.each(optionVals, function(idx, elem) {
    $('#restaurant').append('<option value="' + elem + '">' + elem + '</option>');
});

相应的选项不是我所期望的。我看到了：

<option value="Joe's Cafe">Joe's Cafe</option>

而不是这个：

<option value="Joe&#39;s Cafe">Joe&#39;s Cafe</option>

如何防止jQuery在.append()操作中解码HTML实体'？我检查了 JSON 响应，HTML 实体完好无损。我在加载选项后检查了源代码，并且 HTML 实体已被解码为单引号 '。

Answer 1

如何防止jQuery在.append()操作中解码HTML实体'？

你不能，因为它不是。

jQuery 正在生成一些 HTML，然后让 浏览器 将其转换为 DOM。然后，它将该 DOM 片段附加到表示该页面的文档 DOM。

当您使用 DOM 检查器检查 DOM（或当您使用 innerHTML 将其转换为字符串时）时，您正在将 DOM 序列化为 HTML。此时浏览器不知道（因为它没有跟踪，因为它不需要）DOM 中的撇号来自文字撇号还是字符引用。它用来决定如何表示字符的算法使用文字算法（当它可以使用多 1 个可读字符时，使用 5 个字符的代码是没有意义的）。

<option value="Joe's Cafe">Joe's Cafe</option> 和 <option value="Joe's Cafe">Joe's Cafe</option> 是在 HTML 中编写完全相同的两种不同方式。你得到的应该无关紧要。

---

在 HTML 中可能是相同的东西，但存储在数据库中时完全不同。

听起来您希望表单将字符串Joe's Cafe 提交给服务器。

<option value="Joe's Cafe">Joe's Cafe</option> 不会这样做。

这需要：value="Joe's Cafe"

现在您可以通过合理地生成 DOM 而不是将字符串混合在一起来实现这一点（因为当您将字符串混合在一起时，HTML 中具有特殊含义的字符会被视为具有该特殊含义）。

$('#restaurant').append(
    $("<option />").val(elem).text(elem)
);

然而您的意思是数据中包含原始撇号会破坏您的 SQL。

这意味着您很容易受到SQL injection 攻击，并且真正的解决方案是修复这个服务器端。

请参阅How can I prevent SQL-injection in PHP? 或查看如何使用准备好的语句来防止您在服务器上使用的任何编程语言中的 SQL 注入。

Answer 2

为了避免 HTML 实体被解码，您可以在字符串中将 & 全局替换为 &：

var optionVals = ["Joe's Cafe"];
$.each(optionVals, function(idx, elem) {
    elem = elem.replace(/&/g, "&");
    $('#restaurant').append('<option value="' + elem + '">' + elem + '</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="restaurant"></select>