关闭

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

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

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

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

效果如下:


代码

<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

关闭

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

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

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

你写的代码就是你的犯罪证据

最近我工作的主要内容,是在和别人结对编程,以对一个大型的遗留系统项目进行重构。过程中,我发现一个特别有意思的东西,我重构了很多的 if 语句。

Clean Code之JavaScript代码示例

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

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

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

写业务代码最容易掉的8种坑

线程、线程同步、池、网络连接、网络链路、对象实例化、内存等方面的基础是最容易犯错的地方,搞清楚框架内部对于这些基础资源的的使用方式,根据最佳实践进行合理配置,这是业务开发时需要特别关注的点。

黑客攻击用的最短代码是什么?

我们讲的是攻击过程中用到的代码,不是你攻击过程中准备的软件代码。我们讲的是现在应当能成功攻击的。不是你已经装好后门你去连接了,像菜刀服务端、跨站代码等。真正的dir溢出、现在很多黑客黑了服务器之后,会装一个shift后门。

你不知道的 useCallback

对于新手来说,没写过几次死循环的代码都不好意思说自己用过 React Hooks。本文将以useCallback为切入点,谈谈几个 hook 的使用场景,以及性能优化的一些思考。

Js代码_Js整洁之道

整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低bug几率。1. 用命名的变量代替数组下标,2. 函数的参数最好<=2个,尽量避免3个。

前端优化代码

所谓无规矩不成方圆,前端时间在团队 code-review 中发现,不同时期不同开发人员写的代码可谓五花八门。因此我们提出了一些相关代码方面的规范,希望日后能形成团队的编码规范

点击更多...

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