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 相关文章推荐
extjs3 combobox取value和text案例详解
Feb 06 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python切片索引用法示例
2018/05/15 Python
详解python3中的真值测试
2018/08/13 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
贷款承诺书范文
2014/05/19 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
Python中requests库的用法详解
2022/06/05 Python