返回顶部

收藏

使用javascript自动标记来自搜索结果页的关键字

更多
<html>
<head>
<style>
/*定义样式*/
.hilite1{background:#69c;}
</style>
<script language="javascript" type="text/javascript">
    Hilite = {
        exact: true,
        max_nodes: 1000,
        style_name: 'hilite',
        style_name_suffix: true
    };
    Hilite.hiliteElement = function (elm, query) {
        if (!query || elm.childNodes.length == 0)
            return;
        query = query.split(/[\s,\+\.]+/);
        var qre = new Array();
        for (var i = 0; i < query.length; i++) {
            query[i] = query[i].toLowerCase();
            if (Hilite.exact)
                qre.push('\\b' + query[i] + '\\b');
            else
                qre.push(query[i]);
        }
        qre = new RegExp(qre.join("|"), "i");
        var stylemapper = {};
        for (var i = 0; i < query.length; i++) {
            if (Hilite.style_name_suffix)
                stylemapper[query[i]] = Hilite.style_name + (i + 1);
            else
                stylemapper[query[i]] = Hilite.style_name;
        }
        var textproc = function (node) {
            var match = qre.exec(node.data);
            if (match) {
                var val = match[0];
                var k = '';
                var node2 = node.splitText(match.index);
                var node3 = node2.splitText(val.length);
                var span = node.ownerDocument.createElement('SPAN');
                node.parentNode.replaceChild(span, node2);
                span.className = stylemapper[val.toLowerCase()];
                span.appendChild(node2);
                return span;
            } else {
                return node;
            }
        };
        Hilite.walkElements(elm.childNodes[0], 1, textproc);
    };
    Hilite.walkElements = function (node, depth, textproc) {
        var skipre = /^(script|style|textarea)/i;
        var count = 0;
        while (node && depth > 0) {
            count++;
            if (count >= Hilite.max_nodes) {
                var handler = function () {
                    Hilite.walkElements(node, depth, textproc);
                };
                setTimeout(handler, 50);
                return;
            }
            if (node.nodeType == 1) {
                if (!skipre.test(node.tagName) && node.childNodes.length > 0) {
                    node = node.childNodes[0];
                    depth++;
                    continue;
                }
            } else if (node.nodeType == 3) {
                node = textproc(node);
            }
            if (node.nextSibling) {
                node = node.nextSibling;
            } else {
                while (depth > 0) {
                    node = node.parentNode;
                    depth--;
                    if (node.nextSibling) {
                        node = node.nextSibling;
                        break;
                    }
                }
            }
        }
    };
    Hilite.autoForSeachEngine = function () { 
        var re = new RegExp('[\\?&](q|keyword|qk|wd|p)=([^&]+)','ig');
        var ref = document.referrer || 'http://search.yahoo.com/search?p=javascript&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701';
        addLoadEvent(function () {
            var match = re.exec(ref);
            if (match) {
                var query = decodeURIComponent(match[2]);
                 Hilite.hiliteElement(document.getElementById('divMain'), query); 
            }
        });
    };
    function addLoadEvent(f) {
        var old = window.onload;
        if (typeof old != 'function') window.onload = f;
        else { window.onload = function () { old(); f(); }; }
    }

    Hilite.autoForSeachEngine();
</script>
</head>
<body>
<div id="divMain">
我是test,我要被highlight。我们是javascript,我们是javascript
</div>
</body>
</html>

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象