多关键词高亮显示

news2024/11/25 3:07:53

引入关键词文件,符合有条件的背景色高亮显示,也可取消。

 <div id="testHtml">
     <p>写入的文本</p>
     <p>关键词</p>
 </div>
var str ='多个关键词,关键词文件,关键词'
var strL = str.replace(/,/g,'|')     //将关键词用竖线分割
function btnClick(){
    var Htmlstr = $("#testHtml").html()
    var reg = new RegExp('('+strL+')', 'g')
    $("#testHtml").html( Htmlstr.replace(reg,`<span style="background-color:#EEC900;">$1</span>`) )
}


function removeBtnClick(){
    var Htmlstr = $("#testHtml").html()
    var reg = new RegExp('<span style="background-color:#EEC900;">(' + strL + ')</span>','gm')
    $("#testHtml").html( Htmlstr.replace(reg,`$1`) )
}

第二种方式,多种颜色高亮显示

var colors =  [
        "#ef0c0c",
        "#EEC900",
        "#9F79EE",
        "#FFC1C1"
    ]


var keywordsdetail= []
    keywordsdetail = str.split(',')


function  highlight(str,params) {
        var reg=new RegExp(("("+params.keys+")"),"gm");
        var color=params.color || '#f00';
        var replace='<span style="background-color:'+color+';">'+params.keys+'</span>';
        return str.replace(reg,replace);
    }
function btnClick(){//显示多种颜色关键词高亮按钮
        for(var i=0;i<keywordsdetail.length;i++){
            var params={
                keys:keywordsdetail[i],
                color:colors[i]
            }
            
            $("#testHtml").html(highlight($("#testHtml").html(),params));
        }
 }

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

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

相关文章

批量修改视频尺寸:简单易用的视频剪辑软件教程

如果你需要批量修改视频尺寸&#xff0c;同时保持高质量的画质&#xff0c;那么“固乔剪辑助手”这款软件是你的不二之选。下面就是如何使用这款软件进行批量修改视频尺寸的详细步骤。 1. 首先&#xff0c;你需要在浏览器中进入“固乔科技”的官网&#xff0c;然后下载并安装“…

美客多、亚马逊卖家如何运用自养账号进行有效测评?

到了10月&#xff0c;卖家朋友们都在忙着准备Q4旺季吧&#xff01; 首先&#xff0c;祝愿所有看到这条推文的卖家朋友&#xff0c;今年旺季都能爆单&#xff0c;赚得盆满钵满&#xff01; 测评是珑哥常谈&#xff0c;一直备受关注&#xff0c;不论是新老卖家都是一个逃不开的…

用低代码打造CRM系统 实现客户个性化管理

CRM管理思想伴随着互联网和电子商务的大潮进入中国&#xff0c;对企业经营管理理念产生了巨大的冲击&#xff0c;使中国企业逐步树立起与世界接轨的客户关系管理理念。中国CRM市场的萌芽阶段大约始于2000年&#xff0c;而到2010年前后&#xff0c;中国市场上争相涌现了一大批CR…

什么是美体SDK?美摄美颜美体SDK对接开发指南

在当今的数字世界中&#xff0c;人们对自我表达和形象展示的需求越来越高。美体SDK应运而生&#xff0c;为用户提供了一种全新的美颜美体体验&#xff0c;让每一个人都能享受到个性化的美丽与自信。 一、美体SDK的特点 轻量级&#xff1a;美体SDK体积小巧&#xff0c;不会对用…

掌握音乐创作的终极利器:Avid Sibelius Ultimate for Mac /Windows

如果您是一位热爱音乐创作的人&#xff0c;无论是作曲家、编曲家、指挥家还是学生&#xff0c;那么您一定需要一款功能强大、专业可靠的乐谱制作软件。现在&#xff0c;让我向您介绍Avid Sibelius Ultimate&#xff0c;这是音乐界顶级的乐谱制作软件&#xff0c;它将成为您创作…

docker部署多个node-red操作过程

docker部署多个node-red操作过程 一、docker安装教程二、docker安装node-red2.1 拉取镜像2.2 创建目录并分配权限 三、 docker操作node-red3.1 部署node-red3.2 查看\关闭\删除容器 四、Docker删除Redis镜像 回到目录 一、docker安装教程 【docker使用安装教程】 回到目录 …

(SCADA)监控与数据采集系统

SCADA应用于监控和采集数据来控制工业过程软件。它通过收集和传输实时数据&#xff0c;帮助操作员监视和控制各种设备和过程。这篇文章将介绍SCADA系统的工作原理、应用行业和场景&#xff0c;以及所需的模块和硬件设备。最后&#xff0c;还会详细介绍几款国外SCADA软件给大家参…

ARouter路由框架

序、时间于同样的方式留经我们每个人&#xff0c;每个人却以不同的方式对待时间。 前言 一个用于帮助 Android App 进行组件化改造的框架 —— 支持模块间的路由、通信、解耦 1.原理解析 1.1初始化 使用ARouter在进行Activity跳转非常简单&#xff1a;初始化ARouter、添加注…

