使用span元素包裹MutationObserver目标文本节点的实现问题排查

• 节点插入逻辑顺序错误：执行newNode.appendChild(mutation.target)时，DOM节点会被直接移动到新span下，原父节点parentNode中已经不存在mutation.target这个文本节点。后续调用parentNode.insertBefore(newNode, mutation.target)时，参考节点不属于当前父节点，会导致span被错误插入到父节点末尾，而非原文本节点的位置。
• 缺少重复包裹判断：文本被包裹进高亮span后，后续再次触发文本变更时，逻辑会重复创建新的span嵌套包裹文本节点，最终导致DOM结构冗余甚至触发无限回调。
• 未适配富文本编辑器的DOM校验逻辑：多数富文本编辑器会自带DOM清洗规则，直接原生插入的span很容易被编辑器过滤清除。

首先定义高亮样式：

.change-highlighter {
  background: #fff1a8;
  padding: 0 2px;
  border-radius: 2px;
}

修复后的回调逻辑：

// MutationObserver初始化配置参考，必须开启characterData和subtree才能捕获子级文本节点的变更
// const observer = new MutationObserver(callback);
// observer.observe(richTextEditor, {
//   characterData: true,
//   subtree: true
// });

function callback(mutations) {
  mutations.forEach(function(mutation){
    if(mutation.type === 'characterData'){
      const textNode = mutation.target;
      const parent = textNode.parentElement;

      // 已经被高亮span包裹的节点直接跳过，避免重复嵌套
      if (parent.classList.contains('change-highlighter')) return;

      // 提前保存原文本节点的位置参考，节点移动后参考值不受影响
      const insertAnchor = textNode.nextSibling;

      // 创建高亮容器
      const highlightSpan = document.createElement("span");
      highlightSpan.classList.add('change-highlighter');

      // 将变更的文本节点移入高亮容器
      highlightSpan.appendChild(textNode);

      // 将高亮容器插回原文本节点所在位置
      parent.insertBefore(highlightSpan, insertAnchor);         
    }
  });
}

• 如果使用的是封装好的第三方富文本编辑器（比如Quill、TinyMCE等），不建议直接原生操作DOM插入标签，优先使用编辑器提供的自定义标记/内联样式API实现高亮，避免被编辑器的DOM清洗逻辑清除。
• 若Observer同时开启了childList监听，需要新增判断跳过自身插入的span节点，防止触发无限循环回调。
• 连续输入产生的相邻高亮span可以做节点合并，减少冗余DOM结构。

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