js将搜索的关键字加颜色

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.mzph.cn/news/50399.shtml

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

相关文章

vscode+ros开发环境搭建

目录 介绍 前提 vscode安装 vscode插件安装 工作空间准备 打开vscode 创建catkin包 编写cpp代码 编译 运行 启动ros服务 监听话题 启动ros测试 介绍 ros开发是机器人开发中必不可少的工作&#xff0c;语言选择可以是c,也可以是python。工具的话&#xff0c;不能像wi…

基于YOLOv8模型的五类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的五类动物目标检测系统可用于日常生活中检测与定位动物目标&#xff08;狼、鹿、猪、兔和浣熊&#xff09;&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与…

Github 博客搭建

Github 博客搭建 准备工作 准备一个 github 账号建立 github 仓库&#xff0c;仓库名为 username.github.io设置仓库为 publicclone 仓库&#xff0c;写入一个 index.html 文件&#xff0c;推送到仓库&#xff08;许多网上的教程会有 choose theme&#xff0c;但是新版本的 g…

「Java」《Java集合框架详解:掌握常用集合类,提升开发效率》

Java集合框架详解&#xff1a;掌握常用集合类&#xff0c;提升开发效率 摘要&#xff1a;一、 引言1.1 Java 集合框架的作用和重要性&#xff0c;在开发中的应用场景 二. 集合框架概述2.1 集合框架的基本目标和设计思想2.2 层次结构图示&#xff0c;各个集合接口之间的关系 三.…

AI 绘画Stable Diffusion 研究(十四)SD 图生图+剪映制作人物说话视频

大家好&#xff0c;我是风雨无阻。 前一篇&#xff0c;我们详细介绍了使用 SadTlaker制作数字人视频案例&#xff0c;感兴趣的朋友请前往查看:AI 绘画Stable Diffusion 研究&#xff08;十三&#xff09;SD数字人制作工具SadTlaker使用教程。 对于没有安装 SadTlaker 插件的朋友…

CH583/2构建工程教程

CH583/2构建工程教程 绪论资源移植步骤准备移植步骤一步骤二 工程配置修改工程名修改前修改后 工程配置修改资源文件 修改C/C general修改C/C构建修改汇编交叉编译修改C交叉编译修改GNU RISC-V Cross Linker 修改跟编译 移植注意事项 绪论 资源 CH583/2的SDK下载 移植步骤 …

Java课题笔记~ 整合第三方技术

1. 整合JUnit 问题导入 回忆一下Spring整合JUnit的步骤&#xff1f; 1.1 Spring整合JUnit&#xff08;复习&#xff09; 1.2 SpringBoot整合JUnit 【第一步】添加整合junit起步依赖(可以直接勾选) <dependency><groupId>org.springframework.boot</groupId…

flutter对数组中某个数据二次加工成单独的数组

如何将数据[2,1,2,2,2,1,2,2,3,2,2,2,2,3,2,2,2,2,2,3,2,4,2,2,1,2,3,2,4,2]加工成 [[2], 1, [2, 2, 2], 1, [2, 2], 3, [2, 2, 2, 2], 3, [2, 2, 2, 2, 2], 3, [2], 4, [2, 2], 1, [2], 3, [2], 4, [2]]。这是实际工作中遇到的问题&#xff0c;UI要求将某一类型数据&#xff…

Android View截屏长图拼接(RecyclerView)

Android页面View截图&#xff08;分享、保存相册&#xff09; Android View 截屏上下拼接 Android View截屏长图拼接&#xff08;RecyclerView&#xff09; Android View截屏长图拼接&#xff08;NestedScrollView&#xff09; RecyclerView截屏&#xff0c;其实就是遍历每…

前端实习day30

今天又是一个繁忙的一天&#xff0c;加功能&#xff0c;改样式&#xff0c;改得头皮发麻&#xff0c;预定的任务还是没能完成&#xff0c;改起来真得太头疼&#xff0c;代码太乱了&#xff01;&#xff01;昨天那个bug&#xff0c;今天问了一下同事&#xff0c;不到五分钟就解决…

无涯教程-PHP - intval() 函数

