React富文本编辑器：如何用Range获取选中的HTML内容？

要实现多段选中内容的HTML提取，核心是利用原生Range API结合临时DOM容器来克隆并获取选中内容的结构，以下是具体实现方案：

核心思路 #

Range本身没有直接返回HTML的方法，但可以通过cloneContents()将选中的节点（包括多段文本对应的标签）克隆到临时容器中，再从容器的innerHTML属性拿到完整的HTML结构。

React组件内的实现示例 #

import { useRef, useEffect } from 'react';

const RichTextEditor = () => {
  const editorRef = useRef(null);

  const getSelectedHtml = () => {
    const selection = window.getSelection();
    // 无选中内容时直接返回
    if (!selection || selection.rangeCount === 0) return '';

    let selectedHtml = '';
    // 处理多Range场景（非连续选中）
    for (let i = 0; i < selection.rangeCount; i++) {
      const range = selection.getRangeAt(i);
      const tempContainer = document.createElement('div');
      // 克隆选中内容到临时容器
      tempContainer.appendChild(range.cloneContents());
      selectedHtml += tempContainer.innerHTML;
      // 清理临时元素
      tempContainer.remove();
    }

    return selectedHtml;
  };

  const handleSelectionChange = () => {
    const html = getSelectedHtml();
    // 这里可以将html存入状态或进行后续处理
    console.log('选中的HTML内容:', html);
  };

  useEffect(() => {
    const editor = editorRef.current;
    if (!editor) return;

    // 绑定选中相关事件
    const events = ['mouseup', 'selectionchange'];
    events.forEach(evt => editor.addEventListener(evt, handleSelectionChange));

    return () => {
      events.forEach(evt => editor.removeEventListener(evt, handleSelectionChange));
    };
  }, []);

  return (
    <div
      ref={editorRef}
      contentEditable
      style={{ 
        border: '1px solid #eee', 
        padding: '12px', 
        minHeight: '250px',
        fontSize: '14px'
      }}
      placeholder="输入或选中文本..."
    />
  );
};

export default RichTextEditor;

关键细节说明 #

• 连续/非连续选中兼容：通过遍历selection.rangeCount处理按住Ctrl多选的场景，拼接多个Range的HTML内容
• 临时容器处理：临时div仅在内存中操作，无需挂载到DOM树，避免页面渲染干扰
• 事件监听：同时绑定mouseup和selectionchange事件，覆盖鼠标选中、键盘选中等多种交互场景
• 结构保留：cloneContents()会完整复制选中内容的标签层级（比如p、div、span等），确保多段文本的HTML结构准确

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