📖 浏览器 Selection API 详解

Selection API 是现代浏览器提供的一套强大接口，允许开发者获取和操作用户在网页上选中的文本。 通过 window.getSelection() 方法，你可以轻松获取用户当前选中的内容、判断选择范围、甚至通过编程方式设置选区。

这个 API 在富文本编辑器、文本标注工具、划词翻译、在线笔记等场景中有着广泛的应用。 它不仅仅能获取纯文本，还能获取选中内容所在的 DOM 节点信息，以及精确的像素坐标位置。

🔍 核心概念

每个 Selection 对象都包含以下几个关键属性：

• anchorNode / anchorOffset — 选择起始点的 DOM 节点和偏移量
• focusNode / focusOffset — 选择结束点的 DOM 节点和偏移量
• isCollapsed — 判断选择是否折叠（即光标位置，无实际选中内容）
• rangeCount — 当前选区包含的 Range 对象数量
• type — 选区类型：None、Caret 或 Range

📐 位置信息获取

通过 range.getBoundingClientRect() 可以获取选中文本相对于浏览器视口的精确位置， 返回包含 top、left、right、bottom、width、height 的 DOMRect 对象。 如果选中文本跨越多行，range.getClientRects() 会返回每一行对应的矩形列表。

💻 代码示例

// 获取当前选中的文本
const selection = window.getSelection();
if (!selection.isCollapsed) {
  const text = selection.toString();
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  console.log('选中文本:', text);
  console.log('位置:', rect.top, rect.left);
  console.log('宽度:', rect.width, '高度:', rect.height);
}

👆 在上方文本区域中拖拽选择任意文本，右侧面板将实时展示详细的 Selection API 数据。试试跨段落选择，观察位置信息的变化吧！