首页 - 文章 - Javascript - Javascript小技巧

javascript 获取搜索引擎关键字并高亮显示

作者: Codebit     来源: Codebit.cn     时间: 2007-03-15 23:42:53
摘要: 获取搜索引擎关键字并高亮显示能很大程度的提高用户体验，方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。
归类: Javascript,

关键词: 链接, url, javascript, 高亮, 关键字, 搜索,

获取搜索引擎关键字并高亮显示能很大程度的提高用户体验，方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。


示例：


您可以在 google 里搜索 "codebit.cn Javascript 锚点 平滑跳转" ，然后点击跳往本站的链接即可看到效果。


Javascript:
  1.  
  2. <script type="text/javascript"> 
  3. <!-- 
  4. // 说明：获取搜索引擎关键字并高亮显示 
  5. // 整理：http://www.CodeBit.cn 
  6.  
  7. /* http://www.kryogenix.org/code/browser/searchhi/ */ 
  8. /* Modified 20021006 to fix query string parsing and add case insensitivity */ 
  9. function highlightWord(node,word) { 
  10.     // Iterate into this nodes childNodes 
  11.     if (node.hasChildNodes) { 
  12.         var hi_cn; 
  13.         for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) { 
  14.             highlightWord(node.childNodes[hi_cn],word); 
  15.         } 
  16.     } 
  17.      
  18.     // And do this node itself 
  19.     if (node.nodeType == 3) { // text node 
  20.         tempNodeVal = node.nodeValue.toLowerCase(); 
  21.         tempWordVal = word.toLowerCase(); 
  22.         if (tempNodeVal.indexOf(tempWordVal) != -1) { 
  23.             pn = node.parentNode; 
  24.             if (pn.className != "searchword") { 
  25.                 // word has not already been highlighted! 
  26.                 nv = node.nodeValue; 
  27.                 ni = tempNodeVal.indexOf(tempWordVal); 
  28.                 // Create a load of replacement nodes 
  29.                 before = document.createTextNode(nv.substr(0,ni)); 
  30.                 docWordVal = nv.substr(ni,word.length); 
  31.                 after = document.createTextNode(nv.substr(ni+word.length)); 
  32.                 hiwordtext = document.createTextNode(docWordVal); 
  33.                 hiword = document.createElement("span"); 
  34.                 hiword.className = "searchword"; 
  35.                 hiword.appendChild(hiwordtext); 
  36.                 pn.insertBefore(before,node); 
  37.                 pn.insertBefore(hiword,node); 
  38.                 pn.insertBefore(after,node); 
  39.                 pn.removeChild(node); 
  40.             } 
  41.         } 
  42.     } 
  43. } 
  44.  
  45. function googleSearchHighlight() { 
  46.     if (!document.createElement) return; 
  47.     ref = document.referrer; 
  48.     if (ref.indexOf('?') == -1) return; 
  49.     qs = ref.substr(ref.indexOf('?')+1); 
  50.     qsa = qs.split('&'); 
  51.     for (i=0;i<qsa.length;i++) { 
  52.         qsip = qsa[i].split('='); 
  53.         if (qsip.length == 1) continue; 
  54.         if (qsip[0] == 'q' || qsip[0] == 'p') { // q= for Google, p= for Yahoo 
  55.             words = unescape(decodeURIComponent(qsip[1].replace(/\+/g,' '))).split(/\s+/); 
  56.             for (w=0;w<words.length;w++) { 
  57.                 highlightWord(document.getElementsByTagName("body")[0],words[w]); 
  58.             } 
  59.         } 
  60.     } 
  61. } 
  62.  
  63. window.onload = googleSearchHighlight; 
  64.  
  65. //--> 
  66. </script> 
  67.  



同时，您需要为要高亮的关键词设置一个样式：
CSS:
  1.  
  2. <style type="text/css"> 
  3. .searchword { 
  4.     background-color: yellow; 
  5. } 
  6. </style> 
  7.  



实现原理：


在页面加载完成时获取页面来源（document.referrer），并分析搜索引擎关键词，然后获取页面上所有元素，递归查询是否含有搜索关键字，如果有，就创建一个 span 元素，并应用关键词样式，替换原有节点。


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)