一个菜鸟的互联网技术分享博客
您的位置: 主页 > 利用正则、replace实现搜索关键字页面关键字高亮显示
advertisement

利用正则、replace实现搜索关键字页面关键字高亮显示

代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>高亮</title>  
  6.     </head>  
  7.     <style>  
  8.     *{  
  9.         margin: 0px;  
  10.         padding: 0px;  
  11.     }  
  12.     header{  
  13.         width: 100%;  
  14.         height: 64px;  
  15.         padding: 0px 20px;  
  16.         border-bottom: 1px solid #ddd;  
  17.         background: #f9f9f9;  
  18.         box-sizing: border-box;  
  19.     }  
  20.     input{  
  21.         width:400px;  
  22.         height: 36px;  
  23.         margin-top: 14px;  
  24.         padding: 0px 10px;  
  25.         border: 1px solid #ddd;  
  26.         background: #fff;  
  27.         box-sizing: border-box;  
  28.     }  
  29.     li{  
  30.         width: 100%;  
  31.         height: 48px;  
  32.         padding-left: 20px;  
  33.         line-height: 48px;  
  34.         border-bottom: 1px solid #eee;  
  35.         box-sizing: border-box;  
  36.         color: #333;  
  37.         list-style: none;  
  38.     }  
  39.     .hight-light{  
  40.         font-style: normal;  
  41.         color: red;  
  42.     }  
  43.     </style>  
  44.     <body>  
  45.         <ul>  
  46.             <li>12*24</li>  
  47.             <li>你&我</li>  
  48.             <li>^开头的</li>  
  49.             <li>1+2</li>  
  50.             <li>1.34</li>  
  51.             <li>你是谁?</li>  
  52.             <li>[北京邮电出版社]</li>  
  53.             <li>你/我</li>  
  54.             <li>来个反斜杠吧\</li>  
  55.             <li>|这是或者的意思吧</li>  
  56.             <li>(这就是一个注释)</li>  
  57.         </ul>  
  58.         <input type="text" placeholder="请输入您要搜索的内容"/>  
  59.     </body>  
  60.     <script src="https://www.zhangren.online/zhangren/jquery.min.js" type="text/javascript"></script>  
  61.     <script>  
  62.         $(function(){  
  63.              //在正则表达式中的特殊字符有*.?+$^[](){}|\/因此我们将对这些特殊字符进行处理  
  64.             var regArr = ['*','.','?','+','$','^','[',']','(',')','{','}','|','\\','/' ];//将这些特殊字符放进一个数组中  
  65.             $('input').keyup(function(e){  
  66.                 if(e.keyCode==13){//搜索框的回车事件进行搜索  
  67.                     var tv = $(this).val(),//搜索框的内容  
  68.                         regText = tv;//定义一个变量regText也是等于搜索框的内容  
  69.                     //对特殊字符进行遍历,来替换搜索框张value值的特殊字符例如将*替换为\*因为在下边查找关键字的时候需要将特殊字符转译,现在就是对搜索框中的特殊字符进行转译  
  70.                     for(var i=0;i<regArr.length;i++){  
  71.                         var charReg = new RegExp('\\'+regArr[i]+'','g');  
  72.                         if(charReg.test(tv)){//判断搜索框的value值是否能够匹配上这个特殊字符  
  73.                             //将搜索框中的特殊字符进行替换,在这里说明一下,为什么要定义regText和tv两个变量来存储搜索框的value值而不是一个!又为什么让regText等于tv匹配后的值。如果搜索框俩的value值含有两个及以上的特殊字符,改为tv=tv.replace(charReg,'\\'+regArr[i]+'')例如*?第一遍循环的时候匹配*此时tv=\*?那么第二遍循环的时候就会将*再匹配一遍同时还添加了特殊字符\  
  74.                             regText = tv.replace(charReg,'\\'+regArr[i]+'')  
  75.                         }  
  76.                     }  
  77.                     var searchReg = new RegExp(regText,'ig');//不区分大小写的匹配特殊字符  
  78.                     //遍历li  
  79.                     $('ul li').each(function(){      
  80.                         $(this).html($(this).text().replace(searchReg,function(value){return '<i class="hight-light">'+value+'</i>'}));//注意这里用html()而不是text是因为匹配替换之后含有i标签  
  81.                     })  
  82.                 }  
  83.             })  
  84.         })  
  85.     </script>  
  86. </html>  

线上体验
zhangren.online
上一篇:站点服务器IP地址发生变化时应该如何通知百度?
下一篇:audio兼容手机端自动播放

您可能喜欢

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​VUE知识点集锦

​VUE知识点集锦

​前端读取excel

​前端读取excel

​javaascript之最简单的倒计时代码

​javaascript之最简单的倒计时代码

回到顶部