Range 对象操作工具

什么是 Range 对象？

Range 对象是 DOM API 中的一个重要接口，用于表示文档中的一个连续区域。它可以包含文本节点、元素节点或两者的组合。Range 对象提供了强大的文档操作能力，是现代 Web 开发中处理文本选择和内容操作的核心工具。

Range 对象的主要特性

• 边界定义：通过起始点和结束点定义一个连续的文档区域
• 内容操作：可以提取、删除、插入或替换 Range 内的内容
• 节点遍历：能够遍历 Range 内包含的所有 DOM 节点
• 文档片段：可以创建包含 Range 内容的文档片段

创建 Range 对象的方法

1. 使用 document.createRange()

// 创建一个新的空 Range
const range = document.createRange();

// 设置 Range 的起始和结束位置
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

2. 从用户选择获取

// 获取用户当前选择的 Range
const selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
}

Range 对象的常用方法

• setStart(node, offset) - 设置 Range 的起始位置
• setEnd(node, offset) - 设置 Range 的结束位置
• selectNode(node) - 选择整个节点
• selectNodeContents(node) - 选择节点的内容
• cloneContents() - 克隆 Range 内容为文档片段
• extractContents() - 提取并移除 Range 内容
• deleteContents() - 删除 Range 内容
• insertNode(node) - 在 Range 起始位置插入节点

Range 对象的应用场景

• 文本编辑器：实现文本选择、格式化、插入等功能
• 内容提取：从网页中提取特定区域的内容
• 搜索高亮：高亮显示搜索结果
• 拖拽操作：实现文本或元素的拖拽功能
• 复制粘贴：处理剪贴板操作
• 注释系统：为文档添加注释或标记

Range 对象的重要属性

• collapsed - 布尔值，表示 Range 是否折叠（起始点和结束点相同）
• startContainer - Range 起始位置的容器节点
• endContainer - Range 结束位置的容器节点
• startOffset - 在起始容器中的偏移量
• endOffset - 在结束容器中的偏移量
• commonAncestorContainer - 包含整个 Range 的最近公共祖先节点

实际应用示例

// 高亮搜索结果
function highlightSearchTerm(searchTerm) {
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT
  );

  let node;
  while (node = walker.nextNode()) {
    const text = node.textContent;
    if (text) {
      const index = text.indexOf(searchTerm);

      if (index !== -1) {
        const range = document.createRange();
        range.setStart(node, index);
        range.setEnd(node, index + searchTerm.length);

        const span = document.createElement('span');
        span.className = 'highlight';
        range.surroundContents(span);
      }
    }
  }
}

注意事项

• Range 对象在 DOM 结构发生变化时可能失效
• 跨框架（iframe）的 Range 操作需要特殊处理
• 某些操作可能会影响用户的当前选择状态
• 在移动设备上，Range 操作的行为可能与桌面端不同