jquery - Jquery 将 " 转换为文字引号

Question

我在 Jquery 中看到了一些意想不到的行为。看来 jquery 正在转换"为文字双引号，这与我正在处理的单页应用程序中的表单验证相混淆。内容是通过 jquery 设置的，此时包含的表单字段"被转换为"破坏表单。

作为测试，我尝试了常规的 JS dom 操作并得到了不同的结果。这似乎与 Jquery 的 amont 1.x 和 2.x 版本一致。

这是我尝试过的代码：

// Regular Javascript
var e = document.createElement('div');
var textNode=document.createTextNode('&');
e.appendChild(textNode)
console.log(e.childNodes) //=> ['&']

var e = document.createElement('div');
var textNode=document.createTextNode('"');
e.appendChild(textNode)
console.log(e.childNodes) //=> ['"']

// vs. Jquery

e = $('<div>')
content = '&amp;'
e.html(content)
console.log(e.html()) //=> &amp;

e = $('<div>')
content = '&quot;'
e.html(content)
console.log(e.html()) // => " (a quote)

有什么想法吗？

编辑 Jquery 文档说 .html() 基于浏览器的 innerHTML 实现。但是，使用上面的纯 JS 代码：console.log(e.innerHTML) yields: & 和“ 分别。

此外，对存储在 jquery 中的实际 dom 调用 innerHTML 分别会产生：console.log(e.get(0).innerHTML) & 和 "。

e = $('<div />');
content = '&quot;'
e.html(content)
console.log(e.get(0).innerHTML) // => "
console.log(e.html()) // => "
console.log(e.text()) // => "

e = $('<div />');
content = '&amp;'
e.html(content)
console.log(e.get(0).innerHTML) //=> &amp;
console.log(e.html()) //=> &amp;
console.log(e.text()) //=> &

Answer 1

$.html()方法将解码/编码 HTML 实体。要绕过此行为，请考虑使用$.text()代替：

var e = $("<div>"), content = "&quot;";
e.text(content);
console.log(e.text()); // outputs &quot;

编辑

您可以考虑仅使用正则表达式替换来查找有问题的引号并自己对其进行编码，如下所示：

var e = $("<div>"), content = "&quot;&amp;";
e.html(content);
console.log(e.html()); // outputs "&amp;

var e_encoded = e.html().replace(/"/g, "&quot;");
console.log(e_encoded); // outputs &quot;&amp;

请记住，上述内容还将对变量中包含的任何标签中用于 HTML 属性的任何引号进行编码content，这可能是该$.html()方法开始时不对它们进行编码的原因。

我希望这有帮助！

Answer 2

使用.text()方法而不是.html().

Answer 3

共识是这是预期的行为，因为 jquery 只是包装了浏览器的 innerHTML 方法。

对于需要在呈现的表单输入等中区分“和”的单页应用程序来说，这似乎是一个可悲的消息。