简介
@rangy/highlighter 是 Rangy 库的一部分，它用于在 HTML 页面上添加文本高亮/标记。
安装
使用 npm 安装：
--- ------- ------------------
安装完成后，我们就可以开始使用 highlighter 了。
使用
初始化
要使用 highlighter，我们需要先创建 Highlighter 实例，代码如下：
------ - ----------- - ---- --------------------- ----- ----------- - --- ----------------------
document参数为我们希望操作的文档对象。- 我们也可以不传递 parameter 在没有
document的情况下创建 highlighter 实例。
创建高亮/标记
接下来，我们可以使用 highlighter 的 highlightSelection() 方法来创建高亮/标记。代码如下：
----- --------- - ---------------------- -- ---------------------- - ----- ----- - ------------------------ ------------------------------------------- - ------------------- ----------- -- ------- -
'highlight'参数为选中文本后高亮/标记的类名。{ containerElementId: 'container' }是一个可选的选项对象，用于指定高亮/标记的父级容器。range参数为选中的文本范围。
移除高亮/标记
移除高亮/标记也很简单，我们只需要使用 highlighter 的 removeHighlights() 方法，代码如下：
------------------------------------------
'highlight'参数为需要移除的高亮/标记的类名。
获取高亮/标记信息
我们可以使用 highlighter 的 getHighlights() 方法来获取所有的高亮/标记信息，代码如下：
----- ---------- - ---------------------------- ------------------------
它将返回一个数组，每个元素都包含以下信息：
range：一个 Range 对象，表示高亮/标记的文本范围。containerElement：高亮/标记所在的容器元素。classApplier：一个 ClassApplier 对象，用于将类名应用到高亮/标记。
修改高亮/标记
我们可以使用 highlighter 的 changeHighlightClass() 方法来修改高亮/标记的类名，代码如下：
--------------------------------------------- -----------------
'highlight'参数为需要修改的高亮/标记的类名。'new-highlight'参数为新的高亮/标记的类名。
示例
下面是一个完整的示例代码：
---- -------------
----- ----- ----- --- ----- ----------- ---------- ----- ----- ------- ----- ------- -- ------ ---- --------- ----
------
------- ---------------------------------
------- ---------------------------- ------------------
------- ---------------------- -------------------
------- --------------
------ - ----------- - ---- ---------------------
----- ----------- - --- ----------------------
-------------------------------------------------------------- -- -- -
----- --------- - ----------------------
-- ---------------------- -
----- ----- - ------------------------
------------------------------------------- - ------------------- --------- -- -------
-
---
--------------------------------------------------------------------- -- -- -
------------------------------------------
---
------------------------------------------------------------------ -- -- -
----- ---------- - ----------------------------
------------------------
---
---------总结
@rangy/highlighter 能够很方便地实现在 HTML 页面上添加文本高亮/标记的功能。我们可以在此基础上进行扩展，比如将高亮/标记保存到服务器或本地，或者增加更多的样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672653660cf7123b3649b