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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用代理IP时的并发请求是什么意思?

很多做过数据采集的技术们应该都有所了解&#xff0c;在选择代理IP时会有一个并发请求的参数&#xff0c;这个参数是什么意思呢&#xff1f;可能有很多新手不是很了解&#xff0c;其实代理IP的并发请求就是指同时发送多个请求到目标服务器&#xff0c;以提高请求的效率和速度。…

LeetCode刷题--- 二叉树的所有路径

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 【 http://t.csdnimg.cn/yUl2I 】 【C】 【 http://t.csdnimg.cn/6AbpV 】 数据结构与算法 【 http://t.csdnimg.cn/hKh2l 】 前言&…

详解高精度数字模拟混合信号温度传感芯片的工作原理及应用

高精度温度传感芯片是利用物质各种物理性质随温度变化的规律把温度转换为电量的传感芯片。这些呈现规律性变化的物理性质主要有体。温度传感芯片是温度测量仪表的核心部分&#xff0c;品种繁多。按测量方式可分为接触式和非接触式两大类&#xff0c;按照传感器材料及电子元件特…

DES的DPA攻击过程

一般智能卡只使用DES算法对数据进行加密&#xff0c;不采取其他防御措施&#xff0c;所以安全性不高。本博文主要研究智能卡使用DES算法对数据进行加密的具体细节&#xff0c;并针对加密过程中的关键步骤给出DPA攻击的设计思路。 DES数据加密过程 智能卡对密码算法的要求是功…

rocketmq启动nohup mqbroker 显示Exit 253错误解决方案

执行nohup mqbroker -c /usr/local/rocketmq/rocketmq-all-4.9.1-bin-release/conf/2m-2s-sync/broker-b-s.properties启动broker节点 退出253 出现这种错误的原因可能是broker-b-s.properties文件的路劲你提前mkdir了 解决办法&#xff0c;把创建好的文件删除&#xff0c;等…

星座生肖运势配对+周公解梦流量主小程序源码系统 带完整的安装部署教程·

近年来&#xff0c;人们对于星座和生肖的配对以及周公解梦的需求越来越大。罗峰发现了一款集星座、生肖配对和周公解梦于一体的流量主小程序源码系统。该系统具有丰富的功能和易于部署的特点&#xff0c;旨在为广大用户提供更加便捷、高效的星座生肖配对和周公解梦服务。 以下…

利用canvas封装录像时间轴拖动(uniapp),封装上传uniapp插件市场

gitee项目地址,项目是一个空项目,其中包含了封装的插件,自己阅读,由于利用了canvas所以在使用中暂不支持.nvue,待优化; 项目也是借鉴了github上的一个项目,timeline-canvas,​​​​​​​ ​​​​​​​

16--常用类和基础API--06

1、包装类 1.1 包装类概述 Java提供了两个类型系统&#xff0c;基本类型与引用类型&#xff0c;使用基本类型在于效率&#xff0c;然而很多情况&#xff0c;会创建对象使用&#xff0c;因为对象可以做更多的功能&#xff0c;如果想要我们的基本类型像对象一样操作&#xff0c…

Vue组件封装知识总结

一、为什么要封装组件 首先&#xff0c;一个好问题&#xff0c;面试要考的&#xff01;为什么要封装组件呢&#xff1f; 提高代码的复用性&#xff1a;通过封装&#xff0c;可以将一段代码或一部分功能抽象为一个独立的组件&#xff0c;并在不同的项目或场景中重复使用。这样可…

【自定义View】android自定义渐变色圆弧+水波纹布局

本次用ko t lin 写了自定义渐变色圆弧水波纹布局。 备注&#xff1a;双水波纹的手写代码我放在文末了。但我自己写的运行起来有 亿点点难看。 所以效果图里用的 com.scwang.wave:MultiWaveHeader:1.0.0-andx 实现水波纹。--重要的是知道原理。。嘻嘻&#xff01;&#x1f618; …

天猫数据分析(天猫数据查询):11月茅台涨价依然稳居销冠,白酒市场销售现状分析

11月份&#xff0c;贵州茅台宣布涨价。2023年11月1日起茅台上调53%vol贵州茅台酒&#xff08;飞天、五星&#xff09;出厂价格&#xff0c;平均上调幅度约为20%。有媒体报道&#xff0c;随着茅台酒出厂价宣布上调后&#xff0c;市场销售价普遍上涨50元至100元不等。 如今&#…

JVM类加载机制详解及双亲委派机制分析

类加载运行全过程 当我们用java命令运行某个类的main函数启动程序时&#xff0c;首先需要通过类加载器把主类加载到JVM。 public class Math {public static final int initData 666;public static User user new User();public int compute() { //一个方法对应一块栈帧内…

Jmeter接口自动化测试

之前我们的用例数据都是配置在HTTP请求中&#xff0c;每次需要增加&#xff0c;修改用例都需要打开JMeter重新编辑&#xff0c;当用例越来越多的时候&#xff0c;用例维护起来就越来越麻烦&#xff0c;有没有好的方法来解决这种情况呢&#xff1f;我们可以将用例的数据存放在cs…

Java 线程的基本概念

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

《PySpark大数据分析实战》-10.独立集群模式的代码运行

&#x1f4cb; 博主简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是wux_labs。&#x1f61c; 热衷于各种主流技术&#xff0c;热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员&#xff08;PCTA&#xff09;、TiDB数据库专家&#xff08;PCTP…

【每日一题】反转二叉树的奇数层

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;广度优先搜索方法二&#xff1a;深度优先搜索 写在最后 Tag 【深度优先搜索】【广度优先搜索】【二叉树】【2023-12-15】 题目来源 2415. 反转二叉树的奇数层 题目解读 反转二叉树奇数层的节点。 解题思路 对于二叉…

ACL原理和配置

一.ACL概述 1.介绍 ACL 访问控制列表&#xff0c;可以通过对网络中报文流的精确识别&#xff0c;与其他技术结合&#xff0c;达到控制网络访问行为、防止网络攻击和提高网络带宽利用率的目的&#xff0c;从而切实保障网络环境的安全性和网络服务质量的可靠性。 2.概述 ACL是…

半导体行业CRM选型推荐,引领企业升级

随着半导体材料行业的快速发展&#xff0c;企业面临着越来越多的挑战。在这个高度竞争的市场中&#xff0c;如何提高销售管理效率、降低成本、优化资源配置成为各企业亟待解决的问题。而引入CRM系统则可以为企业提供一整套信息化解决方案&#xff0c;推动半导体材料行业的持续发…

YOLOv8改进 | 2023Neck篇 | 利用RepGFPN改进特征融合层(附yaml文件+添加教程)

一、本文介绍 本文给大家带来的改进机制是Damo-YOLO的RepGFPN&#xff08;重参数化泛化特征金字塔网络&#xff09;&#xff0c;利用其优化YOLOv8的Neck部分&#xff0c;可以在不影响计算量的同时大幅度涨点&#xff08;亲测在小目标和大目标检测的数据集上效果均表现良好涨点…

typescript 实现Optional

我们先看下面的这段代码,一个学生接口,里面有成员id,name,age,gender等等成员, 有一个方法graduate,里面要接受一个Student类型的实参 interface Student {id: numbername: stringage: numbergender: string}function graduate(Student: Student) {//...}现在有一个问题,就是学…