当前位置: 首页 > news >正文

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

相关文章:

React实现关键字高亮

先看效果&#xff1a; 实现很简单通过以下这个函数&#xff1a; highLight (text, keyword ) > {return text.split(keyword).flatMap(str > [<span style{{ color: red, fontWeight: bold }}>{keyword}</span>, str]).slice(1);}展示某段文本时调用该函数…...

react-media如何使用

介绍 react-media 是 React 中用于响应式设计的一个很好的库。它可以用于在视口宽度满足特定条件时渲染组件。 主要功能包括: 媒体查询:通过 minWidth, maxWidth 和 width 等设置媒体查询条件。 渲染组件:当媒体查询条件匹配时渲染子组件。 默认样式:可以设置默认渲染的组件。…...

多进程利用TCP进行信息群发功能

/服务器的代码 #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include <unistd.h> #include <string.h> #include <stdio.h> #include <stdlib.h> #define SEVER_IP &quo…...

git 报错 protocol ‘https‘ is not supported解决

报错原因&#xff1a;选择不了其他分支代码&#xff0c;甚至都看不到其他分支&#xff0c;我这边解决了两次报错&#xff0c;情况如下&#xff1a; 第一种报错&#xff1a; idea中刷新分支报错如下&#xff1a; Fetch Failed protocol https is not supported 话不多说&#…...

启动RocketMQ报错

说明&#xff1a;启动RocketMQ消费者时&#xff0c;报以下错误&#xff1a;java.lang.IllegalStateException&#xff1a;Failed to start RocketMQ push consumer. 解决&#xff1a;看下所有的监听器类&#xff0c;检查是不是有相同的消费者组名&#xff0c;注释掉其中一个即可…...

【Spring Boot系列】-Spring Boot过滤器Filter

【Spring Boot系列】-Spring Boot过滤器Filter 文章目录 【Spring Boot系列】-Spring Boot过滤器Filter一、概述二、Filter&#xff08;过滤器&#xff09;数据流程三、Spring Boot 过滤器生命周期四、使用注解方式实现过滤器(WebFilter)4.1. 在springboot 启动类添加该注解Ser…...

Leetcode-每日一题【剑指 Offer 14- I. 剪绳子】

题目 给你一根长度为 n 的绳子&#xff0c;请把绳子剪成整数长度的 m 段&#xff08;m、n都是整数&#xff0c;n>1并且m>1&#xff09;&#xff0c;每段绳子的长度记为 k[0],k[1]...k[m-1] 。请问 k[0]*k[1]*...*k[m-1] 可能的最大乘积是多少&#xff1f;例如&#xff0…...

【图论】单源最短路问题

Dijkstra算法 -- 这是我职业生涯中唯一一个会写&#xff0c;却叫不上名字的算法 Dijkstra算法是一种单源最短路径算法&#xff0c;用于找出图中从一个源点到其他所有点的最短路径。该算法的原理是采用贪心策略&#xff0c;每次将距离源点最近的点加入到已确定最短路径的集合中…...

物理层扩展以太网

扩展站点与集线器之间的距离&#xff1a;   在10BASE-T星型以太网中&#xff0c;可使用光纤和一对光纤调制解调器来扩展站点与集线器之间的距离。   为站点和集线器各增加一个用于电信号和光信息号转换的光纤调制解调器&#xff0c;以及他们之间的通信光纤。 扩展共享式以太…...

Llama 2 with langchain项目详解(一)

Llama 2 with langchain项目详解(一) 2023年2月25日,美国Meta公司发布了Llama 1开源大模型。随后,于2023年7月18日,Meta公司发布了Llama 2开源大模型,该系列包括了70亿、130亿和700亿等不同参数规模的模型。相较于Llama 1,Llama 2的训练数据增加了40%,上下文长度提升至…...

IDEA全局设置MyBatis中写SQL语句提示

把这两个设置改成MySQL即可&#xff1a;...

Linux 内存管理

顾名思义&#xff0c;Liunx内存管理子系统在系统中负责管理内存。它包括虚拟内存管理、段与页的实现、内核态与用户空的空间分配、将文件映射到进程空间等&#xff0c;很多很多酷炫的功能。 Linux内存管理是一个非常复杂的系统&#xff0c;它有非常多的可配置项。大部份这些配置…...

oracle怎样给某个普通用户授予杀自己用户会话的权限

一 问题描述 想给某个普通用户授予杀掉自己会话的权限 二 解决办法 2.1 用sys用户创建杀会话的存储过程 create or replace procedure scott_p_kill_session( v_sid number, v_serial number )asv_varchar2 varchar2(100);beginif v_sid is not null and v_serial is not n…...

redis的主从复制,哨兵和cluster集群

目录 一、redis的高可用 1&#xff09;redis高可用的概念 2&#xff09;Redis的高可用技术 二、redis主从复制 1&#xff09;主从复制的作用 2&#xff09;主从复制流程 三、redis一主二从的部署 实验组件 实验步骤 环境准备 修改内核参数 安装 Redis 创建redis工…...

Crowd-Robot Interaction 论文阅读

论文信息 题目&#xff1a;Crowd-Robot Interaction:Crowd-aware Robot Navigation with Attention-based Deep Reinforcement Learning 作者&#xff1a;Changan Chen, Y uejiang Liu 代码地址&#xff1a;https://github.com/vita-epfl/CrowdNav 来源&#xff1a;arXiv 时间…...

什么是LIMS系统,LIMS实验室管理系统

LIMS是实验室信息管理系统&#xff0c;全称是Laboratory Information Management System&#xff0c;是将以数据库为核心的信息化技术与实验室管理需求相结合的信息化管理工具。它是由计算机硬件和应用软件组成&#xff0c;能够完成实验室数据和信息的收集、分析、报告和管理&a…...

Python Opencv实践 - 图像属性相关

import numpy as np import cv2 as cv import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) plt.imshow(img[:,:,::-1])#像素操作 pixel img[320,370] print(pixel)#只获取蓝色通道的值 pixel_blue img[320,370,0]…...

PCB制造中铜厚度的重要性

电子产品中的PCB是现代电子设备中不可或缺的一部分。在PCB制造过程中&#xff0c;铜厚度是一个非常重要的因素。正确的铜厚度可以保证电路板的质量和性能&#xff0c;同时也影响着电子产品的可靠性和稳定性。 一般我们常见的铜厚有17.5um&#xff08;0.5oz&#xff09;&#x…...

浅谈高校宿舍水电表远程智能管理的研究与应用

安科瑞 华楠 摘要&#xff1a;本系统的设计是基于485总线技术与TCP/IP网络技术相结合的方式来实现的&#xff0c;充分考虑了目前高校后勤水电表管理控制的实际情况&#xff0c;以传输可靠性高、技术成熟、成本低的485总线技术为基础&#xff0c;并与应用广泛的TCP/IP网络相结合…...

无货源跨境电商购物平台快速搭建(微商城、小程序、APP、网站)

无货源跨境电商购物平台的快速搭建可以通过以下步骤完成&#xff0c;并且可以同时开发微商城、小程序、APP和网站以满足不同用户的需求。 第一步&#xff1a;需求分析 在搭建之前&#xff0c;需要对平台的需求进行详细的分析。包括用户需求、功能需求、技术需求等等。这一步是…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...