javascript - 获取表数据之间有空格的表行文本

Question

我有一个 html 表，我正在尝试为其构建搜索功能。我的正则表达式应该找到任何表格行，其中包含以搜索栏中的文本开头的单词。

我相信正则表达式是正确的，但发现问题实际上出在 tr.text() 部分。使用 .text() 将 tr 中每个 td 的文本混合在一起。这可以防止对每列进行“单词开头”搜索，并且仅适用于后面跟有空格的单词。

现在我意识到解决这个问题的最简单方法是通过标记插入空格。但恐怕这会改变表格的布局。

有没有办法获取 tr 的文本，但分割子 td 的文本(最好用空格)？

编辑:下面是我的困境的代码示例。

HTML:

<input type="text" id="search" placeholder="Type to search...">

<table>
    <tr class='searchable'>
        <td>Column1 TextA</td>
        <td>Column2TextA</td>
        <td>Colum3A</td>
    </tr>
    <tr class='searchable'>
        <td>Column1 Text B</td>
        <td>Column2TextB</td>
        <td>Colum3B</td>
    </tr>
<table>

JS:

var $rows = $('tr.searchable');

var val = '^(\\b' + ('#search').val().replace(/\.|@, '') + ')',
    reg = RegExp(val, 'i'),
    text;

$rows.show().filter(function() {
    text = $(this).text().replace(/\.|@, '');
    return !reg.test(text);
}).hide();

如果我console.log(text)，它会记录如下内容:

Column1 TextAColumn2TextAColumn3A
Column1 TextBColumn2TextBColumn3B

因此，如果您搜索“Column1”(或从开始到结束的任何字符)或“TextA”/“TextB”(或从开始到结束的任何字符)，我从“单词开头”的搜索(在某种程度上)有效两者)。

重新编辑 所以，我的问题是我无法搜索 Column2TextA 或 Column3A 或 Column3TextB 或 Column3B。因为 .text() 将它们混合在一起，因此不会将它们视为它们自己的单词，以使正则表达式中的\b 正常工作。

Answer 1

您可以选择每行的单元格，并根据 RegExp 测试减少它们，然后返回长度结果的 true/falsey 值。

如果没有与正则表达式匹配的单元格，则其包含行将保留在结果中，否则将被删除。

过滤完所有行后，它将隐藏剩余的行。

var $rows = $('tr.searchable');

$('#search').on('input',function(){
    $rows.show();
    if(!this.value) return;
    var reg = new RegExp('\\b' + this.value.replace(/\.|@/g,''), 'i');
    $rows.filter(function() {
        return !$('td', this).filter(function() {
            return reg.test(this.textContent.replace(/\.|@/g, ''));
        }).length;
    }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search...">
<table>
    <tr class='searchable'>
        <td>Column1 TextA</td>
        <td>Column2TextA</td>
        <td>Colum3A</td>
    </tr>
    <tr class='searchable'>
        <td>Column1 Text B</td>
        <td>Column2TextB</td>
        <td>Colum3B</td>
    </tr>
<table>

如果您确实想在测试之前在每个表格单元格的文本之前添加一个空格，那么您可以这样做。这个方法对我来说似乎很脏，所以我不推荐这个方法。

var $rows = $('tr.searchable');
$('td', $rows).prepend(' ');

$('#search').on('input',function(){
    $rows.show();
    if(!this.value) return;
    var reg = new RegExp('\\b' + this.value.replace(/\.|@/g,''), 'i');
    $rows.filter(function() {
        return !reg.test(this.textContent.replace(/\.|@/g, ''));
    }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search...">
<table>
    <tr class='searchable'>
        <td>Column1 TextA</td>
        <td>Column2TextA</td>
        <td>Colum3A</td>
    </tr>
    <tr class='searchable'>
        <td>Column1 Text B</td>
        <td>Column2TextB</td>
        <td>Colum3B</td>
    </tr>
<table>