为何用getAttribute获取的文本与变量赋值的文本不一致？

核心原因是HTML属性值的解析规则和JavaScript字符串的解析规则存在差异：

• HTML解析器处理属性值时，会自动将属性内的换行符（\n）、制表符（\t）等空白字符替换为空格，并且会把多个连续的空白字符合并成单个空格。
  你的HTML中txt属性里的换行和制表符，经过HTML解析后都会被转成空格，最终通过getAttribute拿到的text内容是所有空白合并后的字符串："text test parse new line"。

• 而JavaScript中直接赋值的字符串text2会保留原始的空白字符，也就是包含制表符（\t）和换行符（\n），内容为"text\t test\nparse\t new\nline"，和经过HTML处理后的text自然无法匹配。

验证方法 #

可以通过打印字符编码的方式确认差异：

// 打印text的字符编码
console.log(Array.from(text).map(c => c.charCodeAt(0)));
// 打印text2的字符编码
console.log(Array.from(text2).map(c => c.charCodeAt(0)));

对比结果会发现，text里的空白字符都是ASCII码32（空格），而text2里存在ASCII码9（制表符）和10（换行符）。

解决方案 #

如果需要让两者内容一致，有两种思路：

1. 标准化JS字符串，将所有空白字符替换为单个空格：

const text2Normalized = text2.replace(/\s+/g, ' ');
console.log(text.localeCompare(text2Normalized)); // 返回0，说明相等

2. 如果想让getAttribute获取原始的空白字符，可以在HTML属性中使用字符实体表示制表符和换行：

<div name="other" txt="text&#9;test&#10;parse&#9;new&#10;line">test</div>

此时通过getAttribute拿到的内容就会和JS里的text2一致。

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