一、对象
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象,请调用 window.getSelection()
。
Range,表示包含节点和部分文本节点的文档片段,可以通过 Selection 对象的 getRangeAt 方法取得,也可以通过 Document 对象的 createRange 方法创建。
二、应用
在我们日常前端开发中,可能会遇到这样的场景,实现划词翻译、点击取词翻译、编辑器中的复制、粘贴等需求,下面我们通过对这两种需求场景来介绍 Selection 对象 和 Range 对象在实际项目中的应用。
实现点击取词并翻译
实现基本思路,点击时获取 Selection 对象,并创建选取,通过 Range 的 setStart 和 setEnd 方法扩大文档片段的范围,以空格或者特殊符号为临界状态,终止循环。
1.方法一实现相关逻辑如下:
1 | if (window.getSelection) { |
2.方法二实现方案比较简单,实现代码逻辑如下:
1 | if (window.getSelection) { |
实现划词翻译
1.获取划词文本
1 | function getSelected () { |
2.清空选中文本
1 | function removeSelection () { |