js实现关键词高亮显示 正则匹配
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实现关键词高亮显示 正则匹配的更多相关文章
- js 各种数值类型正则匹配检测
随拿随用只js正则表达式,反正平时工作我是不写正则的,大神请自动绕行: 验证数字的正则表达式集验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数 ...
- js 空正则匹配任意一个位置
看一个正则 这里明显,起到匹配作用的是 | 后的,可 | 后什么都没有,原理不知道,也没有搜到文献,只有在 Reg101 上是这样解释的, 所以得出结论: js 中,空正则匹配任意一个位置. 不过,这 ...
- js正则匹配的一个日常应用
应用实例 1 /** 将段落中的 \n 转换为 <p></p>, 规范存储 */ 2 function formatParagraphForStore(val) { 3 var ...
- 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件
有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, ...
- js:通过正则匹配获取页面的url中的参数
简介:获取页面参数 原生js: //通过正则匹配获取当前页面的url中的参数 function getUrlParam(name){ var reg = new RegExp("(^|&am ...
- JS正则密码复杂度校验之:JS正则匹配半角英文符号
概述 在JS密码校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验 ...
- js截取相应的域名----正则匹配法 和校验Url 正则表达式
js截取相应的域名----正则匹配法 和校验Url 正则表达式 用javascript截取相应的域名方法两种,供大家参考 1.方法1: [javascript] view plain copy fun ...
- JS正则表达式一些基本使用、验证、匹配、正则匹配时一个变量
js验证首位必须是字母 var str = "asfg"; /^[a-zA-Z].*/.test(str);//true是,false否 匹配所有空格 var str=" ...
- js 正则匹配 域名【host】
如果直接在js中是可以直接取到hostname的,以下方式是通过正则匹配: var url = "http://www.cnblogs.com/cench" var reg = / ...
随机推荐
- eval函数的坑
开发工作中遇到这样一种情形,需要执行用户输入的php代码串,于是决定使用eval函数.coding大概示例如下: function getStr($str) { return strlen($str) ...
- struts2系列(四):struts2国际化的多种方式
一.struts2国际化原理 根据不同的Locale读取不同的文本. 例如有两个资源文件: 第一个:message_zh_CN.properties 第二个:message_en_US.propert ...
- 移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象
前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...
- ASP.NET中登录时记住用户名和密码(附源码下载)--ASP.NET
必需了解的:实例需要做的是Cookie对象的创建和对Cookie对象数据的读取,通过Response对象的Cookies属性创建Cookie,通过Request对象的Cookies可以读取Cookie ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Ubuntu配置OpenStack 二:配置时间同步NTP和安装数据库Maridb以及问题总结
继上一节Ubuntu配置OpenStack 一:配置主机环境,下面继续为安装时间同步,以及配置openstack的安装包源和安装数据库Maridb.(全文截图都是由自己徒手搭建完成并且截图) 一.安装 ...
- Android 开发笔记___实战项目:购物车
购物车的应用很广泛,电商app基本上都有它的身影.由于它用到了多种存储方式,通过项目对数据的存储有更高层次的了解. 1.设计思路 首先看看购物车的外观.第一次进入时里面是空的,去购物页面加入购物车以后 ...
- Samba服务安装及配置
服务器环境:CentOS6.9 Linux 2.6.32-696.10.1.el6.x86_64 安装Samba服务 过程中会安装3个服务smb(文件.打印共享服务,使用139.445端口).nmb( ...
- asp.net core 开发的https证书服务-agilelabs.net
创建证书-生成CSR(Certificate Sign Request): 填写证书基本信息 接下来我们就可以看到创建的证书签名请求信息(CSR): 为我们刚才创建的CSR签名: 签名的意思是说通过证 ...
- 开篇-我眼中的FPGA
既然是开篇,那就来闲话叨一叨FPGA吧. 掰掰指头,结识FPGA估计有5年多.作为嵌入式工程师,每天的日常充斥着ARM.DSP.操作系统.通讯.总线等耳熟能详的词汇,徜徉其中不能自拔,而这其中,自觉最 ...