搜索匹配文字亮色正则爬坑记录

一时失言乱红尘 2022-05-16 15:25 130阅读 0赞

今天做了一个关键字搜索，后台匹配写好了，前端做搜素关键字高亮色操作，踩了一上午正则的坑，在这里给大家分享一下。

首先将搜索的值及其搜索出来的标题传递到处理函数然后进行正则判断。

这里我用的是RegExp方法，这个方法是对字符串执行模式匹配，非常好用，具体的介绍大家可以去[W3C官网][W3C]查看，在这里我就不多赘述了。

redKeywords:function(title,nowSearch){//关键字红色
    	  		   var reg = new RegExp( nowSearch , "g" )
    	  		   title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
    	  		},

一开始我也没发现漏洞，测试后来提bug说大小写区分不开，自己测试发现确实正则有问题，就改写了一下

redKeywords:function(title,nowSearch){//关键字红色
    //	  		   var reg = new RegExp( nowSearch , "g" )
    	  		   var regs=new RegExp( nowSearch , "gi" )        //区分大小写
    //	  		   var c=title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
          		   return title.replace(regs,'<font color="#CC0000">'+ nowSearch +'</font>')
    	  		},

好像是没问题了，自己再经过反复测试发现搜索的内容标题会跟随搜索值一起改变大小写，这个坑爬了一上午才发现人家正则里有可以自动改变所有的匹配字符的方法

redKeywords:function(title,nowSearch){//关键字红色
    //	  		   var reg = new RegExp( nowSearch , "g" )
    //	  		   var regs=new RegExp( nowSearch , "gi" )
    //	  		   var c=title.replace(reg,'<font color="#CC0000">'+ nowSearch +'</font>')
    //	  		   var d=title.replace(regs,'<font color="#CC0000">'+ nowSearch +'</font>')
    			   var regs=new RegExp(nowSearch , "gi" )
    	  		   return title.replace(regs, '<font color="#CC0000">$&</font>')
    	  		},

说白了，这个坑就是自身对正则匹配不太熟悉才会掉进去。在这里分享给大家，希望对大家有所帮助

[W3C]: http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 php正则匹配

遇到一个图像路径的匹配问题，废话少说，直接说明： $str='../attachment/integral/2015/03/30/2015033002470952

绝地灬酷狼/ 2022年08月07日 09:52/ 0 赞/ 238 阅读

相关正则子匹配

使用括号的子字符串匹配一个正则表达式模式使用括号，将导致相应的子匹配被记住。例如，/a(b)c /可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使

约定不等于承诺〃/ 2022年06月08日 10:38/ 0 赞/ 282 阅读

相关 input 正则匹配

只能输入数字英文 <input onKeyUp="value=value.replace(/\[\\W\]/g,'')"> 输入数字:

你的名字/ 2022年06月06日 07:57/ 0 赞/ 107 阅读

相关 PHP正则匹配

PHP提供了很强大的正则匹配功能,具体的正则匹配知识点很多,在这里不做详述.只对常用API,以及常见用法的总结.更多请查看文档[PHP手册(正则表达式)][PHP] 以下是P

痛定思痛。/ 2022年06月05日 09:07/ 0 赞/ 306 阅读

相关正则匹配

1，https://www.cnblogs.com/hanxiaoyu/p/5759477.html ![SouthEast][] ![SouthEast 1]

快来打我*/ 2022年06月01日 11:25/ 0 赞/ 321 阅读

相关 python 正则表达式匹配数字练习记录

def getNum(text): numRegex = re.compile(r'((\s+|:|：)(\d{1,3})(,)?(\d{3})?(,)

Dear 丶/ 2022年05月25日 11:17/ 0 赞/ 235 阅读

相关搜索匹配文字亮色正则爬坑记录

今天做了一个关键字搜索，后台匹配写好了，前端做搜素关键字高亮色操作，踩了一上午正则的坑，在这里给大家分享一下。首先将搜索的值及其搜索出来的标题传递到

一时失言乱红尘/ 2022年05月16日 15:25/ 0 赞/ 131 阅读

相关身份证匹配正则

var reg = /^\d{17}(\d|X)$/i; // 满足18位身份证号校验 var str = '123123123123123123';

╰半橙微兮°/ 2022年05月15日 09:58/ 0 赞/ 329 阅读

相关正则匹配中文

匹配汉字文字： [\u4e00-\u9fa5] 匹配非汉字字符： [^\u4e00-\u9fa5] 匹配双字节字符（

妖狐艹你老母/ 2022年03月22日 11:55/ 0 赞/ 384 阅读

相关中文正则表达式匹配-正则中文匹配

这篇文章主要讲如何使用正则匹配中文字符，中文正则表达式的匹配规则不像其他正则规则一样容易记住，下面一起看看这个中文正则表达式是怎么样的。 `\w`匹配的仅仅是中文，数字，字母

柔情只为你懂/ 2021年07月04日 18:20/ 0 赞/ 744 阅读