Angular contenteditable拆分单词为独立span及渲染重复问题

现有代码出现重复渲染的核心原因有三点：

• 直接手动修改了contenteditable容器内与Angular绑定关联的DOM节点，Angular变更检测无法感知你对DOM的手动修改，更新*ngFor对应的数组时，不会清理你手动改动过的旧节点，最终新旧DOM同时存在导致内容重复。
• 遍历getElementsByTagName返回的HTMLCollection时直接修改当前节点内容，这个集合是动态实时更新的，DOM改动会直接改变集合长度和顺序，导致遍历逻辑出现漏项、重复项。
• 直接通过document.getElementById操作DOM不符合Angular的设计规范，极易和框架的DOM渲染流程产生冲突。

核心原则：拆分单词时只读取容器内的文本内容，绝对不要手动修改容器内的现有DOM，所有DOM更新完全交给Angular基于绑定数组完成。
另外注意：contenteditable的div不是原生表单元素，Angular不会自动同步用户输入的内容到绑定变量，不需要在输入过程中实时处理DOM，在输入失焦或输入停顿时统一拆分即可，避免光标频繁跳位影响输入体验。

修正后的代码 #

TS部分 #

// 建议绑定到blur事件触发，或加300ms输入防抖后触发，不要在每次input事件时调用
separateSpans(index: number) {
  const container = document.getElementById(`data-section${index}`)!;
  // 直接读取容器纯文本，忽略浏览器自动生成的冗余嵌套标签，避免干扰拆分逻辑
  const fullText = container.innerText.trim();
  // 按空白字符拆分所有单词，过滤空值
  const wordList = fullText.split(/\s+/).filter(word => word.length > 0);
  // 直接更新绑定数组，全程不手动修改容器内的DOM节点
  this.captionListData[index].caption = wordList;

  // DOM更新完成后把光标定位到容器末尾，保证输入体验连贯
  setTimeout(() => {
    const updatedContainer = document.getElementById(`data-section${index}`)!;
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(updatedContainer);
    range.collapse(false);
    selection?.removeAllRanges();
    selection?.addRange(range);
    updatedContainer.focus();
  }, 0);
}

// *ngFor追踪函数，避免不必要的DOM重绘
trackByIndex(index: number, item: string): number {
  return index;
}

HTML部分 #

<div 
  contenteditable="true" 
  [id]="'data-section'+i"
  (blur)="separateSpans(i)"
>
  <ng-container *ngFor="let word of captionListData[i].caption; trackBy: trackByIndex; let j = index">
    <span [innerHTML]="word | punctuation" [id]="i + '-' + j"></span>
  </ng-container>
</div>

• 不要在用户每次按键输入时触发拆分逻辑，会导致光标强制跳到末尾，无法在文本中间正常插入内容，用失焦触发或防抖触发体验最佳。
• 如果需要更精细的输入控制，可以监听input事件只做文本同步，等用户停止输入一段时间后再执行拆分重绘。
• 后续操作DOM优先用Angular的@ViewChild获取元素引用，减少直接操作document带来的冲突风险。

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