document.execCommand('insertHTML')高亮搜索词的非预期样式异常

核心机制误区 #

很多开发者误以为document.execCommand('insertHTML')会把传入的HTML字符串原封不动插入到页面里，这是完全的误解。在designMode开启的富文本编辑上下文里，这个命令走的是和浏览器内置「富文本粘贴」完全一致的处理管线，根本不是原生DOM操作。
浏览器自带的富文本引擎会自动对插入的内容做属性清洗、样式校正，从来不会100%信任传进去的HTML结构。

异常触发的具体逻辑 #

之所以只有段落开头的那个匹配项出问题，是因为刚好命中了富文本引擎的两个特殊判断分支：

• 当选中文本位于块级段落的最起始位置时，引擎会强制把当前位置继承到的字体计算值，转换成font-size内联样式写到新生成的span节点上——观察到的14.6667px就是原段落元素的计算字体大小，和自定义类没有任何关系。
• 同一个场景下，引擎会直接丢弃传入的class属性，把所有上下文继承来的样式全部以内联形式挂到节点上。
  • 丢失的cursor: pointer属性就是因为这个原因：内联样式的优先级比外部CSS类更高，而浏览器自动生成的内联样式里根本没写cursor属性，自然就把类原本定义的效果覆盖没了。

为什么其他位置的匹配项正常 #

当匹配的文本不在块级段落的开头位置时，浏览器会跳过开头位置的强制样式继承分支，会忠实保留传入HTML里的class属性，不会硬把计算样式转成内联值写上去，所以这部分的高亮效果完全符合预设的逻辑预期。

补充：这个行为是从IE时代就延续下来的富文本编辑默认规则，和document.execCommand是否被废弃没有直接关系——哪怕这个接口没有被标记为废弃，这套样式校正的逻辑也从来没变过。

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