Jquery 将 "转换为文字引用

Question

我在 Jquery 中看到一些意外行为。看来 jquery 正在将 " 转换为文字双引号，这会扰乱我正在开发的单页应用程序中的表单验证。内容通过 jquery 设置，此时包含 " 的表单字段将转换为 "，这会破坏表单。

作为测试，我尝试了常规的 JS dom 操作并得到了不同的结果。这似乎与 Jquery 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 doc说.html()基于浏览器的innerHTML实现。但是，使用上面的纯 JS 代码:console.log(e.innerHTML) 产量: &和”分别。

此外，在 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;

请记住，上面的代码还将对 content 变量中包含的任何标记内用于 HTML 属性的任何引号进行编码，这可能就是为什么 $.html() 方法一开始就不对它们进行编码。

希望这会有所帮助!