页面高亮显示搜索关键字

页面高亮显示搜索关键字

    访问我的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"样式.

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

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