【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位

皮皮冰要做大神

已于 2022-06-23 15:29:55 修改

阅读量1k

点赞数

分类专栏： # Jquery # JavaScript 文章标签： javascript jquery html 检索标注关键字检索

于 2022-06-23 15:27:40 首次发布

本文链接：https://blog.csdn.net/qq_38366657/article/details/125427708

版权

JavaScript 同时被 2 个专栏收录

59 篇文章 2 订阅

订阅专栏

Jquery

16 篇文章 0 订阅

订阅专栏

核心代码

全部代码

这个代码主要功能：通过关键字检索出html内容匹配项可进行上一个，下一个切换定位查看；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/libs/layui/v2.4.5/css/layui.css">
    <link rel="stylesheet" href="/libs/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .layui-search-tool{
            padding: 4px 0px 0px 0px;
            background-color: #dffbf8;
            position: fixed;
            width: 100%;
        }
        .layui-form-item{
            margin-bottom: 0px;
        }
        .body-html{
            padding: 100px;
        }
        .mark-back{
            background-color: #ff1313;
            margin: 0px 4px;
        }
        .class-search-value{
            background-color: #fff700;
            margin: 0px 4px;
        }
        .layui-btn{
            font-size: 16px;
        }
        .layui-mark-count span{
            margin: 0px 4px;
        }
    </style>
</head>
<body>
<div class="layui-search-tool">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">查找:</label>
            <div class="layui-input-inline" style="width: 300px;">
                <input type="text" name="searchValue" id="searchValue" placeholder="输入关键字,按Enter键检索..." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" id="btn-prev-mark"><span class="fa fa-arrow-circle-o-up"></span></button>
            <button type="button" class="layui-btn layui-btn-sm" id="btn-next-mark"><span class="fa fa-arrow-circle-o-down"></span></button>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label layui-mark-count" style="width: 120px;padding: 9px 0px;text-align: center;">匹配量:<span>0</span>/<span>0</span>项</label>
        </div>
    </div>
</div>

<div class="body-html">
    <p> 国务院决定对《建设项目环境保护管理条例》作如下修改：</p>

    <p>一、删去第六条第二款。</p>

    <p>二、将第七条第二款修改为：“建设项目环境影响评价分类管理名录，由国务院环境保护行政主管部门在组织专家进行论证和征求有关部门、行业协会、企事业单位、公众等意见的基础上制定并公布。”
    </p>
    <p>三、删去第八条第二款。</p>

    <p> 四、将第九条、第十条合并，作为第九条，修改为：“依法应当编制环境影响报告书、环境影响报告表的建设项目，建设单位应当在开工建设前将环境影响报告书、环境影响报告表报有审批权的环境保护行政主管部门审批；建设项目的环境影响评价文件未依法经审批部门审查或者审查后未予批准的，建设单位不得开工建设。
    </p>
    <p>“环境保护行政主管部门审批环境影响报告书、环境影响报告表，应当重点审查建设项目的环境可行性、环境影响分析预测评估的可靠性、环境保护措施的有效性、环境影响评价结论的科学性等，并分别自收到环境影响报告书之日起60日内、收到环境影响报告表之日起30日内，作出审批决定并书面通知建设单位。
</p>
    <p> “环境保护行政主管部门可以组织技术机构对建设项目环境影响报告书、环境影响报告表进行技术评估，并承担相应费用；技术机构应当对其提出的技术评估意见负责，不得向建设单位、从事环境影响评价工作的单位收取任何费用。
</p>
    <p>“依法应当填报环境影响登记表的建设项目，建设单位应当按照国务院环境保护行政主管部门的规定将环境影响登记表报建设项目所在地县级环境保护行政主管部门备案。</p>

    <p>“环境保护行政主管部门应当开展环境影响评价文件网上审批、备案和信息公开。”</p>
</div>

