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正则表达式惰性匹配和贪婪匹配用法分析
本文实例讲述了js正则表达式惰性匹配和贪婪匹配用法.分享给大家供大家参考,具体如下: 在讲贪婪模式和惰性模式之前,先回顾一下JS正则基础: 写法基础: ①不需要双引号,直接用//包含 => /wehfwue123123/.test(); ②反斜杠\表示转义 =>/\.jpg$/ ③用法基础:.test(str); 语法: ①锚点类 /^a/=>以"a"开头 /\.jpg$/=>以".jpg"结尾 ②字符类 [abc]:a或b或c [0-9]:
-
JS正则匹配中文的方法示例
本文实例讲述了JS正则匹配中文的方法.分享给大家供大家参考,具体如下: 需求:使用JS正则的方式将字符串 "[微笑][撇嘴][发呆][得意][流泪]" 中的汉字进行匹配输出. 示例代码: <script> var pattern1 = /[\u4e00-\u9fa5]+/g; var pattern2 = /\[[\u4e00-\u9fa5]+\]/g; var contents = "[微笑][撇嘴][发呆][得意][流泪]"; content = c
-
正则匹配密码只能是数字和字母组合字符串功能【php与js实现】
本文实例讲述了正则匹配密码只能是数字和字母组合字符串功能.分享给大家供大家参考,具体如下: 密码要求: 1. 不能全部是数字 2. 不能全部是字母 3. 必须是数字和字母组合 4. 不包含特殊字符 5. 密码长度6-30位的字符串 /** * @desc get_pwd_strength()im:根据密码字符串判断密码结构 * @param (string)$mobile * return 返回:$msg */ function get_pwd_strength($pwd){ if (strle
-
javascript正则表达式模糊匹配IP地址功能示例
本文实例讲述了javascript正则表达式模糊匹配IP地址功能.分享给大家供大家参考,具体如下: function checkip() { var strIP = document.getElementById("accessip").value; var re = /^(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)$/g //模糊匹配IP地址的正则表达式 if(re.test(strIP)){ if(RegExp.$1
-
js匹配网址url的正则表达式集合
DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母.标号中除连字符(-)外不能使用其他的标点符号.级别最低的域名写在最左边,而级别最高的域名写在最右边.由多个标号组成的完整域名总共不超过255个字符.所以验证则网址url的正则可以如下几种 方法一: function checkUrl(urlString){ if(urlString!=""){ var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+
-
JS正则表达式匹配检测各种数值类型(数字验证)
验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d
-
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
本文实例讲述了JS正则匹配URL网址的方法.分享给大家供大家参考,具体如下: 最强的匹配网址-url的正则表达式:匹配www,http开头的一切网址 直接插入正则表达式: [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.? 完整的js方法: function isURL(domain) { var name = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z
-
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
本文实例分析了js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法.分享给大家供大家参考,具体如下: 最近在阅读RequireJS 2.1.15源码,源码开始处定义了一系列的变量,有4个正则表达式: var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, jsS
-
JS实现关键词高亮显示正则匹配
html 和ajax 部分就不写了,只需将需要匹配的文字传进去就可以了 比如匹配后台传回的字符串data.content中的关键词:直接调用: data.content = highLightKeywords(data.content,keywords)即可 以下两个函数分辨是匹配1:匹配关键词words中每一个字符,2:匹配整个关键词words //高亮关键字 text =>内容 words:关键词 tag 被包裹的标签 //匹配每一个关键字字符 function highLightKeywo
-
js Abba逆向前瞻正则匹配实例
核心代码: <script> var s1 = 'acritan'; var s2 = 'bassarisk'; var s3 = 'commotive'; //找出不包含 "abba" 模式的单词 var r = /^(?!.*?(.)(.)\2\1)/i; alert(r.test(s1)); // true alert(r.test(s2)); // false alert(r.test(s3)); // false </script> 零宽断言(?!ex
-
js实现正则匹配中文标点符号的方法
本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>js正则匹配中文标点符号</title> <head> <body> <input ty
-
js正则匹配出所有图片及图片地址src的方法
本文实例讲述了js正则匹配出所有图片及图片地址src的方法.分享给大家供大家参考.具体分析如下: 有很多时候我们需要用到文章里面的图片,而且主要是用到它的图片地址,这个时候我们需要通过正则匹配出图片标签,然后做到我们需要的数据 平时也没怎么用正则,一不学就忘,最近项目需要,然后又去goole了,好乱!一搜一大堆,也不是我想要的,最后把自己留一个已被后用: 实现:通过js正则匹配出所有图片及所有图片地址src. 思路:1.匹配出图片img标签(即匹配出所有图片),过滤其他不需要的字符 从匹配出来的
-
js正则匹配多个全部数据问题
需求:获取所有title里的内容 正则表达式后面加g表示多次匹配 方式一:match 返回数组 方式二 exec <script> var str='<a href="//www.aliexpress.com/store/product/OOOT-BAORJCT-174296-22mm-10yard-lot-cartoon-Ribbons-Thermal-transfer-Printed-grosgrain-Wedding-Accessories-DIY-handmade/23
-
js通过正则匹配没有内容的空标签
js 如何正则匹配没有内容的空标签并移除掉? 例如 <span></span> <p></p> 等等 正则 /<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig html='<div id="fixedTools" class="hidden-xs hidden-sm">'+ '\n <a id="backtop" clas
-
js正则匹配table,img及去除各种标签问题
核心代码 //获取公示栏内容 s = "$row.detail$"; mainContent =s; //如果有多个table使用下面注释的正则只会匹配成一个table //var tabReg = /<table[^>]*>((?!table).)*<\/table>/gi; //匹配单个table var tabReg = /<table[^>]*>\s*(<tbody[^>]*>)?(\s*<tr[^>
随机推荐
- SQL 优化经验总结34条
- iOS开发傻瓜式微信支付的方法教程
- CodeIgniter辅助函数helper详解
- 关于C++中void*的小作用浅析
- C#基于WebBrowser获取cookie的实现方法
- 文件缓存(配合JSON数组)
- 浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
- ajax后台处理返回json值示例代码
- Java String、StringBuffer与StringBuilder的区别
- php获取表单中多个同名input元素的值
- asp实现批量插入表单中的数据到数据库的方法
- Jquery实现控件的隐藏和显示实例
- javascript实现瀑布流自适应遇到的问题及解决方案
- Linux下如何搭建两个tomcat服务
- Android ReboundScrollView仿IOS拖拽回弹效果
- 详解Python中的__new__()方法的使用
- IE7的菜单栏位置的设置方法
- Angular Material Icon使用详解
- Angular项目如何升级至Angular6步骤全纪录
- python两个_多个字典合并相加的实例代码