首页 > Web开发 > 详细

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

时间:2015-11-13 14:40:40      阅读:279      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!