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

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

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

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

效果如下:


代码

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

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

什么样的代码叫好代码?

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

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

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

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

当一个程序员写不出代码了,该怎么办?

即使是最优秀的程序员也会遭遇无法解决的软件工程问题。碰到这样的问题,并不一定意味着你缺乏技能或知识。编程不是一项容易的工作,我们可以通过采取非正统的方法来保持你想要的生产力水平

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

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

如何写出优雅耐看的JavaScript代码?

在我们平时的工作开发中,大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。

让代码具有可读性的10种最佳实践

如果咱们关注代码本身结构及可读笥,而不是只关心它是否能工作,那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写能应付当前工作的代码。

200行代码实现超轻量级编译器

本篇和大家一起学习写一款超级简单轻量,去掉注释只有不到200行代码的编译器。,该编译器将类 lisp 语法函数调用 编译为 类C语言函数调用

代码越写越乱?那是因为你没用责任链

在开始学习责任链之前,先看一下在开发中常见的问题。下面是前端用来处理 API 错误码的代码:当然实际项目中不可能只有一行 console,这是为了说明原理的简化版。

js跳转代码

所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面。常规的JS页面跳转代码:在原来的窗体中直接跳转用

点击更多...

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