介绍
empt 是一个小巧的 JavaScript 库，用于在 HTML 页面中将文本内容转换为带有关键词高亮的 HTML 片段。它支持多种高亮风格，并且使用简单方便。
安装
使用 npm 安装 empt：
--- ------- ----
或者直接从 GitHub 仓库 下载源码。
使用
基础用法
首先，将 empt 引入项目中：
------- -------------------------------
或者通过 import 引入：
------ ---- ---- -------
然后，定义一个文本字符串和一个关键词数组：
----- ---- - ----- -- - ------ ---- --- ---------- ----- -------- - ---------- -----------
最后，传入 text 和 keywords，以及一个目标元素的选择器，即可完成高亮转换：
---------- --------- --------------
在 HTML 中，定义一个空元素用于存放高亮结果：
---- ------------------------
高级用法
empt 还支持更多的自定义选项和事件回调，以实现更灵活的高亮效果。
配置选项
可以使用 options 参数定义一些自定义选项：
----- ------- - - -------------- ----- -- --------- ------ ----------------- ----- -- ------------ ----- --------------- ------------------ -------- -- ----------- ----------------- -- -- --------------------- --------------- -- -------------- ----------------- -- -- --------------------- -------------- -- ------------ -- ---------- --------- ------------- ---------
自定义高亮模板
默认情况下，empt 会将关键词用 <mark> 标签包裹起来，可以通过 replaceFn 选项传入一个自定义函数来实现自定义高亮模板：
----- ------- - - ---------- --------- -- ------ -------------------------------------- -- ---------- --------- ------------- ---------
手动触发高亮
使用 start() 和 stop() 方法手动触发和停止高亮：
----- -------- - ---------- --------- -------------- ----------------- -- ---- ---------------- -- ----
获取分组结果
使用 getGroupedMatches() 方法获取按关键词分组的匹配结果：
----- ---- - ----- -- - ------ ---- --- ---------- ----- -------- - ---------- ---------- ------- ----- -------- - ---------- --------- -------------- ----- ------ - ----------------------------- -- ------ -------------------- -- - ------- -- ------ --- -------- -------- --- -------- -- ------ --- -------- --------- --- ---- -- ------ --- -------- ----- -- - --
示例代码
HTML：
------
-----
------- -- - ------ ---- --- ------------
------ ----------- ------------- ------------------ ----------
------- -------------------------------------
------
---- ------------------------
------- -------------------------------
------- ------------------------------
-------JavaScript：
----- -------- - ----------------------------
----- ------------- - ------------------------------------
----- ------------ - -----------------------------------------
----- ------------- - -------------------------------------
-------------------------------------- -- -- -
----- ---- - ----------------------------
----- -------- - --------------------------------------------
----- ------- - -
--------------- ------------------ -------
--
----- -------- - ---------- --------- ------------- ---------
-----------------
---结语
empt 是一个非常实用的小型库，可以在开发过程中快速实现文本高亮功能。希望本文的介绍和示例能够帮助你更好地使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e1fa563576b7b1ecdb2