用JS遍历全篇文章,如果和搜索对应,就加个CSS。

解决方案 »

  1.   

    用正则将关键字替换成<a style="color:red">关键字</a>
      

  2.   


    javascript 获取搜索引擎关键字并高亮显示 
    作者: Codebit     来源: Codebit.cn     时间: 2007-03-15 23:42:53 
    摘要: 获取搜索引擎关键字并高亮显示能很大程度的提高用户体验,方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。 
    归类: Javascript, 
    关键词: 链接, url, javascript, 高亮, 关键字, 搜索, 
    获取搜索引擎关键字并高亮显示能很大程度的提高用户体验,方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。示例:您可以在 google 里搜索 "codebit.cn Javascript 锚点 平滑跳转" ,然后点击跳往本站的链接即可看到效果。
    Javascript: <script type="text/javascript"> <!-- // 说明:获取搜索引擎关键字并高亮显示 // 整理:http://www.CodeBit.cn  /* http://www.kryogenix.org/code/browser/searchhi/ */ /* Modified 20021006 to fix query string parsing and add case insensitivity */ function highlightWord(node,word) {     // Iterate into this nodes childNodes     if (node.hasChildNodes) {         var hi_cn;         for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {             highlightWord(node.childNodes[hi_cn],word);         }     }          // And do this node itself     if (node.nodeType == 3) { // text node         tempNodeVal = node.nodeValue.toLowerCase();         tempWordVal = word.toLowerCase();         if (tempNodeVal.indexOf(tempWordVal) != -1) {             pn = node.parentNode;             if (pn.className != "searchword") {                 // word has not already been highlighted!                 nv = node.nodeValue;                 ni = tempNodeVal.indexOf(tempWordVal);                 // Create a load of replacement nodes                 before = document.createTextNode(nv.substr(0,ni));                 docWordVal = nv.substr(ni,word.length);                 after = document.createTextNode(nv.substr(ni+word.length));                 hiwordtext = document.createTextNode(docWordVal);                 hiword = document.createElement("span");                 hiword.className = "searchword";                 hiword.appendChild(hiwordtext);                 pn.insertBefore(before,node);                 pn.insertBefore(hiword,node);                 pn.insertBefore(after,node);                 pn.removeChild(node);             }         }     } }  function googleSearchHighlight() {     if (!document.createElement) return;     ref = document.referrer;     if (ref.indexOf('?') == -1) return;     qs = ref.substr(ref.indexOf('?')+1);     qsa = qs.split('&');     for (i=0;i<qsa.length;i++) {         qsip = qsa[i].split('=');         if (qsip.length == 1) continue;         if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo             words = unescape(decodeURIComponent(qsip[1].replace(/\+/g,' '))).split(/\s+/);             for (w=0;w<words.length;w++) {                 highlightWord(document.getElementsByTagName("body")[0],words[w]);             }         }     } }  window.onload = googleSearchHighlight;  //--> </script>  
    同时,您需要为要高亮的关键词设置一个样式:
    CSS: <style type="text/css"> .searchword {     background-color: yellow; } </style>  
    转:http://www.codebit.cn/pub/html/javascript/tip/highlight_word/
      

  3.   

    同意黑桃六。以前在asp里做过。用的javascript。遍历网页,然后加上css。