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.

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180318G0U18Y00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券