急!JS显示关键字高亮问题

Question

     用JS显示关键字高亮静态页面现已实现，可是现在是把我后台的数据取到后显示高亮，数据是循环显示的，只取到了第一行数据，不知道如何做了，请高手看下

Answer 1

  //关键字高亮
function highword(nWord){ 
if(nWord!='') {
           var array = nWord.substring(1,nWord.length-1);
   array = array.split(",");
    for(var i=0;i<array.length;i++){
      var oneKey = array[i];
      alert(oneKey);
      //得到内容
var keyword= document.getElementById("tds").innerHTML;
var keywords= document.getElementById("tds").innerText;
alert(keywords);
document.getElementById("tds").innerHTML = document.getElementById("tds").innerHTML.replace(oneKey,"<a style='color:red;' href='http://www.baidu.com'>"+oneKey+"</a>"); 
}
  } } 以上是JS代码,取出来后它会连标签中的也改了 ,下面是 jsp中代码
<td align="center" id="tds">
<s:if test="!#request.newReadList.isEmpty()">
<s:iterator value="#request.newReadList"
var="rk" status="s">
<div id="perfectContent">
<table width="98%" border="0" align="center" cellpadding="10"
cellspacing="10"> <tr>
<td><a href="knowledgeConent!getDetail.do?id=${rk.kcId }"
 class="atitle">${rk.title }</a></td>
</tr>
<tr>
<td valign="top">
<div id="con">${rk.content } 
<a 
href="knowledgeConent!getDetail.do?id=${rk.kcId }" class="all">阅读全文</a>
<!--  
<a  onclick="openAtTabPanel('knowledgeConent!getDetail.do?id=${rk.kcId }')"
href="#" id="ss"  class="all">阅读全文</a>
    -->
</div>
</td>
</tr>
</table>
</div>
<div class="clear"></div>
</s:iterator>
</s:if>
<s:if test="#request.newReadList.isEmpty()">
    <span class="errorInfo">系统提示：没有您要找的信息</span>
</s:if>
   </td>

Answer 2

从你的js来看 提出以下几点
1.将innerHTMl取出来全部替换高亮完之后再innerHTML赋值回去
2.不要用innerText，浏览器的兼容问题
3.innerHTML取出来是带标签的，如果你的关键字跟标签名字一样，那么标签肯定也会被替换掉的
4.至于你说的只取到一行数据不明白什么意思，按你的代码你取到的是id="tds"这个标签里面的innerHTML

Answer 3

那就用正则吧 如果是<>尖括号里面的就不替换
为了防止原来标签输入不规范 做了曲折处理       var html = "<div>div and other content</div>";
       var word = "div";
       var replaceContent = "111";
       var reg1 = new RegExp("([\\<][^\\<\\>]*)(" + word + ")([^\\>\\<]*[\\>])", "ig");
       var str1 = html.replace(reg1, "$1{" + "$2" + "}$3");
       alert(str1);
       var reg2 = new RegExp("(^|[^\\{]+)" + word + "([^\\{]+|$)", "ig");
       var str2 = str1.replace(reg2, "$1" + replaceContent + "$2");
       alert(str2);
       var reg3 = new RegExp("\\{" + word + "\\}", "ig");
       var str3 = str2.replace(reg3, word);
       alert(str3);

Answer 4

我根据 7 楼的改了下代码，可是没反应呀，麻烦 7楼的高手帮忙看看哪还需要改，我在这先谢了 //关键字高亮
        function highLight(keyWords) 
{    
         if(keyWords !=null)
            {
      var array = keyWords.substring(1,keyWords.length-1);
      array = array.split(",");
    
     for(var i=0;i<array.length;i++)
         {  
                 var html = document.getElementById("tds").innerHTML;
                 var oneKey = array[i];
                 var replaceContent = "<a style='color:red'>"+oneKey+"</a>";
                 var reg1 = new RegExp("([\\<][^\\<\\>]*)(" + oneKey + ")([^\\>\\<]*[\\>])", "ig");
                 var str1 = html.replace(reg1, "$1{" + "$2" + "}$3");
                 var reg2 = new RegExp("(^|[^\\{]+)" + oneKey + "([^\\{]+|$)", "ig");
                 var str2 = str1.replace(reg2, "$1" + replaceContent + "$2");
                 var reg3 = new RegExp("\\{" + oneKey + "\\}", "ig");
                 var str3 = str2.replace(reg3, oneKey);
     }
      
            }
            
          }

Answer 5

替换了之后你要把值赋回去啊 要不怎么替换呢
//关键字高亮
  function highLight(keyWords) 
{  
  if(keyWords !=null)
  {
  var array = keyWords.substring(1,keyWords.length-1);
  array = array.split(",");
 var html = document.getElementById("tds").innerHTML;
  for(var i=0;i<array.length;i++)
  {  
  var oneKey = array[i];
  var replaceContent = "<a style='color:red'>"+oneKey+"</a>";
  var reg1 = new RegExp("([\\<][^\\<\\>]*)(" + oneKey + ")([^\\>\\<]*[\\>])", "ig");
  var str1 = html.replace(reg1, "$1{" + "$2" + "}$3");
  var reg2 = new RegExp("(^|[^\\{]+)" + oneKey + "([^\\{]+|$)", "ig");
  var str2 = str1.replace(reg2, "$1" + replaceContent + "$2");
  var reg3 = new RegExp("\\{" + oneKey + "\\}", "ig");
  html = str2.replace(reg3, oneKey);  }
  document.getElementById("tds").innerHTML = html;
  }
   
  }

Answer 6

谢了，高亮已经显示出来了，可还是有问题呀，比如
tds 中有如下语句 
<a style="color red" href='list.do?str=1'> 查看</a> 
关键字为s 时， 前面的s 不会被替换，后面这个 str=1 中的 s就被替换了，为什么呀，麻烦再帮我看下