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（文本），它会记录如下内容：

Column1 TextAColumn2TextAColumn3A
Column1 TextBColumn2TextBColumn3B

因此，如果您搜索“Column1”（或从头到尾的任何字符）或“TextA”/“TextB”（或从头到尾的任何字符），我的“单词起点”搜索只会（稍微）有效两个）。

重新编辑所以，我的问题是我无法搜索Column2TextA或Column3A或Column3TextB或Column3B。因为.text（）将它们混合在一起，因此不会将这些中的每一个视为正则表达式中的\ b在正则表达式中正常工作。

Answer 1

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

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

一旦过滤了所有行，它就会隐藏剩余的行。

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Answer 2

您可以在.each()上使用td并添加空格：

var row = "";
console.log($("#tbl #row td").each(function(){
    row += " "+$(this).text();
}));

Fiddle Example

或者只是循环浏览每个td的{{1}}并在这些项目上使用正则表达式。在tr内部，您只需在.each上应用正则表达式。

Answer 3

我选择了自己的答案，并在每个( )的末尾添加一个不间断的空格<td>。我能够补偿表格视觉结构中的偏移量。

我相信Tiny Giant的答案会奏效，但我不相信这对我来说是正确答案。

感谢您的帮助！

获取表行文本与表数据之间的空格

3 个答案: