js高亮显示搜索关键字并忽略大小写的代码

发布时间:2020-12-21编辑:脚本学堂
为大家介绍一个javascript代码实现的高亮显示搜索关键字,忽略大小写的例子,有需要的朋友,可以参考下。

代码如下:

<html>
<head>
<title>高亮显示搜索关键字-www.jb200.com</title>
<style type="text/css">
.highlight {color:red;}
</style>
<script type="text/javascript">
function highword(nWord){ 
 var table = document.getElementById("row");
 if (table!=null)
  highLightKeyWord(table,nWord,"highlight");
}
function highLightKeyWord(eTable,strKeyWord,className){
   var rows = eTable.rows;
   //var oRegExp = new RegExp("" + strKeyWord + "","g");//g表示全局搜索,i表示忽略大小写
   var oRegExp = new RegExp("" + strKeyWord + "","img");
   for(var i=0,rl=rows.length;i<rl;i++){
      var r = rows.item(i);
      for(var j=0,tl=r.cells.length;j<tl;j++){
         var innerText = r.cells.item(j).innerHTML;
         if (innerText.indexOf("<")<0 && i>0) {
     var searchValue=innerText.match(oRegExp,strKeyWord);
     //var tmp = innerText.replace(oRegExp,"<span class='"+className+"'>"+strKeyWord+"</span>");
     var tmp = innerText.replace(oRegExp,"<span class='"+className+"'>"+searchValue+"</span>");
       r.cells.item(j).innerHTML = tmp;
      }
      }
   }
}
</script>
</head>
<body onload="highword('Nms')">
<table id="row">
<tr>
<th width=100 align="left">列1</th><th width=100 align="left">列2</th><th width=100 align="left">列3</th>
</tr>
<tr>
<td>NMSABC</td>
<td>NmsAbc</td>
<td>nmsabc</td>
</tr>
<tr>
</table>
</body>
</html>

#---
好东西不怕多,再为大家友情提供另一个例子,有空就来脚本学堂转转吧,总会有惊喜。
广告穿插完毕,呵呵!
#---

附,搜索多个关键字之后,高亮显示,并且忽略大小写:

<script>
/**
 * 高亮显示搜索关键字
 * www.jb200.com
*/
function HighLight(nWord){
 if(nWord!=''){
  var keyword = document.body.createTextRange();
  while(keyword.findText(nWord)){
   keyword.pasteHTML("<span style='color:blue;background-color:#FFFF00'>" + keyword.text + "</span>");
   keyword.moveStart('character',1);
  }
 }
}
 
function highword(nWord){
  var array = nWord.split(" ");
  for(var i=0;i<array.length;i++){
alert(array[i]);
   HighLight(array[i]);
 }
} 
</script>

<body onload="highword('LI  jin')">
<table id="row">
<tr><td>liujinzhong liujinzhong liuzhong</td></tr>
<tr><td>liujinzhong liujinzhong liuzhong</td></tr>
<tr><td>LiuJinzhong LIUjinzhong liuzhong</td></tr>
</table>
<p>liujinzhong liujinzhong liuzhong</p>
</body>