jQuery 的 attr() 函数用 html 特殊字符破坏 html？

Question

请看下面的代码：

http://jsfiddle.net/htdTg/2/

在第一个链接中有一个标题属性，其中包含 html 特殊字符 < 后跟“！” （实际上跟在哪个字符后面并不重要）。 当我们使用 jQuery 的 attr() 函数获取该标题属性的值时，html 被破坏（您可以看到，只要以下文本也丢失，就没有打印“

在第二个链接中，唯一的区别是我在< 之后添加了一个空格，现在它可以按预期工作了。

您认为这是 jQuery 中的错误还是我只是不明白？

PS。如果您认为我在做一些奇怪的事情 - 这只是来自某个工具提示插件的一段代码。

HTML：

<a href="#" title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery:

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

Answer 1

这很有趣。我查看了 title attribute 中可以包含哪些文本，参考文献中说：

用户代理应该如下解释属性值：

1. 用字符替换字符实体，
2. 忽略换行，
3. 用一个空格替换每个回车符或制表符。

显然，这是预期的行为。 < 正在被浏览器解析为 <，这可能会被 jQuery 解释为 HTML。

您也应该转义与号：

<

演示：http://jsfiddle.net/htdTg/9/

更好的演示：http://jsfiddle.net/PsZeY/6/

Answer 2

为什么会这样？

这是因为<! Now you know it? </div> 被转换为<! Now you know it? </div-->

根据 HTML 标准，<! 和 > 是 评论结构 的开始和结束。请注意，这是评论结构不是评论。因此，浏览器将其余部分转换为注释，除非它得到一个结束分隔符 >。

来自W3C

<!-- this is a comment -->
<!-- and so is this one,
    which occupies more than one line -->

标记声明打开分隔符（<!）和评论打开分隔符（--）之间不允许有空格，但评论关闭分隔符（--）之间允许有空格和 标记声明关闭 分隔符 (">")。一个常见的错误是在评论中包含一串连字符 (---)。作者应避免在 cmets 中放置两个或多个相邻的连字符。

同样在here

SGML 中注释声明的语法是

 comment declaration =
    MDO ("<!"), (comment, ( s | comment )* )?, MDC (">")
 comment =
    COM ("--"), SGML character*, COM ("--")

如何解决？

你已经知道了。使用& 替换&。所以写<!而不是<!。这将使< 附加到正文元素而不是<!，这是打开注释结构。

Answer 3

在这种情况下...

title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>"

<! 被转换为 <!，这是 HTML 注释的开头，这正是它不在浏览器窗口中呈现的原因。

在所有情况下，您都不应该在属性中包含 HTML 实体。改用这个...

title="<div style='color:red'>This is the less than sign: <! Now you know it?</div>"

​ http://jsfiddle.net/htdTg/5/

如果您想保留 HTML 实体，请将<div> 用作<div> 进行处理。或者，<div> 实际上会渲染 <div> 在浏览器窗口中。

见：http://jsfiddle.net/htdTg/8/

因此，如果您希望浏览器实际显示<!，请使用：&lt!

Answer 4

文本没有遗漏问题是它被评论了，因为<! 与<! 相同，后者正在被翻译为<!--（不知道为什么），它在html 中开始评论.

如果您检查 html，您将看到以下内容。

<div style='color:red'>This is the less than sign: <!-- Now you know it? --></div>
<div style='color:red'>This is the less than sign: < ! Now you know it?</div> 

Answer 5

我不确定您是只是提出问题还是实际上正在寻找问题的解决方案。如果是后者，那么奇怪的是这似乎工作正常：<

更新代码：

HTML：

<a href="#" title="<div style='color:red'>This is the less than sign: &amp;lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &amp;lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery:

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

更新小提琴：http://jsfiddle.net/htdTg/3/

Answer 6

没有什么是真的错了..

问题是必须对属性内部的 html 进行编码。您已经将< 编码为<，这意味着它将被读取为<。

所以.attr() 将返回一个纯< 字符，而不是编码的..

它不显示的原因是 .append 如果它认为其中有 html，它将尝试解析 html。它找到 <! 文本并将其视为 html 注释。 实际上这是由浏览器直接完成的。

---

如果你看

var e = document.createElement('div');
e.innerHTML = '<!';
console.log(e.innerHTML);

你会看到设置为<!后的div的内部HTML是<!---->。

这就是浏览器解释这段代码的方式..它与jQuery无关..