当前位置: 首页 > news >正文

多关键词高亮显示

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

 <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));}}

相关文章:

多关键词高亮显示

引入关键词文件&#xff0c;符合有条件的背景色高亮显示&#xff0c;也可取消。 <div id"testHtml"><p>写入的文本</p><p>关键词</p></div> var str 多个关键词&#xff0c;关键词文件&#xff0c;关键词 var strL str.replac…...

浅谈 33 台 iPad 发展史;OpenAI“悄悄”修改了企业核心价值观丨 RTE 开发者日报 Vol.67

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 **观点 **」、「有意思的 数据 」、「有思考…...

Mysql之备份(Mysqldump)

本篇文章旨在介绍Mysql的备份&#xff0c;借助mysqldump命令。 1.准备数据 准备一个数据库d1&#xff0c;表t1 表结构如下&#xff1a; mysql> desc t1; ------------------------------------------------------- | Field | Type | Null | Key | Default | Extra …...

算法leetcode|84. 柱状图中最大的矩形(rust重拳出击)

文章目录 84. 柱状图中最大的矩形&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 84. 柱状图中最大的矩形&#xff1a; 给定 n 个非负整…...

Java中通过List中的stream流去匹配相同的字段去赋值,避免for循环去查询数据库进行赋值操作

List<EquipmentDeviceMessage> equipmentDeviceMessageInfo greenThinkTanksInfoPlanMapper.getEquipmentDeviceMessageInfo(phone, startDate, endDate); List<BladeUserVo> userList bladexsqlMapper.getUserList();Q&#xff1a;上面两个列表怎么使用流&#…...

开源酒店预订订房小程序源码系统+多元商户 前端+后端完整搭建教程 可二次开发

大家好啊&#xff0c;罗峰今天来给大家分享一款酒店预订订房小程序源码系统&#xff0c;这款系统进行了全新的升级&#xff0c;从原来的单门店升级成了多门店&#xff0c;可以自由切换账号&#xff0c;统一管理。功能强大。以下是部分代码截图&#xff1a; 酒店预订订房小程序源…...

Leetcode 2906. Construct Product Matrix

Leetcode 2906. Construct Product Matrix 1. 解题思路2. 代码实现 题目链接&#xff1a;2906. Construct Product Matrix 1. 解题思路 这道题其实算是一道数论题。 本来其实python的pow内置函数已经帮我们基本处理了所有的问题了&#xff0c;但是这里稍微做了一点复杂化操…...

【Leetcode Sheet】Weekly Practice 11

Leetcode Test 2731 移动机器人(10.10) 有一些机器人分布在一条无限长的数轴上&#xff0c;他们初始坐标用一个下标从 0 开始的整数数组 nums 表示。当你给机器人下达命令时&#xff0c;它们以每秒钟一单位的速度开始移动。 给你一个字符串 s &#xff0c;每个字符按顺序分别…...

本地PHP搭建简单Imagewheel私人云图床,在外远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言、Linux &#x1f325;️每日语录&#xff1a;追逐影子的人&#xff0c;自己就是影子。 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 1.前言 云存储在前几年风头无两&#xff0c;云存…...

Python图像处理进阶:Pillow库的中级应用

在上一篇文章中&#xff0c;我们介绍了Python的Pillow库&#xff0c;了解了如何使用Pillow进行一些基础的图像操作。今天&#xff0c;我们将深入探讨Pillow库的中级功能&#xff0c;包括颜色空间转换&#xff0c;直方图&#xff0c;像素操作和绘制。 一、颜色空间转换 在图像…...

多线程怎么共用一个事务

文章目录 场景分析测试对应的其他类我并没有贴出来,因为大家可以自己找个项目走一波测试testSession测试testTransaction 注意使用同一个sqlsession会导致线程安全问题,testSession方法就是在另外线程里面能读取到数据库里面没有的数据.但是有时候业务就是这么奇怪.扩展总结 场…...

scrollIntoView使用与属性详解

