如何获取ContentEditable跨标签选中内容并添加类名？

1. 正确获取选中的完整内容 #

window.getSelection()返回的是Selection对象，仅用toString()只能拿到纯文本，若要获取完整的选中节点或HTML结构，需操作其包含的Range对象：

获取选中的全部纯文本 #

遍历所有选中范围拼接文本，确保跨节点也能完整获取：

function getSelectedText() {
  const selection = window.getSelection();
  let text = '';
  for (let i = 0; i < selection.rangeCount; i++) {
    text += selection.getRangeAt(i).toString();
  }
  return text;
}

获取选中内容的HTML结构 #

通过Range.cloneContents()复制选中内容，再转为HTML：

function getSelectedHTML() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return '';
  const range = selection.getRangeAt(0);
  const wrapper = document.createElement('div');
  wrapper.appendChild(range.cloneContents());
  return wrapper.innerHTML;
}

获取选中的所有DOM节点 #

遍历选中范围覆盖的所有节点：

function getSelectedNodes() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return [];
  const range = selection.getRangeAt(0);
  const nodes = [];
  let currentNode = range.startContainer;

  while (currentNode && currentNode !== range.endContainer.nextSibling) {
    if (range.intersectsNode(currentNode)) {
      nodes.push(currentNode);
    }
    currentNode = currentNode.nextSibling || currentNode.parentNode.nextSibling;
  }
  return nodes;
}

2. 给选中内容添加类名 #

核心是用带类名的元素包裹选中内容，兼容跨节点场景：

document.querySelector("#ce").addEventListener("mouseup", () => {
  addClassToSelection('your-target-class');
});

function addClassToSelection(className) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);
    const wrapEl = document.createElement('span');
    wrapEl.className = className;

    // 处理单个文本节点的情况
    if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer === range.endContainer) {
      range.surroundContents(wrapEl);
    } else {
      // 处理跨节点情况：提取内容后包裹再插入
      const fragment = range.extractContents();
      wrapEl.appendChild(fragment);
      range.insertNode(wrapEl);
    }

    // 可选：恢复选中状态，避免添加类后选中消失
    const newRange = document.createRange();
    newRange.selectNodeContents(wrapEl);
    selection.removeAllRanges();
    selection.addRange(newRange);
  }
}

注意事项 #

• 确保目标元素设置contenteditable="true"，比如：<div id="ce" contenteditable="true"></div>
• 若需避免重复嵌套同一类名，可在添加前检查选中内容的父节点是否已包含该类
• 复杂嵌套节点场景需额外处理，但上述代码可覆盖大多数常规使用场景

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