PHP 7引入了一个新函数 intdiv()&#xff0c;该函数对其操作数执行整数除法并将该除法返回为int。 <?php$valueintdiv(10,3);var_dump($value);print(" ");print($value); ?> 它产生以下浏览器输出- int(3) 3 PHP - intval() 函数 - 无涯教程网无涯教程网…

nodejs根据pdf模板填入中文数据并生成新的pdf文件

导入pdf-lib库和fontkit npm install pdf-lib fs npm install pdf-lib/fontkit 具体代码 const { PDFDocument, StandardFonts } require(pdf-lib); const fs require(fs); const fontkit require(pdf-lib/fontkit) let pdfDoc let font async function fillPdfForm(temp…

Ubuntu Touch OTA-2 推出,支持 Fairphone 3 和 F(x)tec Pro1 X

导读UBports 基金会近日宣布为基于 Ubuntu 20.04 LTS (Focal Fossa) 的 Ubuntu Touch 移动操作系统发布并全面提供 OTA-2 软件更新。 Ubuntu Touch OTA-2 在首次 OTA 更新整整四个月后发布&#xff0c;支持新设备&#xff0c;包括 Fairphone 3、F(x)tec Pro1 X 和 Vollaphone X…

Ubuntu部署PHP7.4

系统版本&#xff1a;Ubuntu22.04 PHP版本: 7.4 Mysql版本&#xff1a;8.0 Nginx版本: 最新 1. 更新系统 首先&#xff0c;确保系统包是最新的&#xff1a; sudo apt update && sudo apt upgrade -y2. 安装 Nginx Nginx 在默认的 Ubuntu 仓库中&#xff0c;因此安装…

libdrm全解析八 —— 源码全解析(5)

接前一篇文章&#xff1a;libdrm全解析七 —— 源码全解析&#xff08;4&#xff09; 本文参考以下博文&#xff1a; DRM 驱动程序开发&#xff08;VKMS&#xff09; 特此致谢&#xff01; 本文继续对include/drm/drm.h中实际功能宏定义进行讲解。 7. DRM_IOCTL_GET_STATS …

HarmonyOS开发第一步,熟知开发工具DevEco Studio

俗话说的好&#xff0c;工欲善其事&#xff0c;必先利其器&#xff0c;走进HarmonyOS第一步&#xff0c;开发工具必须先行&#xff0c;当然了&#xff0c;关于开发工具的使用&#xff0c;官网和其他的博客也有很多的讲解&#xff0c;但是并没有按照常用的功能进行概述&#xff…

C++信息学奥赛2049:【例5.19】字符串判等

这段代码的功能是比较两个输入的字符串是否相等&#xff08;忽略大小写和空格&#xff09;&#xff0c;并输出 “YES” 或 “NO”。 解析注释后的代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {string arr; // 定义字符串变量arr&…

solidity0.8.0的应用案例9:代理合约

代码由OpenZeppelin的Proxy合约简化而来。 代理模式 Solidity合约部署在链上之后,代码是不可变的(immutable)。这样既有优点,也有缺点: 优点:安全,用户知道会发生什么(大部分时候)。坏处:就算合约中存在bug,也不能修改或升级,只能部署新合约。但是新合约的地址与…

Hive 导入csv文件,数据中包含逗号的问题

问题 今天 Hive 导入 csv 文件时&#xff0c;开始时建表语句如下&#xff1a; CREATE TABLE IF NOT EXISTS test.student (name STRING COMMENT 姓名,age STRING COMMENT 年龄,gender STRING COMMENT 性别,other_info STRING COMMENT 其他信息 ) COMMENT 学生信息表 ROW FORM…

T362598 Glaciaxion

Glaciaxion 题目描述 冰封的世界可以看作是 $ n $ 块初始时冷冻的冰川&#xff0c;这些冰川被编号为 1 ∼ n 1 \sim n 1∼n。 探测器抵达后的 $ m $ 秒&#xff0c;每秒都会探测到一块冰川融化。 当一块冰川第一次融化时&#xff0c;探测器返回 N&#xff0c;否则返回 Y。…