点击可编辑div内单词为其包裹span标签，代码仅首次生效如何修复

• 首次点击替换后，div内部不再是纯文本节点，新增的<span>会拆分原有的文本节点，原代码默认所有内容都在同一个顶层文本节点中，后续点击时获取的anchorNode可能是span内的文本节点，偏移量计算完全失效
• 直接拼接整个innerHTML重写div内容，会销毁原有所有节点，同时导致光标/选区状态丢失，触发异常
• 边界兼容缺失：位于行首/行尾的单词前后没有空格时，原有循环逻辑会卡死或者计算错误

HTML代码 #

<div contentEditable id='test'></div>

CSS代码 #

#test {
  border: 4px dotted blue;
}
/* 可加span样式方便验证效果，不需要可删除 */
#test span {
  color: red;
  font-weight: bold;
}

JS代码 #

const test = document.getElementById('test');
test.addEventListener('click', play);

function play() {
  const s = window.getSelection();
  if (!s.rangeCount) return;
  let range = s.getRangeAt(0);
  let node = s.anchorNode;

  // 兼容嵌套节点场景，确保操作的是文本节点
  while (node.nodeType !== Node.TEXT_NODE) {
    node = node.firstChild;
  }
  const text = node.textContent;
  let startOffset = range.startOffset;

  // 向前查找单词起始位置
  while (startOffset > 0 && text[startOffset - 1] !== ' ') {
    startOffset--;
  }

  // 向后查找单词结束位置
  let endOffset = range.startOffset;
  while (endOffset < text.length && text[endOffset] !== ' ') {
    endOffset++;
  }

  // 选中完整单词
  range.setStart(node, startOffset);
  range.setEnd(node, endOffset);
  const word = range.toString().trim();
  if (!word) return;

  // 避免重复包裹span
  if (node.parentElement.tagName === 'SPAN') return;

  // 仅替换当前选中单词的节点，不修改整个div内容
  const span = document.createElement('span');
  // 如果需要span内部前后带空格，把下一行改为 span.textContent = ` ${word} `
  span.textContent = word;
  range.deleteContents();
  range.insertNode(span);

  // 清空选区避免影响后续操作
  s.removeAllRanges();
}

• 新增节点类型判断，兼容div内存在多个子元素的场景
• 放弃全量重写innerHTML，仅操作当前选中单词对应的节点，不会破坏原有内容结构
• 新增重复包裹校验，已经被span包裹的单词不会重复套标签
• 优化单词边界计算逻辑，兼容行首、行尾无空格的场景
• 改用事件监听绑定点击事件，避免行内事件绑定的上下文异常问题

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