页面高亮显示搜索关键字

页面高亮显示搜索关键字

访问我的blog的人, 大部分是通过搜索引擎找过来的, 我一直想要提供象google的这样一个功能: 你想找的内容, 我给你高亮显示出来.



这个功能, 我已经发布一段时间了, 就是下面图片的效果, 不知道有哪些人注意到 :)



给出代码先.页面脚本部分:

<script type="text/javascript">
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 != "highlight") {
// 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 = "highlight";
hiword.appendChild(hiwordtext);
pn.insertBefore(before,node);
pn.insertBefore(hiword,node);
pn.insertBefore(after,node);
pn.removeChild(node);
}
}
}
}

function searchHighlight() {
if (!document.createElement) return;
ref = document.referrer;
if (ref.indexOf('?') == -1 || ref.indexOf('http://blog.run2me.com/geniusleft/') != -1)    {
ref = document.location.href;
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;
// keyword refer: q= for Google or for msn, p= for Yahoo, wd= for baidu, w= for QQ
if (qsip[0] == 'q' || qsip[0] == 'p' || qsip[0] == 'wd' || qsip[0] == 'w'  ) {
words = unescape(qsip[1].replace(//+/g,' ')).split(//s+/);
for (w=0;w<words.length;w++) {
highlightWord(document.getElementsByTagName("body")[0],words[w]);
}
}
}
}

window.onload = searchHighlight;
</script>

样式表部分:

span.highlight {
background-color:Yellow;
padding: 0 0.5em 0 0.5em;
font-weight:bold;
}

实现很简单, 详细的原理, 可参考鸟食轩的这篇<<利用搜索引擎引用来高亮页面关键字>>. 总的来说是两点

利用document.referrer属性获取搜索关键字,这是有规律的,因为搜索关键字在查询网址中, 如google的关键字是网址后变量q对应的值.

利用script脚本递归分析页面DOM结构,对匹配的搜索关键字赋予指定的样式属性,如,我把所有的匹配关键字都赋予"highlight"样式.

对上面的脚本, 你也可以添加搜索引擎,只要添加关键字对应变量名就行了.

这个功能对任何网页都是适用的. 希望这能帮助你的页面对读者更友好.