Jquery 将 " 转换为文字引号

Posted 2023-02-24

【中文标题】Jquery 将 " 转换为文字引号

【英文标题】：Jquery converting " to literal quotation

【发布时间】：2013-06-01 18:07:30

【问题描述】：

我在 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 doc 说 .html() 基于浏览器的 innerHTML 实现。 但是，使用上面的纯 JS 代码： console.log(e.innerHTML) 输出：&和“分别。

另外，在存储在 jquery yeilds 中的实际 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()) //=> &

【问题讨论】：

你不应该为此使用 jQuery。 Vanilla JS 各方面都出类拔萃。

【参考方案1】：

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

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

【参考方案2】：

$.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() 方法不编码它们开头的原因。

我希望这会有所帮助！

【讨论】：

它似乎只对双引号这样做。回复：&被单独留下。而且周围有标记，所以我无法使用 .text()。这是一个精简的例子。

【参考方案3】：

使用.text() method 而不是.html()。

【讨论】：

它似乎只对双引号这样做。回复：&留下一个人。