如何突出顯示所有匹配的字符串

Question

頁面包含搜索輸入字段和表格。

如何在表格中突出顯示與輸入字段中的文本匹配的所有子字符串？

我已經嘗試過了，但是它改變了td元素的背景。

$(".projects-list > tbody > tr > td:contains('"+$(this).val()+"')").css("background", "#6a5acd");

如何僅突出顯示匹配的文本部分？

Answer 1

您可以在每個目標單元格上使用split(matchingText).join(wrappedMatchingText) 。

$('.projects-list td').each(function (i, e) {
    var $e = $(e);
    $e.html($e.html().split(text).join('<span class="matching">' + text + '</span>'));
});

這會將目標字符串的所有實例（存儲在變量text ） span.matching在單個span.matching

演示 演示

Answer 2

這是html，

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
</tr>
</table>

這是Jquery，

$(document).ready(function(){

$("td:contains('cell 1')").css("color","#6a5acd");//color highlighting 

})

和參考鏈接，

http://jsfiddle.net/dhana36/fe485/

Answer 3

嘗試

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

然后

$(".projects-list > tbody > tr > td .highlighted").contents().unwrap();
var search = RegExp.escape(this.value);
$(".projects-list > tbody > tr > td").html(function (i, text) {
    return text.replace(new RegExp('(' + search + ')', 'gi'), '<span class="highlighted">$1</span>')
})

演示： 小提琴

注意：如果單元格中包含未在此處處理的html內容