多关键词高亮显示

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

html 复制代码
 <div id="testHtml">
     <p>写入的文本</p>
     <p>关键词</p>
 </div>
javascript 复制代码
var str ='多个关键词,关键词文件,关键词'
var strL = str.replace(/,/g,'|')     //将关键词用竖线分割
javascript 复制代码
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`) )
}

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

javascript 复制代码
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));
        }
 }
相关推荐
鹏程34 分钟前
局域网下五子棋,html+node.js实现
node.js·html
小诸葛的博客2 小时前
gin如何返回html
前端·html·gin
islandzzzz3 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
轻语呢喃5 小时前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
小宁爱Python7 小时前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
网络点点滴9 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Rubin939 小时前
浏览器一帧做些什么?
html
G等你下课9 小时前
如何进行DOM操作?
javascript·html
然我10 小时前
打工人必看!Flex “驯服” 前端面试,让代码像整理工位一样顺
前端·面试·html
veminhe10 天前
HTML5 浏览器支持
前端·html·html5