react经验7:高亮关键字

预期效果:
在这里插入图片描述

实现原理

将需要高亮的关键词做成正则表达式

new RegExp(`(${word})`, "gi")

使用上述正则表达式切割目标字符串

origin.split(new RegExp(`(${word})`, "gi"))

切割结果会包含正则匹配到的词
在这里插入图片描述
过滤掉空字符,并对关键词包裹一层标签,以设置其样式

/**处理高亮词
*@param origin 目标字符串
*@param word 关键词
*@returns {ReactNode[]}
*/
function highlightWord(origin: string, word: string) {if (!word) {return [origin]}const sps = origin.split(new RegExp(`(${word})`, "gi"))//排除空字符,并对关键词包裹标签return sps.filter(c => c).map(c => {if (c.toLowerCase() === word.toLowerCase()) {return <mark>{c}</mark>}return c})
}

最后将切割处理后的结果渲染输出

let title=highlightWord('12345','12')
<label>{title.map(d=>d)}
</label>

上述代码实际会生成这个

<label><mark>12</mark>345</label>

关键词被包裹了标签,此时就可以任意设定高亮样式了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/276510.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣 | 437. 路径总和 III

437. 路径总和 III mport java.util.ArrayList; import java.util.List;/*** int的取值范围&#xff1a;* -2^31 ~ 2^31-1* <p>* -2147483648 ~ 2147483647&#xff08;约等于10的9次方&#xff09;* <p>* long long的取值范围&#xff1a;* -2^63 ~ (2^63-1&…

Arduino uno循迹小车总结

1.HW-096 4路循迹模块&#xff08;红外发射器和红外接收器&#xff09; 输出信号&#xff1a;TTL电平&#xff08;可直接连接单片机I/0号&#xff0c;感应到传感器反射回来的红外光时,红指示灯亮&#xff0c;输出低电平&#xff1b;没有红外光时,指示灯不亮&#xff0c;输出高电…

契约锁解读:发生纠纷,法院如何判定电子合同真实有效性?

在签署电子合同时&#xff0c;大多数人最关心的依然是&#xff1a; 电子合同是否有法律效力&#xff1f; 电子合同是否可以作为司法证据&#xff1f; 如果发生纠纷&#xff0c;法院如何认证电子合同的有效性&#xff1f; 结合当前国家出台的相关法律法规&#xff1a;可靠的电子…

POST:http://XXX:XXXX/XXXX/XXXX(404 Not found)离谱

很离谱&#xff0c;同样的请求方式&#xff0c;不同的接口会有404的问题。看下边&#xff1a; 上边接口访问正常&#xff0c;下边接口出现404.且本地测试也可以&#xff0c;代码也推到公司git上了。真的很离谱。 我也不知道怎么回事&#xff0c;无语||||||| 哪位兄弟知道啊&a…

详解—C++右值引用

目录 一、右值引用概念 二、 左值与右值 三、引用与右值引用比较 四、值的形式返回对象的缺陷 五、移动语义 六、右值引用引用左值 七、完美转发 八、右值引用作用 一、右值引用概念 C98中提出了引用的概念&#xff0c;引用即别名&#xff0c;引用变量与其引用实体公共…

WX小程序案例(一):弹幕列表

WXML内容 <!--pages/formCase/formCase.wxml--> <!-- <text>pages/formCase/formCase.wxml</text> --> <view class"bk bkimg"><!-- <image src"/static/imgs/ceeb653ely1g9na2k0k6ug206o06oaa8.gif" mode"scal…

分享10个国内免费的AI绘画工具

谈到 AI 绘画&#xff0c;许多人会联想到 Midjourney、Stable Diffusion、DALLE2 等国外的知名绘画工具。 然而&#xff0c;这些国外的 AI 绘画工具大部分都是付费的&#xff0c;并且需要借助科学上网才能使用。这两个条件让许多人望而却步。 考虑到很多人无法进行科学上网&a…

【Pandas案例1】 根据某些相同属性列合并同类数据

文章目录 根据相同属性合并pandas行代码数据加载自定义方法主函数完整代码如下 根据相同属性合并pandas行 代码 提供的代码可直接运行 完整的逐步运行的ipynb代码项目化的py文件代码 以如下表格数据为例&#xff0c;针对t, i, j相同的行&#xff0c;对其后的v属性数据实现相加…

系统规划与管理师和信息系统项目管理师哪个好考?

软考系统规划与管理师和信息系统项目管理师是软考中备受关注的两个证书。这两个证书的相关知识领域广泛&#xff0c;对于从事IT行业的人们来说&#xff0c;都具有相当的吸引力。那么&#xff0c;对于考生而言&#xff0c;究竟哪个证书更适合呢&#xff1f;接下来&#xff0c;我…

Java 线程的基本概念

创建和运行线程 方法一&#xff0c;直接使用 Thread // 创建线程对象 Thread t new Thread() {public void run() {// 要执行的任务}};// 启动线程 t.start();例如&#xff1a; // 构造方法的参数是给线程指定名字&#xff0c;推荐 Thread t1 new Thread("t1") …

【深度学习】AlexNet网络实现猫狗分类

【深度学习】AlexNet网络实现猫狗分类 AlexNet简介 AlexNet是一种卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;模型&#xff0c;它在2012年的ImageNet图像分类挑战赛中取得了重大突破&#xff0c;引发了深度学习在计算机视觉领域的热潮…

Axure之动态面板轮播图

目录 一.介绍 二.好处 三.动态面板轮播图 四.动态面板多方式登录 五.ERP登录 六.ERP的左侧菜单栏 七.ERP的公告栏 今天就到这了哦&#xff01;&#xff01;&#xff01;希望能帮到你了哦&#xff01;&#xff01;&#xff01; 一.介绍 Axure中的动态面板是一个非常有用的组…