在前端开发中，我们经常需要在大量文本中搜索关键词，并高亮显示出来。而 find-by-words 就是一个可以帮助我们实现这一功能的 npm 包。本文将详细介绍该包的使用方法。
安装
使用 npm 进行安装：
npm install find-by-words
使用方法
1. 导入包
使用 CommonJS 或 ES6 模块导入 find-by-words 包：
// CommonJS
const findByWords = require('find-by-words');
// ES6 模块
import findByWords from 'find-by-words';2. 调用 findByWords 方法
findByWords(text, searchWords, options);
text：要搜索的文本。
searchWords：需要搜索的关键词，可以是字符串或正则表达式。多个关键词可以使用数组表示，例如：['word1', 'word2', /word3/i]。
options：可选参数，控制搜索行为。
caseSensitive：是否区分大小写，默认值为false。wholeWords：是否只匹配整个单词，默认值为false。maxDistance：最大匹配距离，默认值为 50。
3. 搜索结果
findByWords 方法返回一个数组，每个元素代表一次匹配的结果。即使未找到匹配结果，返回的结果也将是一个空数组。
每个匹配项都包含以下属性：
start：匹配起始位置。end：匹配结束位置。distance：匹配距离。text：匹配文本。
以下示例代码展示了如何使用 find-by-words 包实现文本搜索和高亮功能。
-- -------------------- ---- ------- ------ ----------- ---- ---------------- ----- ----------- - --------- --------- -- ----- ----- ---- - ------ ----- ------- ----- ----- ----- --- ----- ----------- ---------- ----- ----- ----- -------- ------ -- --------- --- ---- ---- --------- --- ------- ----- - ------- --------- --- -- ----- ------ ----- --------- ------- ----- -- ------- ------ ----- ---------- ---- --- ---- --------- -------- ----- ---- -------- ----- -- ------ ---- ----- -- ------ ---- --- ---- ----- --- ------ --------- ----- --- ----- ----- ------- -- -------- ---- ----- --- ---- ----- -- --- -------- --------- ----- -------- ---- --- ----- -------- -------- ---------- -------- ---- --- -------- --------- ----- ------ ------ ------ --- --------- ----- ----- ----- ------ ----- ---- ---- -------- ----- ------- - ----------------- ------------ - -------------- ----- ----------- ----- --- -- ---------------------------------------- --- ------ - ----- --- ---- - - -------------- - -- - -- -- ---- - ------ - --------------- --------------- - ----------- - ----------------------------- ------ - --------------- ----------------- - ---------- - ------------------------------- -
在上述示例中，我们将 hello 和 world 作为搜索关键词，在 text 中进行搜索。我们将搜索的结果遍历，用标签 <strong> 和 </strong> 将匹配的文本包裹起来，实现高亮显示效果。
总结
find-by-words 是一个非常实用的 npm 包，在前端文本搜索和高亮方面提供了方便的解决方案。在实际使用过程中，我们应该掌握其基本使用方法并注意一些可选参数的设置，以及如何将搜索结果高亮显示。希望本文提供的使用教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005539c81e8991b448d0d7b