JavaScript 选择（Selection）和范围（Range）

在 JavaScript 中，Selection 和 Range 是处理文档中选择内容的两个重要 API，常用于富文本编辑器、文本处理等场景。

Range（范围）

Range 表示文档中的一个连续范围，可以包含节点和部分文本节点。

创建 Range

const range = document.createRange();

Range 常用方法

// 设置范围起始点
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

// 选择节点内容
range.selectNode(node);           // 选择整个节点
range.selectNodeContents(node);   // 选择节点内容（不包含节点本身）

// 折叠范围
range.collapse(true);  // 折叠到起点
range.collapse(false); // 折叠到终点

// 删除范围内容
range.deleteContents();

// 提取范围内容为文档片段
const fragment = range.extractContents();

// 插入节点到范围
range.insertNode(newNode);

Range 属性

range.startContainer;  // 起始节点
range.startOffset;     // 起始偏移量
range.endContainer;    // 结束节点
range.endOffset;       // 结束偏移量
range.collapsed;       // 是否折叠
range.commonAncestorContainer; // 共同祖先节点

Selection（选择）

Selection 表示用户当前选择的文本范围或多个范围（Firefox 支持多选）。

获取当前选择

const selection = window.getSelection();

Selection 常用方法

// 添加范围
selection.addRange(range);

// 移除所有范围
selection.removeAllRanges();

// 移除单个范围
selection.removeRange(range);

// 清除选择
selection.empty();

// 选择节点内容
selection.selectAllChildren(node);

// 扩展选择
selection.extend(node, offset);

Selection 属性

selection.anchorNode;      // 锚点节点
selection.anchorOffset;    // 锚点偏移量
selection.focusNode;       // 焦点节点
selection.focusOffset;     // 焦点偏移量
selection.isCollapsed;     // 是否折叠
selection.rangeCount;      // 范围数量

实际应用示例

获取选中文本

function getSelectedText() {
  return window.getSelection().toString();
}

替换选中文本

function replaceSelectedText(replacement) {
  const selection = window.getSelection();
  if (selection.rangeCount) {
    const range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(document.createTextNode(replacement));
  }
}

在光标位置插入内容

function insertAtCursor(content) {
  const selection = window.getSelection();
  if (selection.rangeCount) {
    const range = selection.getRangeAt(0);
    range.deleteContents();
    const node = typeof content === 'string' 
      ? document.createTextNode(content) 
      : content;
    range.insertNode(node);
    
    // 移动光标到插入内容之后
    range.setStartAfter(node);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

保存和恢复选择

// 保存选择
function saveSelection() {
  const selection = window.getSelection();
  const ranges = [];
  for (let i = 0; i < selection.rangeCount; i++) {
    ranges.push(selection.getRangeAt(i));
  }
  return ranges;
}

// 恢复选择
function restoreSelection(savedRanges) {
  const selection = window.getSelection();
  selection.removeAllRanges();
  savedRanges.forEach(range => {
    selection.addRange(range);
  });
}

注意事项

1. 不同浏览器对 Selection 和 Range 的实现可能有细微差异
2. 在富文本编辑器中使用时，需要考虑跨浏览器兼容性
3. 操作 DOM 时可能会影响现有的选择范围
4. 现代浏览器通常只支持单个选择范围（除 Firefox 外）

这些 API 是构建富文本编辑器和复杂文本处理功能的基础，理解它们对于前端开发非常重要。