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