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

 更新时间:2018年06月22日 11:22:18   作者:山海之间  
这篇文章主要介绍了JS实现关键词高亮显示正则匹配功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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实现关键词高亮显示正则匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js实现div模拟模态对话框展现URL内容

    js实现div模拟模态对话框展现URL内容

    这篇文章主要介绍了js实现div模拟模态对话框展现URL内容的功能,涉及javascript动态操作页面元素样式与ajax调用的相关技巧,需要的朋友可以参考下
    2016-05-05
  • Router解决跨模块下的页面跳转示例

    Router解决跨模块下的页面跳转示例

    开始模块化开发项目之后,一个很重要的问题就是页面见的跳转问题,这篇文章主要介绍了Router解决跨模块下的页面跳转示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 微信小程序框架的页面布局代码

    微信小程序框架的页面布局代码

    这篇文章主要介绍了微信小程序框架的页面布局代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • js每隔5分钟执行一次ajax请求的实现方法

    js每隔5分钟执行一次ajax请求的实现方法

    每隔5分钟执行一次ajax请求,如何实现?下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11
  • js实现动态时钟

    js实现动态时钟

    这篇文章主要为大家详细介绍了js实现动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 浅谈webpack4 图片处理汇总

    浅谈webpack4 图片处理汇总

    这篇文章主要介绍了浅谈webpack4 图片处理汇总,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript常见数组方法之如何转置矩阵

    JavaScript常见数组方法之如何转置矩阵

    这篇文章主要给大家介绍了关于JavaScript常见数组方法之如何转置矩阵的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • javascript中Promise使用详解

    javascript中Promise使用详解

    这篇文章主要介绍了javascript中Promise使用详解,关于Promise的使用相关的知识点下面文章内容介绍详细具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • 客户端限制只能上传jpg格式图片的js代码

    客户端限制只能上传jpg格式图片的js代码

    客户端限制只能上传jpg格式图片的js代码,对用户体验较好,适合网页中只能使用jpg格式图片的情况。
    2010-12-12
  • JavaScript判断输入值是否为正整数(判断变量为数字)

    JavaScript判断输入值是否为正整数(判断变量为数字)

    在项目开发中,有时候需要使用JavaScript验证用户输入的是否为正整数,这篇文章主要给大家介绍了关于JavaScript判断输入值是否为正整数(判断变量为数字)的相关资料,需要的朋友可以参考下,
    2023-11-11

最新评论