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

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

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

//高亮关键字 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 +'>');
}
}*/
//匹配整个关键词 不拆分
re = new RegExp(words, 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
return text;
}

 
 
 

js实现关键词高亮显示 正则匹配的更多相关文章

  1. js 各种数值类型正则匹配检测

    随拿随用只js正则表达式,反正平时工作我是不写正则的,大神请自动绕行: 验证数字的正则表达式集验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数 ...

  2. js 空正则匹配任意一个位置

    看一个正则 这里明显,起到匹配作用的是 | 后的,可 | 后什么都没有,原理不知道,也没有搜到文献,只有在 Reg101 上是这样解释的, 所以得出结论: js 中,空正则匹配任意一个位置. 不过,这 ...

  3. js正则匹配的一个日常应用

    应用实例 1 /** 将段落中的 \n 转换为 <p></p>, 规范存储 */ 2 function formatParagraphForStore(val) { 3 var ...

  4. 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

    有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, ...

  5. js:通过正则匹配获取页面的url中的参数

    简介:获取页面参数 原生js: //通过正则匹配获取当前页面的url中的参数 function getUrlParam(name){ var reg = new RegExp("(^|&am ...

  6. JS正则密码复杂度校验之:JS正则匹配半角英文符号

    概述 在JS密码校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验 ...

  7. js截取相应的域名----正则匹配法 和校验Url 正则表达式

    js截取相应的域名----正则匹配法 和校验Url 正则表达式 用javascript截取相应的域名方法两种,供大家参考 1.方法1: [javascript] view plain copy fun ...

  8. JS正则表达式一些基本使用、验证、匹配、正则匹配时一个变量

    js验证首位必须是字母 var str = "asfg"; /^[a-zA-Z].*/.test(str);//true是,false否 匹配所有空格 var str=" ...

  9. js 正则匹配 域名【host】

    如果直接在js中是可以直接取到hostname的,以下方式是通过正则匹配: var url = "http://www.cnblogs.com/cench" var reg = / ...

随机推荐

  1. Java基础总结--方法(函数)

    ---函数的作用---实现特定功能的代码--是一种代码重用的方式---函数的格式---访问修饰符 返回值类型 函数名(参数列表){语句:} 参数列表包含参数的类型和参数名(参数列表要注意顺序)---关 ...

  2. 微软Tech Summit 2017,等你来打Call

    2017年10月31至11月3日,由微软举办的Tech Summit 2017技术暨生态大会将在北京盛大举办,要在北京连开四天.今年的技术大会看头十足,不仅有大咖级人物带来十二大主题课程,更有三天四场 ...

  3. IntelliJ下断点不可用 No executable code found

    情景说明:ant工程+IntelliJ Idea 采取copy编译后的class文件到WEB-INF/classes目录下,断点一直不可用 如图: 网上查了很多资料都说的不够明确,IntelliJ社区 ...

  4. Java就业企业面试问题-ssh框架

    SSH框架阶段SSH的优缺点,使用场景?   Hibernate优点:   (1) 对象/关系数据库映射(ORM) 它使用时只需要操纵对象,使开发更对象化,抛弃了数据库中心的思想,完全的面向对象思想 ...

  5. C# orderby子句

    注意:对联接运算的结果进行排序. 请注意,排序在联接之后执行. 虽然可以在联接之前将 orderby 子句用于一个或多个源序列,不过通常不建议这样做. 某些 LINQ 提供程序可能不会在联接之后保留该 ...

  6. What is npm?

    什么是npm ? npm全称是Node Package Manager npm makes it easy for JavaScript developers to share and reuse c ...

  7. CSS预处理器——Sass、LESS和Stylus实践【未删减版】

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

  8. copy11

    方法二 这种方法也比较简单,主要针对你没有.apk包的情况,比如Android原生自带的APP(计算器.通讯录.短信...),可以通过adb 命令. 1,打开APP. 2,执行> adb log ...

  9. alert 执行顺序问题

    <p><span id="span1">Hello World!</span></p> <script type=" ...

  10. 【吐槽】关于256个 class可以覆盖一个id的问题

    还是说今天下午面试的事情,被面试官问了 40多分钟的问题,我觉得丫 一定是从哪个网站down了几份面试题,自个儿整合了一下,然后挨个问,刚开始感觉哟,不错哦,面试官懂的蛮多的. 然后问到某个问题之后, ...