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

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