武汉凯迪正大—全自动变比测试仪

产品介绍 武汉凯迪正大KDB-IV全自动变比组别测试仪可有效监督变压器产品出厂及使用过程中的质量&#xff0c;防止变压器匝间短路&#xff0c;开路&#xff0c;连接错误&#xff0c;调压开关内部故障或接触故障。 KDB-IV全自动变比组别测试仪在原基础上根据用户的现场使用要求…

【Android】adjustViewBounds 的理解和使用

理解 adjustViewBounds 是一个 ImageView 的属性&#xff0c;用于调整 ImageView 的边界以适应图像的尺寸。当设置为 true 时&#xff0c;ImageView 的边界将根据图像的宽高比例进行调整&#xff0c;以确保图像完全显示在 ImageView 内部。 理解和使用 adjustViewBounds 的步…

推荐一些网络安全的网站和论坛

今天小编给大家推荐一批网络安全的网站和论坛&#xff0c;想学习网络安全技术的朋友们可以去这些网站看看&#xff1a; 1、红黑联盟 红黑联盟论坛 网址&#xff1a;bbs.2cto.com 2、安全客 一个提供网络安全资讯的网站 网址&#xff1a;www.anquanke.com 3、T00ls T00ls是…

为什么说互联网是最坏的行业

犹如春心萌动&#xff0c;想来写点东西。最近突然想通了很多事&#xff0c;以前老逼着自己拼命的挣钱&#xff0c;放弃了一切私生活&#xff0c;没有朋友&#xff0c;没有聚会&#xff0c;连逛街都认为是浪费时间和生命。确实挣了一些钱&#xff0c;以为自己会开心会快乐&#…

易点易动固定资产管理系统:高效完成固定资产盘点任务

固定资产盘点是企业管理中不可或缺的重要环节。然而&#xff0c;传统的固定资产盘点方式往往效率低下、易出错&#xff0c;给企业带来不必要的麻烦和成本。为了解决这一问题&#xff0c;易点易动固定资产管理系统应运而生。本文将详细介绍易点易动固定资产管理系统在固定资产盘…

完美解决word转pdf(亲测有效)

word搞了一天,找了无数的资料,以下这种方法是最好的。。。什么只能转3页了。。。什么字体库了。。。。各种坑 就三步: 第一步:下载jar包,然后放在这里 第二步:引入jar包,放在pom.xml文件 <dependency><groupId>com.aspose</groupId><artifact…

向世界展示“中国品牌”实力,中海达参展INTERGEO

10月10日-12日&#xff0c;全球测绘地理信息行业最权威的盛会INTERGEO在德国柏林举行。本次展会以“Inspiration for a smarter world”&#xff08;灵感碰撞&#xff0c;为更智慧的世界&#xff09;为主题&#xff0c;这与参展的中海达企业愿景“让万物位置更精准&#xff0c;…

【Linux】线程安全问题①——如何实现资源访问互斥(附图解与代码实现)

线程安全主要分为两个方面&#xff0c;分别是资源访问互斥与线程同步&#xff08;线程协同配合&#xff09; 本篇博客&#xff0c;我们主要来讲解资源访问互斥这一方面 目录 为什么要实现资源访问互斥&#xff1f; 实现资源访问互斥&#xff08;原子访问&#xff09;的经典…

JMeter连接数据库

一. 下载数据库驱动jar包 https://jdbc.postgresql.org/download/ 二. 将数据库驱动放到jmeter的lib目录下 三. 在jmeter中引用这个jar包 四. 添加一个jdbc数据库连接配置 五. 添加一个jdbc request来查询sql并将查询结果赋值给一个变量 六. 将查询结果用于其他请求

fico入门基础

Fico模块 会计主体一般为公司法人 分公司不算一个会计主体 分公司上金融中心 子公司会算一个会计主体 子公司上公司代码 会计期间:就是会计会一个期间结算一次(一般为一个月结算一次)(不同国家的快递期间起点会有不同;如日本四月份为第一个快递期间,三月份为第十二个快递期…

OTN较WDM系统的 升级功能

文章目录 1、增加运维规则&#xff0c;具体措施是增加了帧结构&#xff0c;提升业务的监控管理运维能力。2、增加电交叉功能&#xff0c;使得OTN系统可以分别处理客户业务信号和波分信号。 OTN较WDM系统的 升级功能主要表现在下面两方面&#xff1a; 1、增加运维规则&#xff0…

驾校倒闭了这么多,凭什么我能活下来,因为有云表利剑

因为部门场地比较分散&#xff0c;学员名单都是通过wps传递&#xff0c;但是某个部门更新学员信息时&#xff0c;其他部门无法实时共享更新&#xff0c;导致其他部门无法掌握学员最新信息&#xff0c;为学员提供制定服务。用了云表后学员只需在一个部门办一次业务&#xff0c;其…