html() 中的 jQuery 编码答案

【问题标题】：jQuery encoding in html()html() 中的 jQuery 编码
【发布时间】：2016-06-15 08:53:38
【问题描述】：

获取以下（简单）HTML 页面：

<html>
<head>
    <script src="jquery-1.12.3.min.js"></script>
</head>
<body>
    <div id='test'>
        <img src='/path/to/image?width=1024&height=768' />
    </div>
</body>
</html>

如果在浏览器控制台中输入如下内容：

$("#test").html()

我得到：

为什么img源属性中的&amp;变成了&amp;？

如果 & 符号出现在段落文本（或类似内容）中，我可以理解......但为什么图像源会以这种方式触摸？这将打破页面以进行进一步处理...

难道没有办法从<div/> 中获取“原始”HTML 吗？

【问题讨论】：

事实是你应该将你的 html 从 &amp; 转换为 &amp;。所以，图片来源应该是<img src='/path/to/image?width=1024&amp;height=768' />
真相是你应该总是对你的 url 字符串进行 url 编码
@madalinivascu：以上与URI编码无关。它与 HTML 文本有关。
This is going to break the page for further processing... 你应该就这个问题提出问题。怎么破？
谢谢大家：我接受了 T.J.克劳德的回答（请参阅我对他的帖子的评论以了解让我感到困惑的地方）

标签： javascript jquery html

【解决方案1】：

为什么img源属性中的&amp;变成了&amp;？

因为它应该¹首先是&amp;；浏览器在解析 HTML 时为您修复了它，因为浏览器是宽容的。 :-)

HTML 属性中的文本是HTML 文本。在 HTML 文本中，&lt; 和 &amp; 都必须编码，因为它们都有特殊值：&lt; 是标签的开头，&amp; 是字符实体的开头。对它们进行编码的典型方法是使用命名字符实体：&lt; 和 &amp;（&gt; 也经常写成&gt;，但在标签之外没有必要）。如果您有一个&amp;，而浏览器的解析器确定没有启动字符实体，解析器会备份并像看到&amp; 一样行事。 HTML5 规范在§8.2.4.2 中解决了这样做的问题：&amp; 将解析器置于“数据状态”，并且解析器尝试使用字符引用；如果它未能使用字符引用，它会回退到将其作为文字 &amp; 处理。

所以浏览器修复了它，然后 jQuery 检索了更正的版本，这就是记录到控制台的内容。

这将打破页面以进行进一步处理...

正确处理 HTML 文本的任何东西都不会受到此影响，任何只处理该属性的值而不是定义它的值的 HTML 文本的东西也不会受到影响。

例如，如果您询问 img 元素的 src 是什么，您将得到一个仅包含 &amp; 的字符串：

var img = document.querySelector("#test img");
console.log(img.getAttribute("src"));
console.log(img.src);

<div id='test'>
  <img src='/path/to/image?width=1024&height=768' />
</div>

这是因为src 和getAttribute 都返回字符串，而不是我们在HTML 中编写字符串的方式。

同样，任何使用属性匹配选择器的东西都可以。

// src*="&height" means "an element with a src attribute
// containing &height anywhere in the value
var img = document.querySelector('img[src*="&height"]');
console.log("Found it? " + (img ? "true" : "false"));

<div id='test'>
  <img src='/path/to/image?width=1024&height=768' />
</div>

&amp; 仅用于在 HTML 中定义该属性的 HTML 文本中。如果一个工具正在处理 HTML 文本，它需要正确理解 HTML 文本。

¹“应该” 在这里可以说是一个强有力的词，因为 HTML 规范 clearly defines 再次指出 &amp; 不以字符实体开头，并且不是ambiguous ampersand 应该读作&amp;。（这将是一个模棱两可的＆符号：&asldkfj;，因为它开始的东西看起来像一个字符实体，但不是一个）。所以从这个意义上说，原文只是写同一件事的另一种方式，依赖于&amp; 没有歧义这一事实。

【讨论】：

好的，谢谢：现在一切都清楚了。我很困惑，因为如果我直接在浏览器的地址栏中键入包含 &amp; 的 URL，那么它就不起作用（我的服务器端代码无法正确检测 & 号后面的 URL 参数）；相反，如果我有一个在 HTML 代码中包含 &amp; 的 img 源，那么它仍然可以工作（因为 HTML 属性只是 HTML 文本，然后浏览器在将请求发送到服务器之前正确解析它）
@MorixDev：就是这样，是的。 :-)