多关键词高亮显示

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

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));
        }
 }
相关推荐
葡萄城技术团队2 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG2 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
前端老鹰3 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z3 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
Alice-YUE3 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
从零开始学习人工智能3 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
yddddddy3 天前
html基本知识
前端·html
恶猫4 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
小白64024 天前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html