多关键词高亮显示

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

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

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

相关文章

nginx报错

故障1&#xff1a;nginx 502错误 故障描述 一个 post 的请求&#xff0c;直接调接口服务数据正常返回&#xff0c;但是通过 nginx 代理后&#xff0c; 什么都没有返回 nginx错误日志 upstream sent invalid chunked response while reading upstream 原因 http协议版本不一致…

【C++】C++11—— 包装器

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C学习 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C】C11…

2023年中国TFT-LCD面板产业链、需求量及市场规模分析[图]

按显示技术尺寸来分&#xff0c;主要分为大尺寸和小尺寸&#xff08;10寸以下&#xff09;&#xff0c;TFT-LCD行业下游主要是各类型消费电子&#xff0c;包括PC显示器&#xff0c;液晶电视&#xff0c;智能手机等。 TFT&#xff0d;LCD面板产业链 资料来源&#xff1a;共研产…

【广州华锐互动】利用VR开展细胞基础实验教学有什么好处?

在科技发展的驱动下&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已被广泛应用于各个领域&#xff0c;包括教育和医学。尤其是在医学教育中&#xff0c;VR技术已成为一种革新传统教学模式的有效工具。本文将探讨使用VR进行细胞基础实验教学的优势。 首先&#xff0c;VR技…

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

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

VUE整合Echarts实现简单的数据可视化

文章目录 前言 一、Echarts的安装 二、可视化渲染 1.柱状图 2.饼图 3.主题的下载 总结 前言 ECharts是一款功能强大的前端数据可视化库&#xff0c;支持多种图表类型和统计图表、地理数据可视化、关系型数据展示、多维数据处理和商业智能功能。通过广泛的图表类型、统计分析…

FPGA面试题(5)

一.FPGA可以综合实现为RAM/ROM/CAM的三种资源及注意事项 三种资源&#xff1a;BLOCK RAM&#xff0c;触发器&#xff08;FF&#xff09;&#xff0c;查找表&#xff08;LUT&#xff09; 注意事项&#xff1a; 1.生成RAM&#xff0c;首选BLOCK RAM。因为BLOCK RAM是已经存在的“…

Springboot项目中加载Groovy脚本并调用其内部方代码实现

前言 项目中部署到多个煤矿的上&#xff0c;每一种煤矿的情况都相同&#xff0c;涉及到支架的算法得写好几套&#xff0c;于是想到用脚本实现差异变化多的算法&#xff01;一开始想到用java调用js脚本去实现&#xff0c;因为这个不需要引入格外的包&#xff0c;js对我来说也没…

测试需要写测试用例吗?

如何理解软件的质量 我们都知道&#xff0c;一个软件从无到有要经过需求设计、编码实现、测试验证、部署发布这四个主要环节。 需求来源于用户反馈、市场调研或者商业判断。意指在市场行为中&#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使用安装教程】 回到目录 …

NI GPIB-140A 使用缓冲传输技术 边缘人工智能

NI GPIB-140A 使用缓冲传输技术 边缘人工智能 GPIB总线扩展器—GPI b-140 a可以将GPIB系统的电缆长度延长一千米&#xff0c;而不会影响GPIB的完整性&#xff0c;也不需要修改软件。该配件使用缓冲传输技术&#xff0c;以高达1.1 Mb/s (IEEE 488.1)或2.8 Mb/s (HS488)的速率传…

安科瑞预付费系统在某大型连锁农贸市场的设计应用

安科瑞 崔丽洁 摘要 本远程预付费管理系统采用智能远程预付费电表&#xff08;DTSY1352-NK/DDSY1352-NK系列&#xff09;&#xff0c;NB智能远传水表&#xff0c;采集各商户实时用电量、用电量总数&#xff0c;通过平台定时结算&#xff0c;结算账户余额&#xff0c;从而进行智…

4d动感影院座椅5d动感影院体验馆大型7D互动影院

今天来讲一下市场上现在受欢迎的5d7d影院&#xff0c;组成部分&#xff0c;落地方案 5D影院的系统组成部分&#xff1a;1、动感座椅、2、投影幕(银幕)和投影机、3、音箱、4、各种的动感特效、5、5d影院眼镜&#xff0c;很简单的组成硬件&#xff0c;就可以组成一套的5d影院设备…

专题三:穷举、暴搜、深搜、回溯、剪枝【递归、搜索、回溯】

1、全排列 class Solution { public:vector<vector<int>> ret;vector<int> path;bool check[7];void dfs(vector<int>& nums){if(nums.size() path.size()) {ret.push_back(path);return;}for(int i 0;i < nums.size();i){if(check[i] fals…

HBase基础

HBase基础 参考 https://www.bilibili.com/video/BV1bC4y1b7Q1 HBase 简介 定义 HBase是一种分布式、可扩展、支持海量数据存储的NoSQL数据库(k-v)。 数据量越大&#xff0c;优势越明显&#xff1b;数据量小&#xff0c;比较消耗内存&#xff0c;耗资源&#xff1b;数据量大…

如何优雅的实现接口统一调用

耦合问题 有些时候我们在进行接口调用的时候&#xff0c;比如说一个push推送接口&#xff0c;有可能会涉及到不同渠道的推送&#xff0c;以我目前业务场景为例&#xff0c;我做结算后端服务的&#xff0c;会与金蝶财务系统进行交互&#xff0c;那么我结算后端会涉及到多个结算…

无线通信——Mesh体系结构

Mesh体系结构 了解Mesh的体系结构有利于我们后期的理解&#xff01;这里有些简单的知识点以及解释 WMN&#xff1a;WMN就是无线mesh网络&#xff0c;我们一般提到WMN其实特指就是Mesh网络的整个体系结构 STA&#xff1a;客户工作站&#xff0c;这个东西就是用户的设备端&…

《软件方法》2023版第1章(09)基本共识上的沟通,SysML

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 1.3 UML 1.3.2 使用UML的理由 1.3.2.5 基本共识上的沟通 符号标准并不是随便哪个人拍脑袋定下来&#xff0c;然后毫无道理地强迫大家接受。符号背后往往隐含着我们对某个学科的一些…

SpringAOP是什么?为什么要有SpringAOP?

SpringAOP是什么&#xff1f;为什么要有SpringAOP&#xff1f; 原文&#xff1a;SpringAOP是什么&#xff1f;为什么要有SpringAOP&#xff1f; 一、有SpringAOP之前 简单的开发场景&#xff0c;只需要写简单的业务逻辑&#xff0c;比如CRUD 但是在执行具体的逻辑之前&…

Python中兔子递归函数的例子

本文将详细介绍Python中兔子递归函数的例子&#xff0c;展示递归函数的基本实现方法及其原理。 一、递归函数的概念 递归函数是指在函数内部调用自身的函数。通过递归函数&#xff0c;可以将复杂问题分解成简单的子问题来解决。 这种过程是有限的&#xff0c;当子问题足够小…