Javascript 由于搜索操作而更改表文本的颜色

我有通过动态方式更新的表。我想在实时搜索操作期间，将特定文本更改为彩色文本

在这个示例中，正如您所看到的，可以通过智能方式使所有文档的颜色都丰富多彩

第二个示例完美地展示了如何为

表

创建实时搜索引擎

现在，问题是：有没有可能让实时搜索的结果充满色彩？不是整列或整行。我只需要更改

输入

匹配的

值

的颜色。长话短说，如何修改第二个示例

代码如下：

我在HTML中使用过的经典表格：

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

<input id="search">

我需要在搜索模块中实现的另一个JS：

$(this).css('color', 'red');

---

根据您的示例，这就达到了目的

var$cells=$（'#表td'）；
$（“#搜索”）.keyup（函数（）{
var输入=$（this.val（）；
var val='^（？=.\\b'+$.trim（input）.split（/\s+/）.join（'\\b）（？=.\\b'+'））.$'，
reg=RegExp（val，'i'），
文本；
$cells.show（）.filter（函数（））{
text=$（this.text（）.replace（/\s+/g'）；
如果（！注册表测试（文本）| |输入=“”）{
$（this.css（'color'，'black'）；
}否则{
$（this.css（'color'，'green'）；
}
});
});
body{padding:20px；}
输入{边距底部：5px；填充：2px 3px；宽度：209px；}
td{padding:4px；border:1px#CCC solid；width:100px；}

苹果
绿色
葡萄
绿色
橙色
橙色
只是想添加一个不同的突出显示选项。这样，它将只突出显示匹配的文本，不区分大小写。您可以更改css类，使其以您想要的方式高亮显示，例如更改背景颜色


$（“#搜索”）.keyup（函数（）{
$（“.highlight”）.removeClass（“highlight”）；
var val=$.trim（$（this.val（））.replace（/+/g'，）.toLowerCase（）；
$（'table tr'）.hide（）.filter（函数（）{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return~text.indexOf（val）；
}).show（）.find（“td”）.each（函数（））{
var start=$（this.text（）.toLowerCase（）.indexOf（val）；
如果（开始！=-1）{
var end=val.length；
var start_text=start！=0？$（this）.text（）子字符串（0，start）：“”；
var end_text=$（this）.text（）.substring（start+end）；
var match=$（this）.text（）.substring（start，start+end）；
$（this）.html（开始\u文本+“”+匹配+“”+结束\u文本）；
}
});
});
那么您希望在搜索匹配上突出显示颜色？是的。编辑：但不是整列或整行。只是匹配了文本，效果很好。这正是我想要的。非常感谢。另外，感谢“dfsq”和“Clive”提供了完美的示例，感谢“j08691”使我的问题更加清晰。这一个也很有效。谢谢你的回答。很好，但是你会怎么做，这样它就不会显示列的标题（第一行）
$(this).css('color', 'red');

$('#search').keyup(function() {
    $(".highlight").removeClass("highlight");
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $('table tr').hide().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return ~text.indexOf(val);
    }).show().find("td").each(function(){

        var start = $(this).text().toLowerCase().indexOf(val);

        if(start !== -1){
            var end = val.length;

            var start_text = start != 0 ? $(this).text().substring(0,start) : "";
            var end_text = $(this).text().substring(start + end);
            var match = $(this).text().substring(start, start + end);

            $(this).html(start_text+'<span class="highlight">'+match+'</span>'+end_text);
        }
    });
});