JS实现关键词高亮显示正则匹配


Posted in Javascript onJune 22, 2018

html 和ajax 部分就不写了,只需将需要匹配的文字传进去就可以了 

比如匹配后台传回的字符串data.content中的关键词:直接调用:

data.content = highLightKeywords(data.content,keywords)即可

 以下两个函数分辨是匹配1:匹配关键词words中每一个字符,2:匹配整个关键词words

//高亮关键字 text =>内容 words:关键词  tag 被包裹的标签
//匹配每一个关键字字符
function highLightKeywords(text, words, tag) {
tag = tag || 'span';// 默认的标签,如果没有指定,使用span
var i, len = words.length, re;
for (i = 0; i < len; i++) {
// 正则匹配所有的文本
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
}
return text;
}
//匹配整个关键词 不拆分
function highlight(text, words, tag) {
// 默认的标签,如果没有指定,使用span
tag = tag || 'span';
var i, len = words.length,
re;
//匹配每一个特殊字符 ,进行转义
var specialStr = ["*", ".", "?", "+", "$", "^", "[", "]", "{", "}", "|", "\\", "(", ")", "/", "%"]; 
$.each(specialStr, function(i, item) {
if(words.indexOf(item) != -1) {
words = words.replace(new RegExp("\\" + item, 'g'), "\\" + item);
}
});
//匹配整个关键词
re = new RegExp(words, 'g');
if(re.test(text)) {
text = text.replace(re, '<' + tag + ' class="highlight">$&</' + tag + '>');
}
return text;
}

总结

以上所述是小编给大家介绍的JS实现关键词高亮显示正则匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
javascript中Object使用详解
Jan 26 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
javascript中this指向详解
Apr 23 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
JavaScript 下载svg图片为png格式
Jun 21 #Javascript
MVVM 双向绑定的实现代码
Jun 21 #Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 #Javascript
You might like
批量修改RAR文件注释的php代码
2010/11/20 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python实现rsa加密实例详解
2017/07/19 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
三个python爬虫项目实例代码
2019/12/28 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
同志主要表现材料
2014/08/21 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书