为何‌被转为 ？DOM导出内容异常求助

问题原因 #

浏览器在解析并序列化DOM内容时，会对不可见字符进行自动处理。你插入的‌会先被解析为对应的Unicode字符（U+200C 零宽非断空格），但当你从DOM导出HTML（比如用innerHTML）时，浏览器的HTML序列化引擎可能会将这个不可见字符替换为 （U+00A0 非断空格）——这通常是因为部分渲染引擎对这类不可见控制字符的处理策略，尤其是在contenteditable这类编辑场景下，浏览器会自动调整字符以保证渲染稳定性。

而控制台显示的是原始字符串，没有经过DOM序列化的二次处理，所以看起来是正确的。

解决方案 #

这里有几个可行的处理方案：

1. 直接使用Unicode字符代替HTML实体
   不要插入‌实体，而是直接插入对应的Unicode字符\u200C。这样浏览器解析后会保留原始字符，导出DOM时也不会被替换：

   // 示例：直接插入Unicode零宽非断空格
   const preheaderText = "你的预览文本" + "\u200C".repeat(100);
   

2. 导出时手动替换回目标实体
   如果你必须保留HTML实体的形式，在获取DOM的HTML内容后，手动将被替换的 （或对应的Unicode字符\u00A0）替换回‌：

   const exportedHtml = document.getElementById("preheader").innerHTML;
   // 替换所有非断空格为zwnj实体
   const fixedHtml = exportedHtml.replace(/ /g, "‌");
   // 或者针对Unicode字符替换
   const fixedHtml2 = exportedHtml.replace(/\u00A0/g, "\u200C");
   

3. 避免DOM自动序列化，手动构建HTML
   不依赖DOM的innerHTML导出，而是直接基于原始文本构建HTML字符串，跳过浏览器的自动编码步骤：

   const preheaderContent = "你的预览文本";
   // 手动拼接zwnj实体
   const preheaderHtml = `<div>${preheaderContent}${"&zwnj;".repeat(100)}</div>`;
   

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