scrollIntoView 使用与属性详解 效果图如下图所示 如果要想让元素滚动到指定位置 window.onload function () {containerItems[6].scrollIntoView({ behavior: "smooth" }); };js 代码 const containerItems document.querySelectorAll(".container div&…...

【LeetCode热题100】--169.多数元素

169.多数元素 使用哈希表&#xff1a; class Solution {public int majorityElement(int[] nums) {int n nums.length;int m n/2;Map<Integer,Integer> map new HashMap<>(); //定义一个hashfor(int num:nums){Integer count map.get(num); //Map.get() 方法…...

LeetCode 面试题 10.01. 合并排序的数组

文章目录 一、题目二、C# 题解 一、题目 给定两个排序后的数组 A 和 B&#xff0c;其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法&#xff0c;将 B 合并入 A 并排序。 初始化 A 和 B 的元素数量分别为 m 和 n。 示例: 输入: A [1,2,3,0,0,0], m 3 B [2,5,6], n 3 输…...

揭秘OLED透明拼接屏的参数规格:分辨率、亮度与透明度全解析

作为一种新型的显示技术&#xff0c;OLED透明拼接屏在市场中正在迅速崭露头角&#xff0c;有很多知名品牌厂家能设计、开发、生产高品质的显示产品。 如尼伽、起鸿、康视界、LG、YCTIMES、腾裕等&#xff0c;这些品牌在显示技术领域拥有丰富的经验和声誉&#xff0c;以其卓越的…...

竞赛选题 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…...

linux U盘无法使用,提示“Partition table entries are not in disk order“

问题&#xff1a; U盘在Windows上使用正常&#xff0c;在linux下无法使用fdisk -l 命令提示&#xff1a;Partition table entries are not in disk order $ fdisk -l Disk /dev/sdb: 525 MB, 525336576 bytes 17 heads, 59 sectors/track, 1022 cylinders Units cyl…...

HDLbits: Fsm ps2

本题目理解起来有点难&#xff0c;要观察题目中给的三个时序图&#xff0c;通过时序图可以发现&#xff0c;状态有四个&#xff1a;byte1、byte2、byte3&#xff0c;还有一个“&#xff1f;”状态。其中&#xff0c;byte1的下一个状态一定是byte2&#xff0c;byte2的下一个状态…...

【设计模式】八、桥接模式

文章目录 举例问题分析基本介绍桥接模式在 JDBC 的源码剖析桥接模式的注意事项和细节JDBC 举例 现在对不同手机类型的不同品牌实现操作编程(比如:开机、关机、上网&#xff0c;打电话等)&#xff0c; 传统方法对应的类图&#xff1a; 问题分析 扩展性问题(类爆炸)&#xff…...

从零开始的stable diffusion

stable diffusion真的是横空出世&#xff0c;开启了AIGC的元年。不知你是否有和我一样的困惑&#xff0c;这AI工具好像并不是那么听话&#xff1f; 前言 我们该如何才能用好stable diffusion这个工具呢&#xff1f;AI究竟在stable diffusion中承担了什么样的角色&#xff1f;如…...

视频文件修复全攻略:如何用Untrunc工具抢救损坏的MP4/MOV文件

视频文件修复全攻略&#xff1a;如何用Untrunc工具抢救损坏的MP4/MOV文件 【免费下载链接】untrunc Restore a truncated mp4/mov. Improved version of ponchio/untrunc 项目地址: https://gitcode.com/gh_mirrors/un/untrunc 当你打开存储着家庭聚会回忆的视频文件时&…...

Node RED实战:5分钟搞定MQTT消息发布与订阅(附EMQX配置)

Node RED与MQTT实战&#xff1a;从零构建物联网消息系统 1. 为什么选择Node RED与MQTT组合&#xff1f; 物联网开发领域一直存在一个核心挑战&#xff1a;如何快速搭建可靠的消息通信系统而不陷入底层协议实现的泥潭。这正是Node RED与MQTT这对黄金组合的价值所在——它们让开发…...

SDMatte在内容制作中的应用:短视频封面透明底素材、PPT动态图源快速生成

SDMatte在内容制作中的应用&#xff1a;短视频封面透明底素材、PPT动态图源快速生成 1. 为什么你需要专业的AI抠图工具 在内容创作领域&#xff0c;时间就是金钱。无论是制作短视频封面&#xff0c;还是设计PPT演示文稿&#xff0c;抠图都是最耗时的环节之一。传统Photoshop抠…...

STM32从入门到实战:两周速成指南

STM32快速入门指南&#xff1a;从零基础到项目实战1. 项目概述1.1 STM32与8051的对比分析对于已经掌握8051和C语言的开发者而言&#xff0c;STM32的学习曲线并不陡峭。关键在于理解何时需要从8051迁移到STM32平台&#xff1a;计算能力需求&#xff1a;当8051的主频无法满足复杂…...

颈腰椎病引发 “耳后疼痛”:耳根刺痛,可能是颈椎在 “捣乱”

很多人出现耳后持续性刺痛或按压痛&#xff0c;会误以为是中耳炎、腮腺炎&#xff0c;实则部分耳后疼痛与颈椎病变相关。颈椎病变压迫枕大神经&#xff08;从颈椎延伸至耳后&#xff09;&#xff0c;会导致神经分布区域疼痛&#xff1b;同时颈椎肌肉痉挛、僵硬&#xff0c;牵拉…...

视频解析工具:高效获取无水印视频的技术实践与生态构建

视频解析工具&#xff1a;高效获取无水印视频的技术实践与生态构建 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作与研究领域&#xff0c;视频资源的高效获取已成为基础需求。然而平台访问限…...

从零到一实战:基于快马平台快速开发企业级jiyutrainer在线评测系统

今天想和大家分享一个很实用的开发经验——如何快速搭建一个企业级的在线编程评测系统。最近正好有个朋友想做一个类似jiyutrainer的编程练习平台&#xff0c;我就用InsCode(快马)平台试了试&#xff0c;效果出乎意料的好。 项目需求分析 首先明确我们需要实现的核心功能&#…...

英雄联盟智能助手:5个提升游戏体验的核心技巧

英雄联盟智能助手&#xff1a;5个提升游戏体验的核心技巧 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾经在英雄联盟游…...

Realistic Vision V5.1虚拟摄影棚效果验证:专业摄影师盲测准确率87.3%

Realistic Vision V5.1虚拟摄影棚效果验证&#xff1a;专业摄影师盲测准确率87.3% 1. 项目概述 Realistic Vision V5.1虚拟摄影棚是基于当前最先进的写实风格生成模型开发的本地化摄影工具。经过深度优化后&#xff0c;该工具能够生成与专业单反相机拍摄效果相媲美的人像作品…...

春联生成模型-中文-base多线程批量生成教程,为公司百名员工定制春节祝福

春联生成模型-中文-base多线程批量生成教程&#xff0c;为公司百名员工定制春节祝福 春节将至&#xff0c;为公司员工准备个性化春联是传递祝福的好方式。传统手工创作耗时耗力&#xff0c;而春联生成模型-中文-base结合多线程技术&#xff0c;能高效完成批量定制。本文将详细…...