什么是 html-highlighter
html-highlighter 是一个 JavaScript 包，它可以将 HTML 文本中的某些关键词或正则匹配项高亮显示。它非常适用于前端开发者在开发文本搜索功能时的需求，可以为搜索结果提供非常好的用户体验。
安装
首先，我们需要使用 npm 进行安装：
npm install html-highlighter
使用方法
文本高亮
html-highlighter 提供了非常简单的 API，让我们可以轻松地实现文本高亮功能。首先，我们需要引入包：
const HtmlHighlighter = require('html-highlighter');接下来，我们可以使用 highlightText 函数来高亮文本中的关键词：
const hl = new HtmlHighlighter(); const text = "This is a test text highlighting the word JavaScript"; const keywords = ["test", "word", "JavaScript"]; const highlighted = hl.highlightText(text, keywords); console.log(highlighted);
以上代码会在控制台输出：This is a <mark>test</mark> text highlighting the <mark>word</mark> <mark>JavaScript</mark>。
HTML 代码高亮
html-highlighter 不仅可以高亮文本，还可以高亮 HTML 代码。接下来我们将详细介绍如何将 HTML 代码高亮：
-- -------------------- ---- -------
----- -- - --- ------------------
----- ---- - -------
------
----------- -------------------
-------
------
------- ----------- -- - ----- ---- --- -------- ---------------
-------
---------
----- -------- - -------- ------------
----- ----------- - ---------------------- ----------
-------------------------以上代码会在控制台输出：
<mark><html></mark>
<mark><head></mark>
<mark><title></mark>HTML Highlighter<mark></title></mark>
<mark></head></mark>
<mark><body></mark>
<p><mark>HTML</mark> Highlighter is a great tool for <mark>frontend</mark> developers.</p>
<mark></body></mark>
<mark></html></mark>在上面的例子中，我们可以看到代码中的标记标记了关键词 "HTML" 和 "frontend"。
高级选项
除了基本的文本高亮和 HTML 代码高亮之外，html-highlighter 还提供了一些高级选项，以满足更多的需求。
选项一：忽略 HTML 标签
有时我们可能想要忽略 HTML 标签，只关注文本中的关键词。这时，我们可以启用 ignoreTags 选项：
-- -------------------- ---- -------
----- -- - --- ----------------- ----------- ---- ---
----- ---- - -------
------
----------- -------------------
-------
------
------- ----------- -- - ----- ---- --- -------- ---------------
-------
---------
----- -------- - -------- ------------
----- ----------- - ---------------------- ----------
-------------------------以下是输出结果：
<html>
<head>
<title><mark>HTML</mark> Highlighter</title>
</head>
<body>
<p><mark>HTML</mark> Highlighter is a great tool for <mark>frontend</mark> developers.</p>
</body>
</html>选项二：标记类型
在默认情况下，html-highlighter 使用 <mark> 标记关键词，但是我们可以使用任何其他的标记类型，比如 标签。使用方法如下：
const hl = new HtmlHighlighter({ tagName: 'em' });
const text = "This is a test text highlighting the word JavaScript";
const keywords = ["test", "word", "JavaScript"];
const highlighted = hl.highlightText(text, keywords);
console.log(highlighted);输出结果如下：
This is a <em>test</em> text highlighting the <em>word</em> <em>JavaScript</em>
选项三：标记类名
同样的，我们可以自定义标记类名。使用方法如下：
-- -------------------- ---- -------
----- -- - --- ----------------- ---------- ------------- ---
----- ---- - -------
------
----------- -------------------
-------
------
------- ----------- -- - ----- ---- --- -------- ---------------
-------
---------
----- -------- - -------- ------------
----- ----------- - ---------------------- ----------
-------------------------输出结果如下：
<html>
<head>
<title><span class="highlighted">HTML</span> Highlighter</title>
</head>
<body>
<p><span class="highlighted">HTML</span> Highlighter is a great tool for <span class="highlighted">frontend</span> developers.</p>
</body>
</html>总结
使用 html-highlighter，我们可以方便地实现文本和 HTML 代码高亮功能，使用户可以更加方便地搜索和查看内容。本文介绍了 html-highlighter 的安装和基本用法，并介绍了如何使用高级选项来定制标记样式。希望读者可以从本文中学到有用的知识，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822367