zoukankan      html  css  js  c++  java
  • 关键字高亮显示,js轻松实现

    用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

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

  • 相关阅读:
    Mondriaan's Dream POJ
    H
    Superdoku Kattis
    Corn Fields POJ
    旅行的意义 Gym
    G
    J
    Welcome Party ZOJ
    redis入门到精通系列(三):key的通用操作和redis内部db的通用操作
    redis入门到精通系列(二):redis操作的两个实践案例
  • 原文地址:https://www.cnblogs.com/twgchn/p/4961878.html
Copyright © 2011-2022 走看看