在前端开发中，很多时候需要对一段文本进行关键词的高亮展示，比如搜索结果页面、文章标签等等，此时我们可以使用一个非常好用的 npm 包：highlight-words-core。本教程将带你详细了解该包的使用方法。
安装
在开始使用 highlight-words-core 之前，我们需要先安装它。使用 npm 包管理器进行安装，运行以下命令：
npm install highlight-words-core --save
基本用法
首先，我们需要在项目中引入 highlight-words-core 包：
import highlightWords from "highlight-words-core";
然后，我们可以调用该包中的 highlight 方法，进行关键词高亮，该方法接收两个参数：
text：需要高亮的文本内容query：需要高亮的关键词，支持多个关键词，可以使用数组传入
例如，我们需要将以下文本中的 “今天的天气真是太好了” 中的 “天气” 和 “好” 两个关键词进行高亮展示，代码如下：
const text = "今天的天气真是太好了，出门逛街的人也很多。"; const query = ["天气", "好"]; const highlighted = highlightWords(text, query); console.log(highlighted); // "今天的<span class='highlighted'>天气</span>真是太<span class='highlighted'>好</span>了，出门逛街的人也很多。"
在上述代码中，我们使用 highlightWords 方法将 “天气” 和 “好” 两个关键词进行高亮，默认情况下，关键词会被包裹在 <span class='highlighted'>...</span> 中。通过设置第三个可选参数，我们也可以自定义高亮标签的名称和样式。
如果我们需要将多个文本进行高亮，并且需要使用不同的关键词和高亮样式，我们可以使用 highlightWordsWithDifferentStyles 方法，该方法接收一个包含多个文本和对应关键词和高亮样式的对象数组。例如，以下代码将高亮三个文本中的不同关键词，并分别使用不同的高亮样式:
-- -------------------- ---- -------
----- ----- - -
-
----- ------------------------
------ ------ -----
---------- -------------
--
-
----- -------------------------
------ ------ ------
---------- -------------
--
-
----- ---------------------
------ ------ ------
---------- -------------
--
--
----- ----------- - -----------------------------------------
-------------------------
-- -----
-- ----- --------------------------- ------------------------------------- -----------------------------------------------
-- ----- -------------------------- ---------------------------------------------- ----------------------------------------
-- ----- -------------------------- --------------------------------------------- -------------------------------------
-- ------在上述代码中，我们使用 highlightWordsWithDifferentStyles 方法将三个文本分别进行高亮，并使用不同的高亮样式。
自定义高亮样式
如果默认的高亮样式不符合我们的需求，我们可以通过设置自定义的样式来进行自定义。
在 highlight 方法或 highlightWordsWithDifferentStyles 方法的第三个可选参数中，我们可以传入一个包含以下属性的对象:
className: 高亮标签的 class 名称，默认为 "highlighted"style: 高亮标签的内联样式对象，默认为 {}
例如，以下代码使用自定义样式将关键字 “天气” 和 “好” 进行高亮：
-- -------------------- ---- -------
----- ---- - ------------------------
----- ----- - ------ -----
----- ----------- - -------------------- ------ -
---------- ---------------
------ -
---------------- -------
------ -------
--
---
-------------------------
-- --------- -------------------- ----------------------------------------------------------- -------------------- ---------------------------------------------------------------总结
使用 npm 包 highlight-words-core 可以轻松地对文本中的关键词进行高亮，可以适用于搜索结果、文章标签等场景，使用灵活，提供了自定义样式的功能，简单易用，值得学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61312