React实现关键字高亮

先看效果:

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

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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript