js高亮显示关键词_页面、搜索关键词高亮显示

访客4年前黑客资讯593

一、页面实现关键词高亮显示:

在项目时代遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。

效果如下:


代码:

<style>
em{
  color:red;
}
</style>

<script>
/*正则匹配中文、英文关键字高亮,高亮后的关键字和之前的大小写保持一致*/
function keyLightet(str){
	var key  = "js 前端";//这里界说关键词
	key = '('+key.replace(/([\+\.\*\|\?\-\(\[\^\$])/g,'\\$1' ).replace(/\s+/g,'|')+')';//把匹配关键字中的正则符转义
	var patt=new RegExp(key ,'igm');
	var str2=str.replace(patt,"<em>$1</em>");
	return str2;
}

var str="迎接接见fly63.com,web前端主要由:css,js,html组成!";
console.log(keyLightet(str));
//效果:迎接接见fly63.com,web<em>前端</em>主要由:css,<em>js</em>,html组成!


二、在搜索效果中高亮显示关键词

有一组关键词数组,在数组中筛选出相符关键字的内容并将关键字高亮。

效果如下:


代码实现:

<style>
em{
	color:red;
}
</style>

function searchLightet(words,val){
    var tips = [];//筛选后的关键词数组
    if(val!=''){
        var reg =  new RegExp("^"+val);
        for(var i =0;i<words.length;i++){
            if(reg.test(words[i])){
                tips.push(words[i]);
            }
        }
    }
    var result=[];
    for(var w in tips){
    	result.push("<em>"+val+"</em>"+tips[w].substr(tips[w].indexOf(val)+val.length));
    }
    return result
}
var arr=['web','前端','js','测试','css','java','js前端','vue','react','jquery']
console.log(searchLightet(arr,'j'));//搜索为j的时刻
//效果:["<em>j</em>s", "<em>j</em>ava", "<em>j</em>s前端", "<em>j</em>query"]



思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

手机被黑客攻击有提示吗(关掉手机网络黑客还能攻击吗)

手机被黑客攻击有提示吗(关掉手机网络黑客还能攻击吗)

手机被黑客入侵的表现 第一:不适当的弹出窗口 如果在手机上看到不适当的画面 X 级广告弹出窗口,则可能表明手机已被盗用。第二:未发起的电话或消息 如果有未知的电话和消息从手机发起,则可能表明设备已被黑...

黑客网站免费刷q币2019,微信网站黑客群,有关破解密码的黑客书

· 1月份被传庞氏圈套的传销币项目BitConnect的印度领袖在迪拜被抓,投资者对其建议司法诉讼。 邮件中含有一个合法可是被黑的第三方链接:[+] C:WindowsMicrosoft.NETFra...

运营商被黑客攻破的后果(运营商被黑客攻破的后果是)

运营商被黑客攻破的后果(运营商被黑客攻破的后果是)

本文目录一览: 1、黑客黑了别人公司的系统,他的结果会怎么样,会被网警怎么样? 2、黑客恶意攻击带来的后果 3、2009年6月25日那天TX上千台服务器被黑客攻击是怎么回事啊 4、澳电信公...

手机怎样连接摄像头监控远程(远程监控摄像头怎么连接手机)

手机怎样连接摄像头监控远程(远程监控摄像头怎么连接手机)

本文目录一览: 1、怎样连接摄像头监控? 2、手机怎样连接家里的监控? 3、摄像头怎样绑手机上远程监控? 4、手机怎样连接监控摄像头 5、手机怎么连接摄像头监控 6、手机如何连接监...

广州西门子燃气灶联系方式(广州西门子代理商)

020-28948460师傅上门服务,技术熟练服务态度好,希望可以帮到你。 地址西门子(中国)有限公司北京市朝阳区望京中环南路7号邮政编码:100102电话:+86(10)64768888传真:+86...

黑客帝国中字在线(黑客帝国在线1)

黑客帝国中字在线(黑客帝国在线1)

本文目录一览: 1、黑客帝国:矩阵重启在线高清观看免费完整版,求百度网盘资源 2、《黑客帝国(1999)》免费在线观看完整版高清,求百度网盘资源 3、《黑客帝国》完整版在线播放 4、《黑客...