在静态页面内实现关键字搜索并高亮显示

在静态页面内实现关键字搜索并高亮显示，效果如图：
在静态页面内实现关键字搜索并高亮

示例代码如下，可以直接保存为一个html文件使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内实现搜索并高亮</title>
    <style type="text/css">
        .tb {
            width: 540px;
            margin:10px auto;
        }
        .tc{
            width:540px;
            margin:10px auto;

            /*悬浮居中*/
            /*position:fixed;*/
            /*left:50%;*/
            /*top:50%;*/
            /*margin-left:-150px;*/
            /*margin-top:-110px;*/
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        .tg  {border-collapse:collapse;border-spacing:0;margin:0px;}
        .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
            overflow:hidden;padding:10px 5px;word-break:normal;}
        .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
            font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
        .tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
        .tg .tg-q2kd{background-color:#dae8fc;border-color:inherit;color:#000000;font-family:Arial, Helvetica, sans-serif !important;
            font-weight:bold;text-align:left;vertical-align:middle}
        .tg .tg-r5f0{background-color:#dae8fc;border-color:inherit;color:#000000;font-family:Arial, Helvetica, sans-serif !important;
            font-size:100%;font-weight:bold;text-align:left;vertical-align:middle}
    </style>
</head>
<body>
<div class="tc">
    <form>
        <span style="font-weight: normal;">输入关键字：</span><input type="text" id="txtSearchKeyword" value="" placeholder="请输入关键字查找">
        <span class="btn"><button type="button" id="btn" class="btn_in w62">搜索</button></span>
    </form>
</div>
<div class="tb">
    <table class="tg">
        <thead>
        <tr>
            <th class="tg-r5f0">类型标识</th>
            <th class="tg-q2kd">类型名称</th>
            <th class="tg-q2kd">类型描述</th>
            <th class="tg-q2kd">数据列1</th>
            <th class="tg-q2kd">数据列2</th>
            <th class="tg-q2kd">数据列3</th>
            <th class="tg-q2kd">数据列4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="tg-lboi">1</td>
            <td class="tg-lboi">speed</td>
            <td class="tg-lboi">快速版</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
        </tr>
        <tr>
            <td class="tg-lboi">104</td>
            <td class="tg-lboi">helper</td>
            <td class="tg-lboi">工具人</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
            <td class="tg-lboi">运营类</td>
        </tr>
        </tbody>
    </table> 
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.textSearch-1.0.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        // 页面加载完毕后搜索文本框设置输入焦点
        $("#txtSearchKeyword").focus();
        
        // 点击搜索按钮
        $("#btn").click(function () {
            search();
        });

        // 键盘回车
        $("#txtSearchKeyword").keydown(function (e) {
            const curKey = e.which;
            if(curKey == 13){
                // 回车键
                search();
                return false;
            }
        });
    });
    
    function search() {
        highlight();
    }

    function highlight() {
        //先清空一下上次高亮显示的内容
        clearSelection();
        //获取输入的关键词
        var searchText = $("#txtSearchKeyword").val();
        //创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了
        var regExp = new RegExp(searchText, 'gi');
        //遍历表格每个单元格
        var location = 0;
        $('td').each(function() {
            var html = $(this).html();
            //将找到的关键词替换，加上highlight属性
            var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');
            if (html !== newHtml) {
                console.log("找到了目标值");
                // 更新段落内容，实现高亮
                $(this).html(newHtml);
                // 记录要跳转的目标位置
                location = $(this).offset().top;
            }
        });
        console.log("location: "+location);
        // 跳转到搜索到的关键字位置，便于查看
        $(window).scrollTop(location);
    }

    function clearSelection() {
        $('td').each(function() {
            //找到所有highlight属性的元素
            $(this).find('.highlight').each(function() {
                //将highlight样式去掉
                $(this).replaceWith($(this).html());
            });
        });
    }
</script>
</html>
posted @ 2022-07-19 20:26  nuccch  阅读(216)  评论(0)  编辑  收藏  举报