如何在contenteditable可编辑div中实现用户输入单词自动包裹指定class的div

核心问题根因 #

你当前的代码存在4个关键问题导致无法生成独立的单词块：

• 变量名不统一：开头定义的编辑器变量为editorElement，但处理函数内全部调用未定义的editor变量，逻辑运行异常
• 未阻止空格默认行为：按空格触发逻辑时，浏览器会默认将空格插入到当前聚焦的节点内部，导致后续输入的内容始终和前序内容归为同一个文本节点
• 无后续内容承载节点：生成div.word后没有预留独立的空文本节点，后续输入的内容会被直接追加到最后一个div.word内部，无法拆分
• 光标定位逻辑不符合DOM规范：原有光标定位参数错误，无法正确把光标放到可输入的空白位置

修复后完整代码 #

<div id="editor" contenteditable></div>

#editor {
  border: 1px solid #333;
  padding: 10px;
}
#editor .word {
  background: yellow;
  display: inline-block;
  margin-right: 4px; /* 可选：增加单词块间距，优化显示效果 */
}

const editor = document.getElementById('editor');

function handleSpacebarPress(e) {
  // 阻止浏览器默认插入空格的行为
  e.preventDefault();
  
  // 获取所有编辑器子节点
  let editorChildNodes = [...editor.childNodes];
  // 清空编辑器
  editor.innerHTML = '';
  
  editorChildNodes.forEach(node => {
    if (node.nodeType === 3) {
      // 跳过空文本节点，避免生成空白单词块
      const textContent = node.textContent.trim();
      if (!textContent) return;
      // 生成单词块
      const wordDiv = document.createElement('div');
      wordDiv.className = 'word';
      wordDiv.textContent = textContent;
      editor.appendChild(wordDiv);
    } else {
      // 已经是单词块的节点直接保留，不会拆分内部内容，满足特殊限制
      editor.appendChild(node);
    }
  });
  
  // 追加空文本节点，承载后续新输入的内容
  const emptyTextNode = document.createTextNode('');
  editor.appendChild(emptyTextNode);
  
  // 把光标定位到空文本节点末尾，不影响后续输入
  const range = document.createRange();
  const selection = window.getSelection();
  range.setStart(emptyTextNode, 0);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

editor.addEventListener('keydown', e => {
  if (e.code === 'Space') {
    handleSpacebarPress(e);
  }
});

修复后的逻辑完全符合要求：已存在的div.word块不会被修改拆分，用户每按一次空格，就会将之前输入的未被包裹的文本打包为独立的div.word节点。

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