如何使用JS/React选取HTML内文本并实现持久化高亮

核心思路不要走HTML字符串正则替换的歪路——HTML标签会打断文本计数，遇到跨标签选中、重复文本的场景必出bug。直接基于浏览器原生Range API，以渲染后容器的纯文本全局偏移量作为存储标识，分选中存储、回显渲染两步实现即可。 #

核心依赖API说明 #

• 选中内容获取：window.getSelection() 可直接拿到当前用户选中内容的Range对象
• 偏移量计算：通过Range的toString()方法累加纯文本长度，自动跳过所有HTML标签干扰
• 节点遍历：document.createTreeWalker 只遍历容器内的文本节点，精准定位偏移量对应的DOM位置

1. 选中文本存储逻辑（React示例） #

给渲染HTML的容器绑定鼠标抬起事件，触发时计算选中内容的全局偏移，存储到数据库即可：

import { useRef, useEffect, useState } from 'react';

const HtmlHighlightViewer = ({ rawHtml, savedHighlights = [] }) => {
  const renderContainer = useRef(null);
  // 高亮数据统一结构：{ id: string, start: number, end: number, content: string }
  const [highlightList, setHighlightList] = useState(savedHighlights);

  // 监听用户选中文本操作
  const handleTextSelect = () => {
    const selection = window.getSelection();
    // 无有效选中直接返回
    if (!selection.rangeCount || selection.isCollapsed) return;

    const selectedRange = selection.getRangeAt(0);
    const container = renderContainer.current;
    // 选中内容不在当前容器内直接返回
    if (!container.contains(selectedRange.commonAncestorContainer)) return;

    // 计算选中文本在容器纯文本中的全局起始偏移
    const prefixRange = document.createRange();
    prefixRange.selectNodeContents(container);
    prefixRange.setEnd(selectedRange.startContainer, selectedRange.startOffset);
    const startOffset = prefixRange.toString().length;
    const endOffset = startOffset + selectedRange.toString().length;
    const selectedText = selectedRange.toString();

    // 此处调用接口将高亮数据存入数据库
    const newHighlight = {
      id: `${Date.now()}`,
      start: startOffset,
      end: endOffset,
      content: selectedText
    };
    setHighlightList(prev => [...prev, newHighlight]);
    // 清空选中态
    selection.removeAllRanges();
  };

  return (
    <div
      ref={renderContainer}
      onMouseUp={handleTextSelect}
      dangerouslySetInnerHTML={{ __html: rawHtml }}
      className="html-content-wrap"
    />
  );
};

2. 高亮回显渲染逻辑 #

页面加载、拿到数据库存储的高亮数据后，遍历文本节点定位偏移位置，包裹高亮标签：

// 接上述组件，新增高亮渲染副作用
useEffect(() => {
  const container = renderContainer.current;
  if (!container || !highlightList.length) return;

  // 先清除旧的高亮标记，避免重复包裹导致偏移错乱
  container.querySelectorAll('.hl-mark').forEach(markEl => {
    const parent = markEl.parentNode;
    parent.replaceChild(document.createTextNode(markEl.textContent), markEl);
    parent.normalize(); // 合并相邻文本节点，保证偏移计算准确
  });

  // 工具方法：根据全局偏移量找到对应的文本节点、节点内偏移
  const findNodeByOffset = (targetOffset) => {
    let accumulatedLen = 0;
    // 只遍历文本节点，自动忽略所有HTML标签
    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
    let currentTextNode = walker.nextNode();

    while (currentTextNode) {
      const nodeLen = currentTextNode.textContent.length;
      if (accumulatedLen + nodeLen >= targetOffset) {
        return {
          node: currentTextNode,
          innerOffset: targetOffset - accumulatedLen
        };
      }
      accumulatedLen += nodeLen;
      currentTextNode = walker.nextNode();
    }
    return null;
  };

  // 逐个渲染高亮
  highlightList.forEach(hlItem => {
    const startPos = findNodeByOffset(hlItem.start);
    const endPos = findNodeByOffset(hlItem.end);
    if (!startPos || !endPos) return;

    // 校验文本是否匹配，避免原内容修改后错位
    const checkRange = document.createRange();
    checkRange.setStart(startPos.node, startPos.innerOffset);
    checkRange.setEnd(endPos.node, endPos.innerOffset);
    if (checkRange.toString() !== hlItem.content) return;

    const hlRange = document.createRange();
    hlRange.setStart(startPos.node, startPos.innerOffset);
    hlRange.setEnd(endPos.node, endPos.innerOffset);

    // 创建高亮标签
    const markEl = document.createElement('span');
    markEl.className = 'hl-mark';
    markEl.dataset.hlId = hlItem.id;

    // 普通单节点内选中直接包裹
    try {
      hlRange.surroundContents(markEl);
    } catch (err) {
      // 跨块级标签选中的场景，用内容提取的方式包裹，避免DOM层级报错
      const fragment = hlRange.extractContents();
      markEl.appendChild(fragment);
      hlRange.insertNode(markEl);
    }
  });

}, [rawHtml, highlightList]);

配套样式 #

.html-content-wrap {
  line-height: 1.6;
  font-size: 14px;
}
.hl-mark {
  background-color: #fff3cd;
  padding: 0 2px;
  border-radius: 2px;
  cursor: pointer;
}
.hl-mark:hover {
  background-color: #ffecb5;
}

踩坑提示 #

• 存储时一定要把选中的文本内容一起存，回显时先做文本匹配校验，原HTML内容更新后可以直接跳过错位的高亮，避免标错位置
• 每次重新渲染高亮前必须清理旧标记、合并文本节点，否则多次操作后DOM结构被拆分，偏移量计算会完全失效
• 不要用全局的文本偏移做计算，一定要限定在渲染HTML的容器范围内，避免页面其他文本内容干扰偏移结果
• 跨标签高亮如果出现样式断裂，给.hl-mark加上display: inline即可

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