获取搜索引擎关键字并高亮显示能很大程度的提高用户体验，方便用户迅速找到自己需要的相关信息。本文介绍的是用客户端的 javascript 代码来实现这一目的。
您可以在 google 里搜索 "codebit.cn Javascript 锚点 平滑跳转" ，然后点击跳往本站的链接即可看到效果。
<script type="text/javascript"> <!-- // 说明：获取搜索引擎关键字并高亮显示 // 整理：[url]http://www.CodeBit.cn[/url] /* [url]http://www.kryogenix.org/code/browser/searchhi/[/url] */ /* 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>
同时，您需要为要高亮的关键词设置一个样式：
<style type="text/css"> .searchword { background-color: yellow; } </style>
