为何HTML属性中 与<的处理逻辑存在差异？

先看代码示例：

HTML 代码 #

<div data-a="a b" data-b="a&nbsp;b" id="test"></div>
<div data-a="a<b" data-b="a&lt;b" id="test2"></div>

JavaScript 代码 #

var test1= document.getElementById('test');

var test1_a= test.getAttribute('data-a');
var test1_b=test.getAttribute('data-b');

// data-a="a b" data-b="a b"
console.log('1:',test1_a===test1_b); // 输出 false;



var test2= document.getElementById('test2');

var test2_a= test2.getAttribute('data-a');
var test2_b=test2.getAttribute('data-b');
// data-a="a<b" data-b="a&lt;b"
console.log('2:',test2_a===test2_b); // 输出 true;

原因解析 #

这本质是HTML解析器对不同类型实体的处理规则不一样：

• <这类是「语法实体」：它们是用来转义HTML里的语法特殊字符（比如<是标签的起始符号），如果属性里直接写<，会破坏HTML结构（解析器会误以为属性值到此结束），所以必须用<转义。当用getAttribute读取时，解析器会自动把转义后的实体还原成原始的<字符——哪怕你在HTML里写了不合法的data-a="a<b"，解析器也会自动修正属性值，最终和data-b="a<b"读取结果一致，所以判断相等为true。

•  属于「字符实体」：它代表的是一个非断空格字符（Unicode编码U+00A0），和普通空格（U+0020）是完全不同的字符。HTML解析器处理属性值时，会把 解析成对应的U+00A0字符，而直接写的空格是U+0020，所以两者读取后内容不一样，判断相等为false。

总结一下：

• 语法实体（如<、>、"）是为了避免破坏HTML结构，读取时会还原成原始特殊字符；
• 字符实体（如 、©）是用来表示特定的Unicode字符，读取时会保留对应的字符，和普通字符不相等。

内容的提问来源于stack exchange，提问作者QinBX