前言
在前端开发中，我们经常需要处理用户在浏览器中的选中文本。虽然浏览器提供了一些默认的 API，但是功能有限，我们需要借助一些第三方的库，在此推荐一款实用的 npm 包 @rangy/selectionsaverestore。
什么是 @rangy/selectionsaverestore
@rangy/selectionsaverestore 是一个基于 rangy 的 npm 包，用于保存和还原选区。rangy 是一个 JavaScript 的跨浏览器选择和范围操作库，该库可以在跨浏览器范围中进行选择和操作，同时排除了浏览器差异的问题。有兴趣的可以去官网详细了解它的功能。
安装 @rangy/selectionsaverestore
要使用 @rangy/selectionsaverestore，我们首先需要先安装它。我们可以使用 npm 进行安装，执行如下命令：
npm install --save @rangy/selectionsaverestore
@rangy/selectionsaverestore 的使用方法
在安装好 @rangy/selectionsaverestore 后，我们可以先来了解一下它的 API：
1. rangeSerializer.serializePosition(range, [containerNode])
- range: Range 对象，表示选中文本的范围；
- containerNode: Node 对象，表示范围选区的父级节点。
这个方法的作用是根据 Range 对象获取对应的序列化位置，其中 [containerNode] 参数是可选的，如果没有传递该参数，则会返回一个字符串表示序列化位置，否则会返回一个对象，包含序列化位置和与该位置相关的父级节点。
2. rangeSerializer.restorePosition(savePosition, [normalize])
- savePosition: 保存的序列化位置，可以是字符串或对象。
- normalize: 是否应该规范化还原的范围，即是否应该尝试将还原的范围规范化为单个超出父级 或文档的范围，从而避免还原范围时可能会选择父级 或文档 外的内容。 默认为 false。
这个方法是根据保存的序列化位置还原 Range 对象。
3. saveSelection(win)
- win: window 对象，代表当前浏览器窗口。
这个方法是用来保存当前浏览器窗口中的选中文本。
4. restoreSelection(win, selectionData, [normalize])
- win: window 对象，代表当前浏览器窗口。
- selectionData: 用于保存选中数据的对象，其中包含了序列化的选区位置，以及选区所在的父级节点。
- normalize: 是否应该规范化还原的范围，即是否应该尝试将还原的范围规范化为单个超出父级 或文档的范围，从而避免还原范围时可能会选择父级 或文档 外的内容。 默认为 false。
这个方法是用来还原当前浏览器窗口中的选中文本。
示例代码
为了更好的理解 @rangy/selectionsaverestore 的使用方法，我们来看一个使用示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------- ------------------------------------------------------------- ------- --------------------------------------------------------------------------------------------- ------- ------ ---- ------------- --- ----- ----- ----- --- ----- ----------- ---------- ----- --- ------- ---- --- ----- -------- --- ------- ---- -------- --- ------- ------ -- --- ------------ --- -------- ---- ---------- ----- ------- -- ----- - --------- ----- --- ------- ------- --- --- ----- ------- ----- ------ ------ ------ -- ------- ----- --------- ---- ------------ ------- ---- - -------- ----- -------- ----- -- ------ ------- ----- ----- ------- --- --- ------ ---- ----- --- ----- ------- --- ----- --------- ----------- ------ -- ------ ------ ----- -------- ---- -- ----- -------- ----- --------- --- ------------ ---- ------ ------- ----------------------------------------- ------- -------------------------------------------- -------- -------- --------------- - --- ------ - ------------------------------------ -- -------------- - -- - --- ----- - ---------- --- ------------- - - --------- ------------------------------- ---------- ----------------------------- -- --------------------------------------- ------------------------------- - - -------- ------------------ - --- ------------- - ---------------------------------------------------- -- --------------- - --- -------- - ----------------------- --- --------- - ------------------------ --- ----- - ----------------------------------- ----------- --- --- - --------------------- ---------------------- -------------------- - - --------- ------- -------展开代码
这里我们在一个包含一些文本的 div 中，每个文本都可以进行选择，我们通过点击保存选中文本按钮来保存选中的文本。然后通过点击还原选中文本按钮来恢复刚刚选中的文本。
总结
通过上述示例，我们了解了 @rangy/selectionsaverestore 的用法，它可以方便地保存和还原选中文本，避免了直接使用浏览器默认 API 时可能出现的浏览器差异问题。可以帮助我们更好的进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672653660cf7123b3649d
