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

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

  • 相关阅读:
    pyecharts 0.5.11介绍
    Python并发写入一个文件
    subprocess模块详解(二)
    subprocess模块详解(一)
    大数据环境下的数据仓库建设
    Java计算字符串相似度
    Pandas matplotlib无法显示中文解决办法
    Hadoop YARN参数介绍(四)[推荐]
    Hadoop YARN参数介绍(三)
    wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群
  • 原文地址:https://www.cnblogs.com/twgchn/p/4961878.html
Copyright © 2011-2022 走看看