React实现关键字高亮

先看效果:
React实现关键字高亮_第1张图片
实现很简单通过以下这个函数:

highLight = (text, keyword ) => {
    return text.split(keyword).flatMap(str => [{keyword}, str]).slice(1);
  }

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

原理是:

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

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

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

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

你可能感兴趣的:(React,react.js,前端,前端框架)