码迷,mamicode.com
首页 > Web开发 > 详细

关键字高亮显示,js轻松实现

时间:2015-11-13 14:42:24      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

用js实现关键字搜索高亮显示,内附源码点击下载

技术分享
<script>
    //关键字高亮显示func
    function InitialKeywordsShow(_keywords, obj, caseTrue) {
        //var reg = new RegExp(_keywords, "g");//区分大小写
        var reg = new RegExp(_keywords, "gi"); //不区分大小写
        if (caseTrue) {
            var reg = new RegExp(_keywords, "g");
        }
        if (obj && obj.childNodes && obj.childNodes.length > 0) {
            for (var i = 0; i < obj.childNodes.length; i++) {
                if (obj.childNodes[i].nodeType == 3 && obj.childNodes[i].nodeValue && obj.childNodes[i].nodeValue.length > 0) {
                    var txtnew = obj.childNodes[i].nodeValue.replace(reg, "<font color=‘red‘ style=‘ background:#e48b00;color:#fff;‘>" + _keywords + "</font>");
                    var _span = document.createElement("span");
                    _span.innerHTML = txtnew;
                    obj.replaceChild(_span, obj.childNodes[i]);
                }
                else if (obj.childNodes[i].nodeType == 1) {
                    InitialKeywordsShow(_keywords, obj.childNodes[i], caseTrue);
                }
            }
        }
    }
    //搜索func
    function SearchClick() {
        var fonts = document.getElementsByTagName("font");
        if (fonts && fonts.length > 0) {
            for (var i = 0; i < fonts.length; i++) {
                fonts[i].style.backgroundColor = "#fff";
                fonts[i].style.color = "black"
            }
        }
        var keyWords = document.getElementById("txtKeywords").value;
        var obj_content = document.getElementById("content");
        if (!keyWords) {
            alert("请输入关键字");
            return false;
        }
        var upTrue = document.getElementById("chkUp").checked;
        InitialKeywordsShow(keyWords, obj_content, upTrue);
    }
</script>
View Code

 --尊重他人成果,转载请注明出处,谢谢!

关键字高亮显示,js轻松实现

标签:

原文地址:http://www.cnblogs.com/twgchn/p/4961878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!