jQuery实现表格文本搜索时如何忽略空格进行匹配

原代码的问题点 #

• 原尝试的空格移除逻辑失效：replace(" ", "")仅能替换文本中第一个出现的空格，无法移除所有空白内容，导致匹配时依然存在残留空格干扰。
• 存在冗余无效循环：遍历每一行表格元素时，对当前行本身调用each()方法，由于当前是单个DOM元素，这层循环没有实际作用，属于多余操作。
• 未对搜索关键词做同步去空格处理，仅处理表格文本的话，无法兼容双向匹配场景（比如表格存无空格文本、用户输入带空格关键词的情况）。

修正后可直接运行的完整代码 #

$(document).ready(function() {
    $('#search').keyup(function() {
        search_table($(this).val());
    });

    function search_table(value) {
        // 处理用户输入：移除所有空白字符、统一转小写
        const searchKeyword = value.replace(/\s+/g, '').toLowerCase();
        
        $('table .rows').each(function() {
            // 处理当前行文本：移除所有空白字符、统一转小写
            const rowFullText = $(this).text().replace(/\s+/g, '').toLowerCase();
            const isRowMatch = rowFullText.indexOf(searchKeyword) >= 0;

            // 根据匹配结果控制行的显示/隐藏
            $(this).toggle(isRowMatch);
        });
    }
});

核心优化说明 #

• 采用正则全局匹配替换：用/\s+/g匹配所有连续空白（普通空格、制表符、换行都可覆盖），彻底清除文本中的所有空格残留，实现无空格的文本匹配。
• 精简DOM操作：移除冗余的嵌套循环，直接读取整行的文本内容做匹配，比逐个遍历单元格的写法性能更好、逻辑更简洁。
• 双向兼容匹配逻辑：搜索关键词和表格文本同时做去空格、转小写的标准化处理，可实现两类场景的正常匹配：
  • 表格内容为John Smith时，输入Johnsmith可正确命中对应行
  • 表格内容为JohnSmith时，输入John smith也可正常命中
• 用jQuery内置的toggle(布尔值)方法替代冗余的if判断逻辑，代码更简洁。
• 替换原代码中字符串格式的'true'/'false'标记为标准布尔值，避免隐式类型转换带来的潜在逻辑问题。

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