文章介绍了javascript实现搜索引擎关键词高亮显示实现代码,在用google,baidu时都会发现你搜索的词被用不同的色给显示出来了，下面这个实例也是要做这样的功能哦。
原理:
在页面加载完成时获取页面来源（document.referrer），并分析搜索引擎关键词，然后获取页面上所有元素，递归查询是否含有搜索关键字，如果有，就创建一个 span 元素，并应用关键词样式，替换原有节点
| 代码如下 |
|
|
<script type="text/javascript">
<!--
// 说明：获取搜索引擎关键字并高亮显示
// 整理：http://www.111cn.net
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>
|
