Web 文本高亮技术解析：Range API 与智能高亮策略

前言

在现代 Web 应用中，文本高亮功能已成为提升用户体验的重要特性。无论是在线阅读器、文档编辑器，还是浏览器扩展，高亮功能都扮演着重要角色。本文将深入探讨基于 Range API 的文本高亮技术实现，以及如何设计智能的高亮策略来处理复杂的 DOM 结构场景。

核心技术：Range API

什么是 Range API

Range API 是 Web 标准中用于表示文档片段的接口，它可以精确定位和操作 DOM 中的任意文本区域。与简单的文本选择不同，Range 提供了更精细的控制能力。

// 获取用户选择的文本范围
const selection = window.getSelection()
if (!selection.isCollapsed) {
  const range = selection.getRangeAt(0)
  const selectedText = range.toString()
}

Range 的关键属性

startContainer/endContainer: 起始和结束容器节点
startOffset/endOffset: 在容器中的偏移位置
commonAncestorContainer: 包含整个范围的最小公共祖先

高亮实现策略

1. 单元素高亮处理

当选择的文本完全位于单个 DOM 元素内时，实现相对简单：

const createSingleElementHighlight = (range, text) => {
  const span = document.createElement('span')
  span.style.backgroundColor = highlightColor
  span.className = 'web-highlighter-mark'
  span.setAttribute('data-highlighter', 'true')
  
  // 使用 surroundContents 包裹选中内容
  range.surroundContents(span)
}

优势:

实现简单直接
DOM 结构变化最小
性能开销低

限制:

只能处理单一元素内的选择
无法跨越不同的 HTML 标签

2. 跨元素分段高亮

当用户选择跨越多个 DOM 元素的文本时，需要采用分段策略：

const createSegmentedHighlight = (range, text) => {
  const highlightId = `highlight_${Date.now()}`
  const segments = []
  
  // 使用 TreeWalker 遍历范围内的文本节点
  const walker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: function(node) {
        return range.intersectsNode(node) ? 
          NodeFilter.FILTER_ACCEPT : 
          NodeFilter.FILTER_REJECT
      }
    }
  )
  
  // 为每个文本节点片段创建独立的高亮
  let currentNode = walker.nextNode()
  while (currentNode) {
    // 创建当前文本节点的高亮片段
    createSegmentForTextNode(currentNode, range, highlightId)
    currentNode = walker.nextNode()
  }
}

核心思想:

将跨元素选择分解为多个单元素片段
每个片段独立高亮，但共享同一个逻辑 ID
保持原有 DOM 结构的语义完整性

3. 冲突检测与处理

高亮功能的一个关键挑战是处理重叠或嵌套的高亮场景：

const checkHighlightConflicts = (range) => {
  // 检查选择范围内是否已包含高亮元素
  const container = range.commonAncestorContainer instanceof Element 
    ? range.commonAncestorContainer 
    : range.commonAncestorContainer.parentElement
  
  const existingHighlights = container.querySelectorAll('[data-highlighter="true"]')
  
  for (const highlight of existingHighlights) {
    if (range.intersectsNode(highlight)) {
      return {
        hasConflict: true,
        reason: '选择范围与现有高亮重叠'
      }
    }
  }
  
  // 检查是否在现有高亮内部选择
  let currentNode = range.startContainer
  while (currentNode && currentNode !== document.body) {
    if (currentNode.hasAttribute?.('data-highlighter')) {
      return {
        hasConflict: true,
        reason: '选择范围在现有高亮内部'
      }
    }
    currentNode = currentNode.parentNode
  }
  
  return { hasConflict: false }
}

冲突场景分类:

重叠冲突: 新选择与已有高亮部分重叠
嵌套冲突: 在已有高亮内部进行新选择
包含冲突: 新选择完全包含已有高亮

扩展应用场景

1. 协作高亮

在多用户协作场景中，需要考虑：

实时同步机制
冲突解决策略
权限管理

2. 智能批注

结合 AI 技术，可以实现：

自动关键词高亮
语义相关内容推荐
智能摘要生成

3. 跨页面持久化

通过浏览器扩展技术：

将高亮数据存储到本地或云端
跨站点的统一高亮管理
导出和分享功能

结语

Web 文本高亮技术看似简单，实则涉及了 DOM 操作、事件处理、状态管理等多个技术层面。通过合理运用 Range API 和智能的策略设计，我们可以构建出既功能强大又用户体验良好的高亮系统。

随着 Web 技术的不断发展，文本高亮功能还将在更多场景中发挥重要作用。掌握这些核心技术，将为我们在构建下一代 Web 应用时提供坚实的技术基础。

参考资源: