表格搜索文本高亮残留BUG修复及指定列高亮实现咨询

一、残留高亮BUG修复 #

根因分析 #

1. 原代码仅移除.highlight类名，未删除之前生成的高亮<span>标签，导致样式残留
2. 搜索词为空时未提前终止逻辑，空字符串生成的正则会匹配所有字符，产生无效高亮
3. 原有匹配逻辑顺序错误，未匹配到内容时仍存在DOM操作残留

修复要点 #

• 搜索词为空时直接清除所有高亮标签，恢复单元格原始文本，显示全部行
• 处理每个单元格前先重置为纯文本，清除上一次的高亮标签
• 修复正则匹配的边界判断，避免空搜索词触发匹配

二、指定列高亮实现 #

实现思路 #

给需要高亮的列添加专属标识类，高亮函数仅对带有该类的单元格执行匹配逻辑，无需硬编码列索引，适配性更强

三、修改后完整代码 #

1. 调整CSS（合并重复规则，可选项） #

.highlight {
    background-color: gold;
    padding:1px 4px;
    margin: 0 -4px;
}

2. 修改renderReports函数，给目标列加标识类 #

function renderReports(items) {
    var html = '';
    for (var i = 0; i < items.length; i++)
    {
        html += '<tr><td><input type="checkbox" id="selectedReports" onchange="chkInputChanged(event)"/></td>'
        html += '<td>' + items[i].DateActivity + '</td>'
        // 给SUMMARY TITLE列加highlight-target类
        html += '<td class="highlight-target">' + items[i].Name + '</td>'
        html += '<td>' + items[i].ActivityType + '</td>'
        html += '<td>' + items[i].SubActivityType + '</td>'
        // 给ACTIVITY DETAILS列加highlight-target类
        html += '<td class="highlight-target" id="searchActivityDetails">' + items[i].ActivityDetails + '</td></tr>'
    }
    $('#reports').empty();
    $('#reports').append(html);
}

3. 重写highlightActivity高亮函数 #

function highlightActivity() {
    var searchTerm = $('#uniStringSearch').val().trim();
    var tableID = ''
    switch (webPage) {
        case 'reports':
            tableID = '#currentReports';
            break;
        case 'analysis':
             tableID = '#currentAnalysis';
            break;
        case 'statuses':
            tableID = '#currentStatuses';
            break;
        default:
            return;
    }
    // 搜索词为空的情况：清除所有高亮，显示全部行
    if (!searchTerm) {
        $(tableID).find('.highlight').each(function() {
            // 把高亮span替换为纯文本
            $(this).replaceWith($(this).text());
        });
        $(tableID).find('tbody tr').show();
        return;
    }
    // 仅选择带highlight-target类的目标列单元格
    $(tableID).find('tr td.highlight-target').each(function () {
        const $td = $(this);
        // 先重置单元格为纯文本，清除上一次的高亮标签
        const originalText = $td.text();
        $td.text(originalText);
        if ($td.attr('data-search') === 'false') return;
        const lowerSearch = searchTerm.toLowerCase();
        const lowerText = originalText.toLowerCase();
        const hasMatch = lowerText.includes(lowerSearch);
        if (hasMatch) {
            // 构建正则，注意转义特殊字符
            const escapedSearch = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const regex = new RegExp(escapedSearch, 'ig');
            const newHtml = originalText.replace(regex, match => `<span class="highlight">${match}</span>`);
            $td.html(newHtml);
        }
    });
    // 统一处理行的显示隐藏
    $(tableID).find('tbody tr').each(function() {
        $(this).find('.highlight').length > 0 ? $(this).show() : $(this).hide();
    });
}

四、额外优化点 #

• 增加了正则特殊字符转义，避免搜索词包含.+*等特殊字符时正则报错
• 移除了冗余的setTimeout逻辑，无延迟处理DOM操作避免闪烁
• 统一处理行显示隐藏逻辑，避免逐单元格判断产生的重复操作

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