当前位置: 首页 > 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));}}

http://www.lryc.cn/news/194745.html

相关文章:

  • 浅谈 33 台 iPad 发展史;OpenAI“悄悄”修改了企业核心价值观丨 RTE 开发者日报 Vol.67
  • Mysql之备份(Mysqldump)
  • 算法leetcode|84. 柱状图中最大的矩形(rust重拳出击)
  • Java中通过List中的stream流去匹配相同的字段去赋值,避免for循环去查询数据库进行赋值操作
  • 开源酒店预订订房小程序源码系统+多元商户 前端+后端完整搭建教程 可二次开发
  • Leetcode 2906. Construct Product Matrix
  • 【Leetcode Sheet】Weekly Practice 11
  • 本地PHP搭建简单Imagewheel私人云图床,在外远程访问
  • Python图像处理进阶:Pillow库的中级应用
  • 多线程怎么共用一个事务
  • scrollIntoView使用与属性详解
  • 【LeetCode热题100】--169.多数元素
  • LeetCode 面试题 10.01. 合并排序的数组
  • 揭秘OLED透明拼接屏的参数规格:分辨率、亮度与透明度全解析
  • 竞赛选题 深度学习YOLOv5车辆颜色识别检测 - python opencv
  • linux U盘无法使用,提示“Partition table entries are not in disk order“
  • HDLbits: Fsm ps2
  • 【设计模式】八、桥接模式
  • 从零开始的stable diffusion
  • 【Qt之QString】数值与进制字符串间的转换详解
  • Pytest单元测试框架 —— Pytest+Allure+Jenkins的应用
  • 科普向丨语音芯片烧录工艺的要求
  • : 依赖: qtbase5-dev (= 5.12.8+dfsg-0ubuntu2.1) 但是它将不会被安装 或
  • Unity中Camera类实现坐标系转换的示例
  • vue-按键修饰符
  • [初始java]——java为什么这么火,java如何实现跨平台、什么是JDK/JRE/JVM
  • R语言手动绘制NHANSE数据基线表并聊聊NHANSE数据制作亚组交互效应表的问题(P for interaction)
  • C++引用(起别名)
  • Ubuntu:VS Code IDE安装ESP-IDF【保姆级】(草稿)
  • 子序列(All in All, UVa 10340)rust解法