如何使用innerHTML正确添加img元素 为何外观相同的字符串全等不成立

问题原因 #

你遇到的问题本质是不可见特殊字符导致的编码差异：

• 第一个变量html里，<img和src之间、src和alt等属性之间的空格不是普通空格（Unicode U+0020），而是非中断空格（Unicode U+00A0，也就是常说的 ）。
• 非中断空格视觉上和普通空格完全一致，但属于不同字符，所以两个字符串做相等比较返回false。
• 浏览器解析HTML标签时，只有普通空格会被识别为属性分隔符，非中断空格会被当成标签名/属性名的一部分，导致第一个img的属性无法被正常识别，所以渲染失败。

解决方法 #

直接把字符串中的所有非中断空格替换为普通空格即可，不需要额外转义：

// 替换所有非中断空格为普通空格
const normalizedHtml = html.replace(/\u00A0/g, ' ');
console.log(normalizedHtml === htmlAux); // 输出true
div.innerHTML = normalizedHtml + htmlAux; // 所有img均可正常渲染

如果需要从源头避免这类问题：

• 从其他页面/文档复制HTML内容时，优先使用纯文本粘贴，避免带格式的内容插入特殊空格
• 如果字符串是从接口/文件读取的，在使用前统一做一次特殊空白符的归一化处理即可。

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