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标记内

~~DEMO~~ DEMO

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>')
})

演示：Fiddle

注意：如果单元格具有未在此处理的html内容

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

3 个答案: