Selection和Range 对象应用实战

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象，请调用 window.getSelection()。Range，表示包含节点和部分文本节点的文档片段，可以通过 Selection 对象的 getRangeAt 方法取得，也可以通过 Document 对象的 createRange 方法创建。

在我们日常前端开发中，可能会遇到这样的场景，实现划词翻译、点击取词翻译、编辑器中的复制、粘贴等需求，下面我们通过对这两种需求场景来介绍 Selection 对象 和 Range 对象在实际项目中的应用。

应用一：实现点击取词并翻译

实现基本思路，点击时获取 Selection 对象，并创建选取，通过 Range 的 setStart 和 setEnd 方法扩大文档片段的范围，以空格或者特殊符号为临界状态，终止循环。

1. 方法一实现相关逻辑如下：

2. 方法二实现方案比较简单，实现代码逻辑如下：

应用二：实现划词翻译

1. 获取划词文本

2. 清空选中文本

第三方库

[rangy: https://github.com/timdown/rangy] A cross-browser JavaScript range and selection library.