獲取表行文本，表數據之間有空格

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

如果沒有與RegExp匹配的單元格，則其包含的行將保留在結果中，否則將被刪除。

過濾所有行后，它將隱藏其余行。

 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> 

Answer 2

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

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

小提琴的例子

或者簡單地循環遍歷每個tr的td ，並在這些項目上使用正則表達式。 在這種情況下，在.each內部，您只需在$(this).text()上應用正則表達式。

Answer 3

我選擇回答自己的問題，並在每個<td>的末尾添加一個不間斷的空格( ) 。 我能夠補償表的視覺結構中的偏移。

我相信Tiny Giant的答案會奏效，但我認為這不是我的正確答案。

謝謝您的幫助！