利用正则、replace实现搜索关键字页面关键字高亮显示
在浏览器中按住ctrl+F搜索关键字，在网页中关键字就会高亮显示。那么我们在项目中怎么实现搜索框中搜索关键字，在页面的内容区域实现高亮显示呢？
思路：要给一个词汇添加样式那么这个词汇肯定是被一个标签包裹的，用replace将输入的搜索框的value值在内容区域进行匹配将匹配的词汇添加标签，这就是整体的思路。但是还有一个问题，如果我们的搜索框不做限制可以输入任何字符，那么我们输入*搜索，replace(/*/g,'')就会将*作为特殊字符匹配前面的子表达式零次或多次，要匹配*字符那么我们就要对他进行转译。下面我们来写一下这个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索高亮显示Demo</title>
<style>
*{
margin: 0px;
padding: 0px;
}
header{
width: 100%;
height: 64px;
padding: 0px 20px;
border-bottom: 1px solid #ddd;
background: #f9f9f9;
box-sizing: border-box;
}
input{
width:400px;
height: 36px;
margin-top: 14px;
padding: 0px 10px;
border: 1px solid #ddd;
background: #fff;
box-sizing: border-box;
}
li{
width: 100%;
height: 48px;
padding-left: 20px;
line-height: 48px;
border-bottom: 1px solid #eee;
box-sizing: border-box;
color: #333;
list-style: none;
}
.hight-light{
font-style: normal;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<body>
<header>
<input type="text" />
</header>
<ul>
<li>12*24</li>
<li>你&我</li>
<li>^开头的</li>
<li>1+2</li>
<li>1.34</li>
<li>你是谁?</li>
<li>[北京邮电出版社]</li>
<li>你/我</li>
<li>来个反斜杠吧\</li>
<li>|这是或者的意思吧</li>
<li>(这就是一个注释)</li>
</ul>
<script>
//在正则表达式中的特殊字符有*.?+$^[](){}|\/因此我们将对这些特殊字符进行处理
var regArr = ['*','.','?','+','$','^','[',']','(',')','{','}','|','\\','/' ];//将这些特殊字符放进一个数组中
$('input').keyup(function(e){
if(e.keyCode==13){//搜索框的回车事件进行搜索
var tv = $(this).val(),//搜索框的内容
regText = tv;//定义一个变量regText也是等于搜索框的内容
//对特殊字符进行遍历，来替换搜索框张value值的特殊字符例如将*替换为\*因为在下边查找关键字的时候需要将特殊字符转译，现在就是对搜索框中的特殊字符进行转译
for(var i=0;i<regArr.length;i++){
var charReg = new RegExp('\\'+regArr[i]+'','g');
if(charReg.test(tv)){//判断搜索框的value值是否能够匹配上这个特殊字符
//将搜索框中的特殊字符进行替换，在这里说明一下，为什么要定义regText和tv两个变量来存储搜索框的value值而不是一个！又为什么让regText等于tv匹配后的值。如果搜索框俩的value值含有两个及以上的特殊字符，改为tv=tv.replace(charReg,'\\'+regArr[i]+'')例如*？第一遍循环的时候匹配*此时tv=\*?那么第二遍循环的时候就会将*再匹配一遍同时还添加了特殊字符\
regText = tv.replace(charReg,'\\'+regArr[i]+'')
}
}
var searchReg = new RegExp(regText,'ig');//不区分大小写的匹配特殊字符
//遍历li
$('ul li').each(function(){
$(this).html($(this).text().replace(searchReg,function(value){return '<i class="hight-light">'+value+'</i>'}));//注意这里用html()而不是text是因为匹配替换之后含有i标签
})
}
})
</script>
</body>
</html>