<script src="/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="/libs/layui/v2.4.5/layui.all.js"></script>
<script src="/libs/layer3.1.1/layer.js"></script>
<script>

    String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
        if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
            return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
        } else {
            return this.replace(reallyDo, replaceWith);
        }
    };


    $(document).ready(function () {
    
       var newFlagIndex=-1;//标注最始index 0 用-1 是下面用了 newFlagIndex++

       /**匹配量展示 2/33 **/
       function fn_mark_index() {
         //光标数据展示
         var markLength=$(".class-search-value").length;
         $(".layui-mark-count span:nth-of-type(1)").text(newFlagIndex!=-1?newFlagIndex+1:"0");
         $(".layui-mark-count span:nth-of-type(2)").text(markLength);
       }
       
       /**检索匹配的值 进行标注背景色 **/
       function fn_set_find_serach_value_mark(value) {
           if(value){
               var containsTags=$(".body-html *:contains("+value+")");//查找内容符合条件的元素内容
               if(containsTags.length>0){
                   for(var i=1;i<containsTags.length;i++){
                       var $tagsHtml=containsTags.get(i);//元素内容
                       var $textYHTML=$tagsHtml.innerHTML;//获取元素HTML
                       var upTextHtml="<span class='class-search-value'>"+value+"</span>";
                       var newHTML=$textYHTML.replaceAll(value,upTextHtml);//替换元素内容
                       $tagsHtml.innerHTML=newHTML;//重新赋值渲染
                   }
                   fn_mark_index();
               }
           }
       }
       
       /**切换上一个下一个 目标项进行重新标背景色 作为区分**/
       function fn_new_mark_backColor(index) {
           //进行重新标背景色
           $(".class-search-value").css("background-color","#fff700");//all标注重新渲染背景
           var $mark=$(".class-search-value:eq("+(index)+")");//对切换的目标项进行新背景颜色标注
           $mark.css("background-color","#ff1313");//
       }
       
       /**进行上下切换 进行光标移动**/
       function fn_markOffsetTop(index,type){
           var markLength=$(".class-search-value").length;
           if(index>=markLength && type=="next"){
               newFlagIndex=markLength-1;
               layer.msg("已到最后一个!");
               return false;
           }
           if(index<0 && type=="top"){
               newFlagIndex=0;
               layer.msg("已到第一个!");
               return false;
           }
           if(index<0 || index>markLength){
               return false;
           }
           fn_mark_index();
           fn_new_mark_backColor(index);

           //跳到切换的目标项
           var markOffsetTop= $(".class-search-value:eq("+(index)+")")[0].offsetTop;
           var searchClientTop=$(".layui-search-tool")[0].clientHeight;
           window.scrollTo({
               top:markOffsetTop- searchClientTop,
               behavior: "smooth"
           });
       }

       /**上一个**/
       $("#btn-prev-mark").off("click").on("click",function () {
           newFlagIndex=newFlagIndex-1;
           fn_markOffsetTop(newFlagIndex,"top");
       });

       /**下一个**/
       $("#btn-next-mark").off("click").on("click",function () {
           newFlagIndex++;
           fn_markOffsetTop(newFlagIndex,"next");
       });

        /**ENTER快捷键 查询**/
        window.document.onkeydown = searchRefresh;
        function searchRefresh(evt){
            evt = (evt) ? evt : window.event;
            if (evt.keyCode) {
                if(evt.keyCode === 13){
                    evt.preventDefault();
                    evt.stopPropagation();

                    //重新检索 原来的标注要重置
                    fn_old_mark_reset();

                    newFlagIndex=-1;
                    var searchValue=$("#searchValue").val();
                    if(searchValue==""){
                        return;
                    }
                    fn_set_find_serach_value_mark(searchValue);
                }
            }
        }

        /**重新检索 原来的标注要重置**/
        function fn_old_mark_reset() {
            var markList=$(".class-search-value");
            if(markList){
                for(var i=0;i<markList.length;i++)
                {
                    $(markList[i]).replaceWith(markList[i].outerText);//用文本值 替换html值 例如：22 替换标注的 <span class='class-search-value'>22</span>
                }
            }
        }


    })

</script>
</body>
</html>