在前端开发中，有时候需要对页面中的文字进行高亮显示、跨元素选中等操作。这时，我们可以使用 rangy2 这个 npm 包来实现这些文本选择相关的功能。
什么是 rangy2
rangy2 是一个 JavaScript 库，它提供了一些实用的工具函数，用于操作页面中的文本选择。其中，最常用的功能就是让用户可以在页面上选中一段文本，而不仅仅是选中一个 HTML 元素。
rangy2 在处理文本选择的时候，会把选择范围转化为 Range 对象，从而可以方便地操作 Range 对象的属性和方法。同时，它还提供了一些 API，可以用来定位、扩展、合并和删除 Range 对象。
rangy2 的安装和使用
要使用 rangy2，我们需要先把它安装到项目中。在终端中，进入项目目录，然后输入以下命令：
--- ------- -----
安装完成之后，我们就可以在 JavaScript 代码中引入 rangy2 库了，如下所示：
------ ----- ---- --------
有了 rangy2，我们就可以开始使用它提供的 API，来对页面中的文本进行选择和处理了。
rangy2 的 API
创建 Range 对象
rangy.createRange() 可以用来创建一个空的 Range 对象。我们可以给这个 Range 对象设置起始位置和结束位置，然后通过 API 来获取或修改 Range 对象的属性。
----- ----- - -------------------- ------------------------- ---- -- -- ----- ----- ----------------------- ---- -- -- ----- -----
选择文本
rangy.getSelection() 可以获取当前页面的文本选择对象。我们可以通过这个对象来获取或修改当前选择的 Range 对象。
----- --------- - --------------------- ----- ----- - ------------------------ -- ----- ----- --
还可以把 Range 对象设置为当前的选中范围，从而实现页面文本的高亮显示等操作。
-------------------------------- -- -- ----- ----------
扩展，合并和删除 Range 对象
rangy.range.createContextualFragment() 可以把 Range 对象转化为 HTML 片段，同时还可以指定包含元素的上下文环境。
----- -------- - ---------------------------------------- ------------
rangy.range.expand() 可以把 Range 对象向左或向右扩展，从而包含更多文本范围。
--------------------- -- ------------
rangy.range.combine() 可以把相邻且重叠的 Range 对象合并为一个更大的 Range 对象。
----- ------ - -------------------- ----- ------ - -------------------- ----- ------------- - --------------------------- --------
rangy.range.deleteContents() 可以把 Range 对象所包含的文本内容删除。
-----------------------
示例代码
下面是一个简单的使用 rangy2 的示例代码，它可以用来对页面中的文本进行高亮显示。
------ ----- ---- --------
----- --------- - ------ -- -
----- --------- - ---------------------
----- ----- - --------------------
-------------------- ---
------------------ ------------------------
--------------------------------
----- -------- - ------------
----- ---------------- - ------------------------------------- -
----------------- -----
--------------- ------
---
------------------------------------
--
------ - --------- --使用 highlight 函数，可以对指定的 HTML 元素进行高亮显示，如下所示：
----- --------- - -------------------------------------- ---------------------
总结
通过使用 rangy2 这个 npm 包，我们可以方便地对页面中的文本进行选择、高亮、删除等操作。此外，rangy2 还提供了一些实用的 API，可以用来定位、扩展、合并和删除 Range 对象。在实际开发中，我们可以根据项目需求，选择合适的 API 来满足我们的业务要求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672643660cf7123b36488