jtml()中的jQuery编码

Question

采取以下(简单)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 src ="/ path/to/image？width = 1024& height = 768">

为什么将&in imgsource属性转向&？

我可以理解&符号是否出现在段落文本中(或类似的东西)......但为什么图像源会以这种方式触摸？这将打破页面进行进一步处理......

有没有办法从一个<div/>？获得"原始"HTML ？

Answer 1

为什么&img源属性已被转向&？

因为它应该¹已经&摆在首位; 浏览器在解析HTML时为您修复了它,因为浏览器是宽容的.:-)

HTML属性中的文本是HTML文本.在HTML文本,都<和&必须进行编码,因为它们都具有特殊值:<是一个标签的开始,&是一个字符实体的开始.对它们进行编码的典型方法是使用命名字符实体:<和&(>也经常编写>,但在标记之外没有必要).如果你有一个&浏览器的解析器确定没有启动一个字符实体,那么解析器会进行备份,就像它看到的&那样.HTML5规范在§8.2.4.2中解决了这个问题:&将解析器置于"数据状态",解析器尝试使用字符引用; &如果它不能使用字符引用,它会回退为将其作为文字处理.

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

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

正确处理HTML文本的任何内容都不会受此影响,也不会仅涉及该属性的值而不是定义其值的HTML文本.

例如,如果你问那个img元素是什么src,你会得到一个只包含一个字符串的字符串&:

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>

&仅用于在HTML中定义该属性的HTML文本中.如果工具正在处理HTML文本,则需要正确理解HTML文本.

¹ "should"在这里可以说是一个强有力的词,因为HTML规范再次清楚地定义了一个&不启动一个字符实体并且不是一个模糊的&符号应该被读作一个&.(这将是一个模糊的&符号:&asldkfj;因为它启动的东西看起来像一个字符实体,但不是一个).所以从这个意义上来说,原始文本只是另一种写同一事物的方式,依赖的&是不模糊的事实.