前端开发中经常需要对一段文本进行关键字高亮的需求，这时候，我们可以使用 @molejs/highlight-words-core 这个 npm 包来快速完成。
什么是 @molejs/highlight-words-core？
@molejs/highlight-words-core 是一个开源的 npm 包，它可以非常方便地对字符串进行关键字高亮。使用 @molejs/highlight-words-core，你可以快速定位文本中的关键字，并将其高亮显示。
@molejs/highlight-words-core 非常小巧，并且非常易用，不需要学习额外的语法和 API，只需要传入一段文本和需要高亮的关键字数组，即可实现高亮效果。
如何安装 @molejs/highlight-words-core？
可以使用 npm 进行安装。在项目目录下，运行以下命令：
npm install @molejs/highlight-words-core
如果想要在浏览器中直接使用 @molejs/highlight-words-core，可以使用以下 CDN 地址：
https://cdn.jsdelivr.net/npm/@molejs/highlight-words-core@1.0.0/dist/highlight-words-core.min.js
如何使用 @molejs/highlight-words-core？
首先，需要导入 @molejs/highlight-words-core：
import { highlightWordsCore } from '@molejs/highlight-words-core';或者，如果使用 CDN，在 HTML 文件中引入以下脚本：
<script src="https://cdn.jsdelivr.net/npm/@molejs/highlight-words-core@1.0.0/dist/highlight-words-core.min.js"></script>
然后，可以使用 highlightWordsCore 函数进行关键字高亮。下面是一个示例：
-- -------------------- ---- ------- ----- ---- - ----------------- ----- -------- - ------ ------- ----- ----------- - ------------------------ ---------- ------------------------- -- ------------ --------------------------------------- ------------------------------
可以看到，highlightWordsCore 函数将匹配到的关键字用 <span> 标签进行了高亮。
如果想要对不同的关键字使用不同的样式，可以指定 highlightClassName 参数，如下所示：
-- -------------------- ---- -------
----- ---- - -----------------
----- -------- - -
-
----- -----
------ ------------------
--
-
----- ------
------ ---------------------
-
--
----- ----------- - ------------------------ ----------
-------------------------
-- ------------ -------------------------------------------- --------------------------------------上面示例中，highlightClassName 参数接收了一个对象数组，每个对象包含一个关键字和对应的样式类名。
总结
@molejs/highlight-words-core 是一个非常实用的 npm 包，它能够帮助我们快速实现字符串的关键字高亮。使用 highlightWordsCore 函数，我们可以轻松地定位关键字并进行高亮，提升用户体验。
如果你有相关需求，不妨试一试 @molejs/highlight-words-core，相信它会给你带来不少帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/molejs-highlight-words-core