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

时间: 2018-11-09阅读: 3403标签: 代码

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

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

效果如下:


代码

<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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1303

程序员吐槽:经常熬夜敲代码,谈了四年的女朋友提出分手了

这年头说起程序员,普通人都会很羡慕他们的高薪,毕竟刚工作就可以月薪上万,三五年工作月薪两万,干一年相当于普通人干个5年的,谁又能不眼红呢?不过程序虽然高薪,但也有自己的苦处。

Js代码压缩工具推荐

JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程。这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行。

如何写出让同事打死的代码?【Js最佳垃圾代码】

在 GitHub 上有一个新项目,它描述了「最佳垃圾代码」的十九条关键准则。从变量命名到注释编写。这些准则将指导你写出最亮眼的烂代码,保证被同事打死!

从 WeRequest 登陆态管理来聊聊业务代码

在开发微信小程序之前,个人从来没有接触过开发中涉及到第三方服务器交互的流程。在开发的过程本身倒是没有什么太大的意外,只是在维护服务器登陆状态这一点很讨厌。因为涉及到自身服务器的登录状态以及微信官方服务

如何处理前任程序员留下的代码

作为软件工程师不可避免会遇到的一个场景是:我们在改变或添加一个功能到不是我们创建的、我们不熟悉的、与我们负责的系统部分无关的代码中时,会遇到麻烦。虽然这可能会是一个繁琐而艰巨的任务

TypeScript 来做依赖注入的限制

依赖注入 是编写可测试/复用代码的关键。 在 TypeScript 中所有对象、属性和方法都有类型,可以大幅简化人工标注的代码,这让很多人重新考虑在 JavaScript 中实现依赖注入。 比如 Angular2 以后的 DI 实现

程序员看过来:阿里毕玄提升代码能力的4段经历

对于程序员而言,我始终认为代码是展现能力的关键。一个优秀程序员写的代码,和一个普通程序员写的代码是很容易看出差别的,代码是展示程序员硬实力 的 名片。

一文帮你搞定90%的JS手写题

还在害怕手写题吗,本文可以帮你扩展并巩固自己的JS基础,顺便搞定90%的手写题。在工作中还可以对常用的需求进行手写实现,比如深拷贝、防抖节流等可以直接用于往后的项目中,提高项目开发效率。不说废话了,下面就直接上代码吧。

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

20个杀手级 JavaScript 单行代码

本文整理了一些实用的 JavaScript 单行代码,非常好用~~获取浏览器Cookie的值;颜色RGB转十六进制;复制到剪贴板;检查日期是否合法;查找日期位于一年中的第几天

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!