个人技术笔记

浏览器原生能力

浏览器里的文本选区，究竟怎样被代码读取？

拖动鼠标选中一段文字时，浏览器已经为你创建了 Selection 和 Range 对象。它们能告诉程序选中了什么、从哪里开始，并允许你据此复制、标注或生成上下文操作。

两个对象，各管一件事

Selection

浏览器当前的整体选区。通过 window.getSelection() 取得。

Range

选区中的一段连续范围，含起止节点和偏移位置；用 getRangeAt(0) 读取。

一般先拿到 Selection，确认 rangeCount 大于零，再取第一个 Range。随后可以用 toString() 读取文字，用 cloneContents() 复制选中片段，或用 getBoundingClientRect() 定位浮动工具条。

现在试着选中下面的一段文字

实时选区结果等待选择

选中文本并不需要额外的编辑器。浏览器会维护用户正在选择的范围，网页只需监听 selectionchange 事件，再从 window.getSelection() 读取它。选择跨行内容也没有关系，Range 仍然记录着准确的开始与结束位置。

还没有选中这段说明中的文字。

最小可用代码

使用 selectionchange 时应先确认选区是否属于你的目标内容，避免把页面其它位置的选择也当成业务输入。

const source = document.querySelector('#selection-source');

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const range = selection.rangeCount ? selection.getRangeAt(0) : null;

  if (!range || !source.contains(range.commonAncestorContainer)) return;

  console.log(selection.toString().trim());
  console.log(range.getBoundingClientRect());
});

如果需要主动取消选择，可调用 window.getSelection().removeAllRanges()；如果需要程序化选中节点，则新建 document.createRange()，设置边界后以 selection.addRange(range) 加回浏览器选区。