js将搜索的关键字加颜色

news2024/12/28 23:58:30

js将搜索的关键字加颜色

使用正则匹配关键字并加入span标签,页面渲染时使用v-html渲染即可

// 文本框内容
let searchCont = '测试';

const reg = new RegExp(`(${searchCont.value})`, 'g');
let data = '图片保存测试A';
data= data.replace(reg, `<span style="color:#ff0000">${searchCont}</span>`);

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【N年测试总结】测试的分类

一、概述 测试的分类一般有按照测试的内容进行划分和按照测试阶段划分两种大的方式。 按测试内容划分 1、需求测试 2、单元测试 3、接口测试 4、功能测试 5、UI自动化测试 6、性能测试 7、测试开发 按测试阶段划分 1、需求测试 2、单元测试 3、集成测试 4、系统测试 5、验…

C 连接MySQL8

Linux 安装MySQL 8 请参考文章&#xff1a;Docker 安装MySQL 8 详解 Visual Studio 2022 编写C 连接MySQL 8 C源码 #include <stdio.h> #include <mysql.h> int main(void) {MYSQL mysql; //数据库句柄MYSQL_RES* res; //查询结果集MYSQL_ROW row; //记录结…

回归预测 | MATLAB实现BES-ELM秃鹰搜索优化算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现BES-ELM秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现BES-ELM秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效…

【学会动态规划】最长递增子序列的个数(28)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

Spring Boot 事务和事务传播机制

1. 为什么需要事务? 事务定义 将一组操作封装成一个执行单元 (封装到一起)&#xff0c;这一组的执行具备原子性, 那么就要么全部成功&#xff0c;要么全部失败. 为什么要用事务? 比如转账分为两个操作: 第一步操作:A 账户-100 元。 第二步操作:B账户 100 元。 如果没有事务&a…

【WinForm】WebView2-个性化浏览器-桌面程序开发详解

这是一个桌面程序上的浏览器&#xff0c;是用插件WebView2开发的浏览器桌面程序&#xff0c;功能体验堪比Edge浏览器&#xff0c;相比使用Chrome内核插件开发浏览器来说&#xff0c;还是用插件WebView2开发来得简单一些&#xff0c;接下来讲一讲实现过程。 开发之前&#xff0c…

Centos7部署Python程序详解

Centos7服务器部署Python 本文章前半部分为部署过程&#xff0c;后半部分为部署中碰到的问题及解决方案&#xff0c;仅供参考&#xff01;&#xff01;&#xff01;&#xff0c;本文示例为部署py文件为例。 部署步骤&#xff1a; 登录centos7服务器后 1.查看python版本 py…

Kotlin 高阶函数详解

高阶函数 在 Kotlin 中&#xff0c;函数是一等公民&#xff0c;高阶函数是 Kotlin 的一大难点&#xff0c;如果高阶函数不懂的话&#xff0c;那么要学习 Kotlin 中的协程、阅读 Kotlin 的源码是非常难的&#xff0c;因为源码中有太多高阶函数了。 高阶函数的定义 高阶函数的…

CGAL 点云分类

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 点云分类一直是点云数据应用的永恒课题,它包含很多,如地面点分类、建筑物分类、植被分类等。CGAL中也为我们提供了一种点云分类的方式,其具体的计算过程如下所述: 首先,使用点云中所携带的一些几何特征来对数据…

三、数据库索引

1、索引介绍 索引是一种用于快速查询和检索数据的数据结构&#xff0c;其本质可以看成是一种排序好的数据结构。 常见的索引结构有&#xff1a;B数&#xff0c;B树&#xff0c;Hash和红黑树等。在MySQL中&#xff0c;无论是 InnoDB还是MyISAM&#xff0c;都使用了B树作为索引…

西班牙卡瓦起泡酒的风味搭配

卡瓦是一种对食物友好的西班牙起泡酒&#xff0c;它的制作方法和香槟一样&#xff0c;可以和类似的食物搭配。卡瓦食物搭配包括各种食物&#xff0c;从海鲜和鱼到火腿&#xff0c;以及不同类型的小吃&#xff0c;也可以将卡瓦酒与甜点、水果和奶酪搭配。 卡瓦酒是世界上最著名的…

IDEA常用插件之注解插件

文章目录 注解插件JavaDoc插件安装修改配置生成文档加入自己信息 Easy JavaDoc安装插件在线安装离线安装中文名自动转英文加注释默认快捷键&#xff08;可通过IDEA快捷键设置修改&#xff09; 注解插件 JavaDoc插件 安装 修改配置 生成文档加入自己信息 Easy JavaDoc 中文文…

一种pug与html相互转换的工具

有时候看pug很不方便&#xff0c;这个语言虽然简洁&#xff0c;但可读性与维护性较差&#xff0c;所以需要进行转换&#xff0c;这个是win工具&#xff0c;比较方便。 这个工具的下载地址如下&#xff1a; https://download.csdn.net/download/qq_40032778/88244980 解压后如下…

PDFPrinting.Net Crack

PDFPrinting.Net Crack 它能够轻松灵活地预测完美的打印结果以及用户文件的示例性显示。在.NET的PDF打印中&#xff0c;可以快速浏览最关键的元素。如果用户需要获得更详细的概述&#xff0c;那么他可以查看快速入门手册&#xff0c;甚至现有文档的详细概述参考。 在这种情况下…

atxserver bug记录

8. 解决无法点击屏幕 原因&#xff1a;remotecontrol_android.html为按比例自动缩放&#xff0c;play.html&#xff08;Django&#xff09;显示的屏幕大小不会随页面放大缩小。有个h265方式获取的宽高是720*448&#xff0c;电脑上显示的大小是545*339&#xff0c;这个对不上&am…

理解机制,再探单元工厂的实现原理

最近有点忙,好久没更新文章了,今天继续再研究一下单元工厂的实现机制。为什么我们要这么重视这一块的内容呢?因为用计算机的目的是为了处理大量数据,如果数据量不大,大多情况下用纸就好了,专门用个计算设备的便捷性也就体现不出来。而大量数据的呈现方式的多样性精髓就在…

cuda编程002—流

没有使用同步的情况&#xff1a; #include <stdio.h> #include <cuda_runtime.h>__global__ void test_kernel(){printf("Message from Device.\n"); } void test(){test_kernel<<<1, 1>>>(); } #include <cuda_runtime.h> #i…

蓝蓝设计-UI设计公司作品-博晖创新原子吸收光谱仪软件交互及界面设计

博晖创新原子吸收光谱仪软件交互及界面设计 图标设计 | 交互设计 | 界面设计 博晖公司拥有强大的自主研发实力&#xff0c;建立了专业的研发团队&#xff0c;通过不断的技术创新&#xff0c;形成了分子诊断、免疫诊断、原子吸收、原子荧光及质谱五大技术平台&#xff0c;并成功…

ESP8266显示gif动态图,使用U8g2库

一.代码 #include <U8g2lib.h> //实现gif火柴人跑步动画// 定义GIF动画的帧数据 const unsigned char frame1[] {0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0…