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

jQuery (or JS) decodes HTML character entity in string

本文关键字：HTML 字符实体字符串解码 JS jQuery 更新时间：2023-09-26

我正试图使用jQuery和JSON响应中返回的字符串数组中的选项值来动态填充<select>元素。其中一个选项值是CCD_ 2，其在解码时为CCD_。然而，当我使用以下代码时：

$.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实体已解码为单引号'。

如何防止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&#39;s Cafe"

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

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

但是这意味着在数据中使用原始撇号会破坏SQL。

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

请参阅如何防止PHP中的SQL注入？或者在服务器上使用的任何编程语言中查找如何使用准备好的语句来防止SQL注入。

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

var optionVals = ["Joe&#39;s Cafe"];
$.each(optionVals, function(idx, elem) {
    elem = elem.replace(/&/g, "&amp;");
    $('#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>