如何阻止contenteditable容器中span元素自动扩展范围？

兄弟，这个坑我做富文本编辑器的时候踩过好几次！你猜的没错，问题出在光标位置上：

当你把$pi替换成<span style="color:red">π</span>之后，浏览器默认会把光标留在这个<span>元素的内部（刚好在π的后面）。而contenteditable有个“跟随父元素样式”的特性——光标所在的父元素是什么样式，后续输入的内容就会自动继承这个样式，被包裹在同一个<span>里，所以新输入的文本自然就变成红色了。

核心思路很简单：在完成符号替换的瞬间，把光标从<span>内部移到它的外部后方，这样后续输入的内容就会回到默认的文本节点中，不会继承红色样式。

这里用浏览器原生的Range和Selection API就能实现，给你改好的代码示例：

const editable = document.querySelector('[contenteditable]');
editable.addEventListener('input', (e) => {
  // 先临时保存当前光标位置（避免替换DOM后光标乱跑）
  const selection = window.getSelection();
  let savedRange = null;
  if (selection.rangeCount > 0) {
    savedRange = selection.getRangeAt(0);
  }

  // 替换特殊符号，给span加个类方便后续定位
  const content = editable.innerHTML;
  const newContent = content.replace(/\$pi/g, '<span class="math-symbol" style="color:red">π</span>')
                            .replace(/\$delta/g, '<span class="math-symbol" style="color:red">∆</span>');
  
  // 更新DOM
  editable.innerHTML = newContent;

  // 重置光标到最后一个符号的后面
  setTimeout(() => { // 用setTimeout确保DOM更新完成后再操作光标
    if (!savedRange) return;
    
    const lastSymbol = editable.querySelector('.math-symbol:last-child');
    if (lastSymbol) {
      const newRange = document.createRange();
      newRange.setStartAfter(lastSymbol);
      newRange.setEndAfter(lastSymbol);
      
      selection.removeAllRanges();
      selection.addRange(newRange);
    }
  }, 0);
});

1. 避免重复替换：上面的代码每次input都会全局替换，可能会把已经处理好的π又重新包裹一遍。可以改成只检测刚输入的内容，比如用e.data或者监听键盘事件，只在输入完$pi的瞬间触发替换。
2. 样式解耦：把span的样式写到CSS类里，不要内联样式，方便后续统一修改：

.math-symbol {
  color: red;
  /* 还可以加其他样式，比如字体大小、间距 */
}

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