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

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

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

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

效果如下:


代码

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

JS无形装逼,最为致命

单行简洁的代码很难维护(有时甚至难以理解),但这并不能阻止广大攻城狮们脑洞,在编写简洁的代码后获得一定的满足感。以下我最近的一些收藏javascript精简代码集合。

怎样使你的 JavaScript 代码简单易读

解决一个问题可以有很多方法,但是有些方法很复杂,甚至有些是荒谬的。在本文中,我想谈谈解决一个问题时的好方案和坏方案。

js实现进度条代码

现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架

Clean Code之JavaScript代码示例

作为一个开发者,如果你关心代码质量,除了需要认真测试代码能否正确执行以外,还要注重代码的整洁(clean code)。一个专业的开发者会从将来自己或则他人方便维护的角度考虑如何写代码

Js高程:教你如何写出可维护的代码

在平时工作开发中,大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码,很多情况下都是以他人成果为基础的,或者新增修改需求,自己写的代码也会被其他开发人员调用

程序员该如在低代码和无代码开发中抉择?

对于一个人第一次是如何了解低代码/无代码这两种开发方式,我总是充满好奇。这就是为什么我觉得贸易展会是如此有趣的原因;因为我可以拿同样的问题问每一个走进你的展台的人们。通常这是我问他们的第一个问题,当然是在扫描了他们的胸牌之后。

对码农而言什么样的代码才能叫做好代码?

好的代码,就像是好的笑话——无需解释就能让别人明白。如果你的代码能够做到不解自明,在大多数时候,你根本无需为其配备说明文档。

散布JS无限循环代码,日本13岁女学生被抓

近日,一名13岁女孩被指控传播未经授权的恶意程序。警方近日质询并指控了一名13岁的女学生,起因是她将一段恶意代码的链接放到了在线公告栏上,广泛传播代码。这段有问题的恶意代码是弹出警告消息的无限循环,每当你点击确定就会立即显示新的消息。

什么样的代码叫好代码?

代码的本质还要在机器上运行,好的代码不单单的纯粹的简单的几个字符的问题,好的代码不仅仅是排版上或者语法上好看,还要能经过产品的测试验证,这是评判代码好坏的最准确的标准

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

点击更多...

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