React实现关键字高亮

JavaWizard-M2023-08-09 10:33

先看效果：

实现很简单通过以下这个函数：

react 复制代码

highLight = (text, keyword ) => {
    return text.split(keyword).flatMap(str => [<span style={{ color: 'red', fontWeight: 'bold' }}>{keyword}</span>, str]).slice(1);
  }

展示某段文本时调用该函数处理后，在展示就能实现高亮效果

原理是：

这个函数的作用是在给定的文本中，将指定的关键字进行高亮标记。它接受两个参数：text（要处理的文本）和 keyword（要高亮标记的关键字）。

函数首先使用 split() 方法将文本按照关键字进行拆分，生成一个字符串数组。然后通过 flatMap() 方法遍历数组，并在每个关键字的前面插入一个用标签包裹的标记，设置其样式为红色并加粗。最后，使用 slice(1) 方法去掉第一个空字符串元素，并返回一个新的数组。

这样，当你调用 highLight(text, keyword) 函数时，它将返回一个包含了高亮标记的文本数组。你可以在渲染页面时使用该数组来展示高亮的效果，将每个元素渲染为 HTML 内容，从而实现对指定关键字的高亮显示。

参考了该篇博客的做法：https://juejin.cn/post/7088345637401395236