可通过 window.getselection().tostring() 获取用户选中的纯文本,推荐监听 mouseup 或 selectionchange 事件触发;跨元素选择仍返回纯文本,需结构化内容时可遍历 range 处理;旧版 ie 兼容已基本无需考虑。

可以通过浏览器提供的 Selection API 获取用户在网页中选中的文本内容,这是最直接、兼容性良好的方式。
使用 window.getSelection() 获取选中文本
现代浏览器都支持 window.getSelection() 方法,它返回一个 Selection 对象,代表用户当前选中的文本范围(可能跨多个元素)。从中可直接提取纯文本内容。
- 调用
getSelection().toString()即可获得选中的纯文本字符串 - 注意:该方法返回空字符串时,说明当前无有效选择(例如只点了一下没拖动)
- 推荐配合事件监听(如
mouseup或selectionchange)触发获取逻辑
监听用户选择行为
为避免手动点击后遗漏时机,建议监听合适的事件来及时捕获选择结果:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
mouseup:鼠标松开时检查是否发生了文本选择(简单常用) -
selectionchange:document 级别事件,在选择变化时触发(更精确,但需注意触发时机和兼容性) - 示例:
document.addEventListener('mouseup', () => { console.log(window.getSelection().toString()); });
处理跨元素或富文本选择
当用户选中包含 HTML 标签的内容(比如一段带链接的文本),toString() 仍只返回纯文本。若需保留结构,可遍历 Selection 中的 Range:
- 通过
getSelection().getRangeAt(0)获取首个选中区域 - 用
range.cloneContents()得到 DocumentFragment,再转换为 HTML 字符串(需自行序列化) - 实际项目中多数场景只需纯文本,无需复杂处理
兼容旧版 IE 的写法(已较少需要)
IE9 及更早版本使用 document.selection,现已基本淘汰。如需支持极老环境,可做降级处理:
- 先尝试
window.getSelection() - 失败则尝试
document.selection?.createRange()?.text - 目前主流项目可忽略此兼容逻辑
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










