最简方式是调用window.getSelection().toString().trim()获取选中文本，需检查rangeCount > 0；位置信息通过getRangeAt(0)获取，监听用selectionchange事件。
Selection API 获取选中文本内容最简方式
直接调用 window.getSelection() 即可拿到当前页面中用户选中的文本，它返回一个 Selection 对象，其 toString() 方法就是纯文本内容。
常见错误是直接打印 selection 对象本身，结果看到空对象或不可读结构——其实得显式转成字符串：
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const text = selection.toString().trim();
console.log(text); // ✅ 正确获取文本
}
-
selection.toString()是最安全的取文本方式，自动合并跨节点、跨段落的选中内容 - 务必检查
selection.rangeCount > 0，否则在无选区时toString()返回空字符串，容易误判为“选了空白” - 移动端 Safari 和部分旧版 Android WebView 中，
selection可能在 input/textarea 聚焦时被重置，需监听selectionchange而非仅靠 click 触发
获取选中位置：用 getRangeAt(0) 提取 DOM 范围
选区位置信息藏在 Selection 的第一个 Range 里（多选区极少用到，rangeCount 基本为 1），调用 selection.getRangeAt(0) 得到 Range 对象，再读它的 startContainer、startOffset 等属性。
注意：startContainer 不一定是元素节点，很可能是文本节点（Node.TEXT_NODE），直接对它调 querySelector 会报错。
立即学习“前端免费学习笔记（深入）”；
-
range.startContainer是选区起点所在的节点（常为#text） -
range.startOffset是起点在该节点内的字符偏移量（对文本节点是字符索引，对元素节点是子节点序号） - 要定位到外层可操作的元素，得用
range.startContainer.parentElement或向上遍历parentNode - 若选区跨多个块级元素（如从
<p></p>拖到下一个<div>），<code>endContainer和startContainer可能不同，需分别处理监听选区变化：别只靠 mouseup，要用 selectionchange 事件
selectionchange是唯一可靠监听选区变更的原生事件，注册在document上即可，比监听mouseup或keyup更准确——比如键盘Shift+→扩展选区、双击词、甚至屏幕阅读器触发的选中，都能捕获。document.addEventListener('selectionchange', () => { const sel = window.getSelection(); if (sel.rangeCount === 0) return; const range = sel.getRangeAt(0); const rect = range.getBoundingClientRect(); // ✅ 快速获取屏幕坐标 console.log(rect.left, rect.top); // 用于浮动工具栏定位 });- 该事件不冒泡，只能绑定在
document或window，绑在具体元素上无效 - 在 iframe 内选中时，需在对应 iframe 的
contentDocument上监听 - 服务端渲染（SSR）场景下，首次 hydration 前 document 可能未就绪，需加
if (typeof document !== 'undefined')守卫
兼容性与边界情况：IE 和富文本编辑器里的坑
IE 10+ 支持
Selection，但 API 不同：用document.selection+createRange()，现代代码应避免降级处理，除非明确需支持 IE。更大的问题是富文本容器（如contenteditable或 ProseMirror、Quill）内部会劫持原生选区，window.getSelection()仍有效，但range.startContainer可能指向编辑器生成的隐藏节点，坐标计算失效。- 在
contenteditable区域内，优先使用编辑器提供的 API（如 Slate 的editor.selection）而非原生 Selection -
getBoundingClientRect()在缩放页面或使用 CSS transform 时可能偏移，需结合window.devicePixelRatio校正 - 选中图片、
<input>或<textarea></textarea>时，rangeCount为 0，此时需单独监听这些元素的select事件
真正难的不是读出文字或坐标，而是判断“这个选区是否来自用户真实意图”——比如光标停在句末自动触发的伪选区、脚本调用
select()产生的临时选区，都得结合事件源和时间戳过滤。 - 该事件不冒泡，只能绑定在
