如何为实时搜索的jQuery代码实现表格字符高亮功能？

要给你的实时搜索添加字符高亮功能，核心是把匹配到的字符用带样式的标签包裹，同时处理旧高亮清除、不区分大小写匹配、空搜索时恢复原文本这些细节。以下是修改后的完整实现：

第一步：添加高亮样式 #

先在CSS里定义高亮的外观（可根据需求调整）：

.highlight {
    background-color: #ffeb3b;
    font-weight: 600;
}

第二步：修改jQuery代码 #

替换原有的搜索逻辑部分，保留你原本的行显示/隐藏和折叠功能：

$(document).ready(function() {
    // 通用高亮函数：清除旧高亮，添加新高亮
    function highlightText(elements, searchValue) {
        elements.each(function() {
            var $el = $(this);
            // 首次存储原始文本到data属性
            if (!$el.data('original-text')) {
                $el.data('original-text', $el.html());
            }
            var originalText = $el.data('original-text');
            
            if (!searchValue.trim()) {
                // 搜索为空时恢复原始文本
                $el.html(originalText);
                return;
            }
            
            // 构建不区分大小写的正则，全局匹配
            var regex = new RegExp(searchValue, 'gi');
            // 替换匹配字符为带高亮样式的标签
            var highlightedText = originalText.replace(regex, function(match) {
                return '<span class="highlight">' + match + '</span>';
            });
            $el.html(highlightedText);
        });
    }

    // 搜索框输入事件
    $("#search-box").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        var filter = $('#search-filter').val().toLowerCase();
        var targetElements;

        if (filter == "listitem") {
            targetElements = $(".listitem");
            targetElements.filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
            // 对显示的元素应用高亮
            highlightText(targetElements.filter(':visible'), value);
        } else {
            targetElements = $(".td-" + filter);
            targetElements.filter(function() {
                $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
            // 对显示的单元格应用高亮
            highlightText(targetElements.filter(':visible'), value);
        }
    });

    // 筛选器切换事件
    $('#search-filter').on("change", function() {
        var value = $("#search-box").val().toLowerCase();
        var filter = $(this).val().toLowerCase();
        var targetElements;

        if (filter == "listitem") {
            targetElements = $(".listitem");
            targetElements.filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
            highlightText(targetElements.filter(':visible'), value);
        } else {
            targetElements = $(".td-" + filter);
            targetElements.filter(function() {
                $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
            highlightText(targetElements.filter(':visible'), value);
        }
    });

    // 保留原有的表格折叠功能
    $(".tbl-btn").click(function(e) {
        e.preventDefault();
        $(this).parent().parent().find('td:not(:first-child)').toggleClass('active');
        $(this).toggleClass('rotate');
    });
});

关键细节说明 #

• 原始文本存储：用data-original-text保存元素的初始HTML，避免多次高亮操作导致的标签嵌套问题
• 正则匹配：使用gi修饰符实现全局、不区分大小写的匹配，和原搜索逻辑保持一致
• 高亮时机：仅对visible（显示状态）的元素应用高亮，避免对隐藏元素做无用操作
• 空搜索处理：当搜索框为空时，自动恢复所有元素的原始文本，清除高亮标记

内容的提问来源于stack exchange，提问作者Ali Hossam