React实现关键字高亮

JavaWizard-M

已于 2023-08-21 17:42:29 修改

阅读量1.8k

点赞数

分类专栏： React 文章标签： react.js 前端前端框架

于 2023-08-08 19:47:58 首次发布

本文链接：https://blog.csdn.net/Java_cpp_/article/details/132174049

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个简单的JavaScript函数highLight，用于在给定文本中高亮显示指定关键字。通过split(),flatMap()和HTML标记，实现在页面渲染时呈现高亮效果。参考链接：[博客链接](https://juejin.cn/post/7088345637401395236)

摘要由CSDN通过智能技术生成

先看效果：
在这里插入图片描述
实现很简单通过以下这个函数：

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