如何用jQuery保留表格中td文本精确匹配指定字符串的行？

需求说明 #

需要保留id为mytable的表格中，td文本与指定字符串精确匹配的行，删除所有不满足条件的行。

原代码与问题 #

用户原代码如下：

$(document).ready(function() {
    var str = "b";
    $("#mytable tr td:not(:contains(str))").parent().remove();
});
//this doesn't work

对应的表格结构：

<table border="0" align="center" width="45%" cellpadding="2" cellspacing="2"  id="mytable">
    <tr>
        <td align="center" width="15%">A</td>
        <td align="center" width="15%">B</td>
        <td align="center" width="15%">C</td>
    </tr>
    <tr>
        <td align="center" width="15%">AA</td>
        <td align="center" width="15%">BB</td>
        <td align="center" width="15%">CC</td>
    </tr>
    <tr>
        <td align="center" width="15%">AAA</td>
        <td align="center" width="15%">BBB</td>
        <td align="center" width="15%">CCC</td>
    </tr>
</table>

原代码失效的核心原因：

• :contains(str)中的str是字符串字面量，并非引用变量，实际是在查找包含"str"的td，而非变量中的"b"。
• :contains是包含匹配，会匹配所有包含目标字符串的内容（比如"B""BB""BBB"），无法实现精确匹配。

解决方案 #

方案一：使用.filter()实现精确匹配 #

通过遍历表格行，检查每行是否存在与目标字符串精确匹配的td，移除不满足条件的行：

$(document).ready(function() {
    var targetStr = "b";
    $("#mytable tr").filter(function() {
        // 检查当前行是否有td文本与目标字符串精确匹配（区分大小写）
        return !$(this).find("td").filter(function() {
            return $.trim($(this).text()) === targetStr;
        }).length;
    }).remove();
});

如果需要不区分大小写的精确匹配，修改匹配逻辑：

return $.trim($(this).text()).toLowerCase() === targetStr.toLowerCase();

方案二：自定义jQuery选择器（复用场景） #

如果需要多次使用精确匹配逻辑，可以自定义一个选择器：

// 自定义精确匹配文本的选择器
$.expr[':'].textExact = function(obj, index, meta) {
    return $.trim($(obj).text()) === meta[3];
};

$(document).ready(function() {
    var targetStr = "b";
    // 删除所有无精确匹配td的行
    $("#mytable tr:not(:has(td:textExact('" + targetStr + "')))").remove();
});

代码说明 #

• $.trim()用于去除td文本前后的空格，避免因空格导致匹配失败。
• 方案一逻辑直观，适合单次使用；方案二通过自定义选择器提升复用性。

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