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

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

  • 相关阅读:
    Reinforcement Learning Qlearning 算法学习3 AI
    2012年末工作中遇到的问题总结及感悟
    对JMS的一些认识
    readme
    数据库表扩展字段设计思路
    对网络安全性和apache shiro的一些认识
    JDK版本的了解
    下拉框“数据字典”设计
    缓存学习总结
    apache commons包简介
  • 原文地址:https://www.cnblogs.com/twgchn/p/4961878.html
Copyright © 2011-2022 走看看