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

为了避免 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>

Answer 2

How do I prevent jQuery from decoding the HTML entity ' in the .append() operation?

你不能，因为它不是。

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的两种不同的写法。你得到什么应该无关紧要。

It may be the same thing in HTML but it is completely different when stored in a database.

听起来您希望表单将字符串 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 injection 攻击，真正的解决方案 是解决此问题 服务器端。

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

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

jQuery (or JS) decodes HTML character entity in string

javascript

jquery

json

decode

html-entities