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 = / ...
随机推荐
- python学习笔记(一)之入门
1.python的安装 官网下载.exe文件直接安装即可,在安装过程中选择加入环境变量,就不用在安装后再去增添环境变量了. 本文选择的是python3.6版本,没有选择2.7版本. 2.启动pytho ...
- LeetCode 381. Insert Delete GetRandom O(1) - Duplicates allowed (插入删除和获得随机数 常数时间 允许重复项)
Design a data structure that supports all following operations in average O(1) time. Note: Duplicate ...
- Mybatis Generator生成Mybatis Dao接口层*Mapper.xml以及对应实体类
[前言] 使用Mybatis-Generator自动生成Dao.Model.Mapping相关文件,Mybatis-Generator的作用就是充当了一个代码生成器的角色,使用代码生成器不仅可以简化我 ...
- asp.net上传文件限制解决方案
环境:VS2012,IIS7 利用web uploader实现了一个文件上传的功能,但是遇到上传大小的限制,在web.config的<system.web>节点下添加如下代码: <h ...
- CSS选择器汇总
id选择器 #id 类选择器 .class 标签选择器 div, h1, p 相邻选择器 h1 + p 子选择器 ul > li 后代选择器 li a 通配符选择器 * 属性选择器 a[rel= ...
- 助你了解react的小demo
React是个啥 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebo ...
- java 操作格子问题(线段树)
很久之前做过线段树的问题(操作格子),时间长了之后再次接触到,发现当初理解的不是很透彻,然后代码冗长,再遇到的时候发现自己甚至不能独立地完成这个问题. 所以算法这个东西啊, 第一,是要经常练习(我个人 ...
- C# linq左连接与分组
1.左连接使用DefaultIfEmpty(): 2.分组时候判断newper.FirstOrDefault() == null ? null: newper.ToList()这个经常出错误,如果不判 ...
- 问题:编译eshoponcontainers失败,提示error:invalid reference format
环境: visual studio 2017 v15.4.2,docker ce Version 17.06.0-ce-win19 (12801) 参考问题页: https://github.com/ ...
- UNIX标准及实现
UNIX标准及实现 引言 在UNIX编程环境和C程序设计语言的标准化方面已经做了很多工作.虽然UNIX应用程序在不同的UNIX操作系统版本之间进行移植相当容易,但是20世纪80年代UNIX版本 ...