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

相关推荐
程序员爱钓鱼7 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子8 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆9 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了9 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆15 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆15 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆16 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆17 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er23 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子24 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript