JS搜索关键字匹配变色

使用场景:用户通过搜索关健字(keyword),对文本进行匹配,并对匹配到的文本进行一些高亮处理

解析:使用的是JavaScript中的 RegExp(正则表达式)对象,var regExp = new RegExp(keyword,'g');

// keyword:是关键字, 
g:执行全局匹配,如果不输入的话将会查一条,
i:执行大小写不敏感匹配,
m:执行多行匹配

详细代码:

1、使用原始的匹配项(match)来保持大小写。也就是说,关键字会匹配到文本的内容,同时文本的内容是不更改的

         brightenKeyword(val, keyword) {const Reg = new RegExp(keyword, 'gi');if (val) {const res = val.replace(Reg, (match) => {// 使用原始的匹配项(match)来保持大小写return `<span style="color: #0D77E2;">${match}</span>`;});return res;}},

2、不保持匹配文本的大小写。也就是说文本内容是需要更改的。

            brightenKeyword(val, keyword) {const Reg = new RegExp(keyword, 'gi');if (val) {const res = val.replace(Reg, <span style="color: #0D77E2;">${keyword}</span>);return res;}},

html调用:(示例只以vue为主,原生JS的话调用方法即可):

<text class="sList-info-title text-ellipsis" v-html="brightenKeyword('被匹配的文本',keyword)"></text>

好了,以上就可以获得简单的高亮处理了。

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

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

相关文章

银河麒麟操作系统修改dns(唯一一篇可以解决DNS生效问题)

背景: Kylin V10 SP1 系统修改dns 1.修改/etc/resolv.conf 临时生效,不满足生产要求 2.修改/etc/network/interface 不生效 3.修改/etc/systemd/resolved.conf,遇到问题,最终解决永久修改DNS 系统版本: root@node01:~# cat /etc/issue Kylin V10 SP1 \n \l 一、如何在…

BLIP 算法阅读记录---一个许多多模态大语言模型的基本组件

论文地址&#xff1a;&#x1f608; 目录 一、环境配置以及数据集准备 数据集准备 数据集格式展示 环境配置&#xff0c;按照官网所述即可 二、一些调整 vit_base的预训练模型 远程debug的设置 Tokenizer初始化失败 读入网络图片的调整 三、训练过程 Image Encoder …

FebHost:英国.UK域名注册使用中存在哪些侵权行为?

截至2023年6月&#xff0c;英国.uk域名作为全球第五大热门顶级域名&#xff0c;注册数量超过1100万&#xff0c;成为全球最知名和广泛使用的域名之一。英国域名家族包括四个独特的域名后缀——.uk、.co.uk、.org.uk 和 .me.uk——每个都有其独特的特点&#xff0c;并根据数字领…

Mac下用adb命令安装apk到android设备笔记

查询了些资料记录备用。以下是在Mac上使用命令行安装APK文件的步骤&#xff1a; 1. 下载并安装ADB&#xff1a; 如果您的Mac上没有安装ADB&#xff0c;请从官方的Android开发者网站下载Android SDK Platform Tools&#xff1a;Android SDK Platform Tools。将下载的ZIP文件解…

python使用Flask框架开发API

Flask是一个基于Python的轻量级Web应用程序框架。 安装依赖库 pip install flask pip install werkzeug 上传接口 Python from flask import Flask, request from werkzeug.utils import secure_filenameapp Flask(__name__)app.route(/upload, methods[POST]) def uploa…

三次 Bspline(B样条曲线) NURBS曲线的绘制 matlab

先来了解几个概念&#xff1a; 1.1 节点向量&#xff1a; B-Spline需要定义曲线的节点向量U&#xff0c;它可以对应到Bezier曲线的参数u。 其元素个数 (m1) 和曲线阶数 k 、控制点个数n满足&#xff1a;m1k1n1 如果U的每段的距离是相等&#xff0c;那么这个B-Spline就被称为均…

关于UCG游戏平台的一些思考

UCG游戏平台&#xff0c;全称User Generated Content&#xff0c;即用户生成内容。它涵盖了所有玩家可以自主编辑的部分&#xff0c;包含并不限于换装、捏脸、关卡摆放等内容。 UCG概念在最近又火了起来&#xff0c;但这个模式出现的并不早。早在10多年前&#xff0c;war3编辑器…

Qt事件处理机制1-事件过滤器

事件在到达某个具体的对象前&#xff0c;可以通过事件过滤器进行筛选处理&#xff0c;函数定义如下&#xff1a; virtual bool eventFilter(QObject *watched, QEvent *event);Qt帮助文档: Filters events if this object has been installed as an event filter for the watc…

记录kafka-flink-kafka的end-to-end的exactly-once语义

记录kafka-flink-kafka的end-to-end的exactly-once语义 步骤代码 步骤 开启checkpoint、stateBackend的设置和checkpoint配置设置kafka source的配置读取kafka source message随意的transformation&#xff1b;并打印结果kafka sink端的配置输出到kafka sink端执行 代码 pac…

为linux和windows系统备份还原点,防止系统出问题无法恢复

一、linux系统操作办法&#xff1a; sudo apt update sudo apt install timeshift timeshift --create 输出结果如下&#xff1a; 等待约5分钟就会创建成功&#xff1a; 这个备份功能只备份系统&#xff0c;不备份文件&#xff0c;但也不会删除文件。 工作站系统的保存位置&a…

Win10安装sqlplus遇到报错的解决办法

1.下载安装sqlplus.exe的错误解决过程 最近有用到sqlplus连接Oracle数据库执行自动化脚本&#xff0c;Orcle服务器版本是11.2.0.1。在Navicat工具上通过如下语句查询到的版本信息截图如图1所示&#xff1a; SELECT * FROM v$version; 图1 Oracle服务器版本信息 其中“Oracle Da…

Docker部署SpringBoot+Vue前后端分离项目

文章目录 1. 安装Docker1. 1 卸载旧版Docker1.2 配置yum仓库1.3 安装Docker1.4 添加自启动配置1.5 配置阿里云镜像加速1.6 测试 2. 安装Nginx2.1 拉取镜像2.2 安装Nginx2.3 测试 3. 安装MySQL3.1 拉取镜像3.2 安装MySQL3.3 连接MySQL 4. 部署SpringBoot项目4.1 Maven打包4.2 编…

深度学习Vue框架生命周期(三)

一.什么是生命周期&#xff1f; 在vue中&#xff0c;生命周期就是vue实例程序从创建到销毁的这个过程&#xff0c;在生命周期中&#xff0c;不同阶段我们可以做不同的事情。vue的生命周期是创建阶段、挂载阶段、更新阶段、销毁阶段 二.什么是钩子函数&#xff1f; 钩子函数就是…

常用网络状态码以及含义

以下是常见的网络状态码及其含义&#xff1a; 1xx&#xff08;信息类状态码&#xff09;&#xff1a; 100 Continue&#xff1a;继续。服务器已经收到客户端的部分请求&#xff0c;客户端可继续发送请求。101 Switching Protocols&#xff1a;切换协议。服务器正在根据客户端…

数据库数据恢复—Sql Server数据库文件丢失如何恢复数据?

服务器数据恢复环境&#xff1a; 一台安装windows server操作系统的服务器。一组由8块硬盘组建的RAID5&#xff0c;划分LUN供这台服务器使用。 在windows服务器内装有SqlServer数据库。存储空间LUN划分了两个逻辑分区。 服务器故障&初检&#xff1a; 由于未知原因&#xf…

Windows联网状态工具TCPView

文章目录 TCPView命令行工具更多Sysinternals Suite工具 TCPView TCPView用于显示系统上所有 TCP 和 UDP 终结点的详细列表&#xff0c;包括本地和远程地址以及 TCP 连接的状态&#xff0c;界面如下。 列表的表头含义如下 表头含义表头含义Process name应用名称Process id进程…

浅谈:从医疗元宇宙向更多实业领域的拓展

近年来&#xff0c;在各大媒体的持续曝光下&#xff0c;元宇宙这一新兴赛道受到全球资本市场的热烈追捧。更多的品牌方开始持续进军元宇宙领域营销&#xff0c;从限量 NFT 盲盒到多元游戏化场景&#xff0c;再到 VR 创意互动装置的出现&#xff0c;元宇宙市场正不断推陈出新&am…

最新Android Studio导入aar包的方法

以前的方式&#xff0c;目前看网上也大多数都是这种方式&#xff0c;导致我本地加的时候一直有问题 但是这样都无法sync以及编译通过&#xff0c;因为方式已经变了 1&#xff1a;将aar文件复制到MyApplication\app\libs下 2&#xff1a;在MyApplication\app\build.gradle下添加…

结构化面试-应急应变题

例题&#xff1a; 你是景区的工作人员&#xff0c;你在巡逻时听到游客在抱怨景区很大&#xff0c;找不到厕所&#xff0c;工作人员 态度也很恶劣&#xff0c;以后再也不来了&#xff0c;这时还有其他游客也在旁边附和&#xff0c;你怎么办&#xff1f; 回答&#xff1a;&…

oninput 和 onchange 事件的区别

oninput 和 onchange 是两个常用于处理表单元素&#xff08;如输入框、选择框等&#xff09;的 JavaScript 事件。它们的主要区别在于触发时机和触发频率。 oninput 事件 oninput 事件在用户输入内容时触发&#xff0c;这意味着每当用户在输入框中键入、删除或粘贴字符时&…