用jquery突出显示搜索文本[重复]

Question

我正在尝试实现表格搜索，我在网上找到了答案并试了一下，效果很好！

现在我想突出显示 (change text colour: text color class= blue-text) 在表格单元格中找到的搜索关键字，我搜索了这个答案，但没有找到任何有用的信息！

我的 HTML 是

<table class="stdtable">
  <tr>
    <td id="stdname">Name</td>
    <td id="stdreg">Reg. No.</td>
    <td id="stdparent">Parent</td>
    <td id="stdgrp">Group</td>
    <td id="action">Action</td>
  </tr>
</table>

Jquery 是

$("#filter").on("keyup", function() {
    var searchKey = $(this).val().toLowerCase();
    $(".stdtable tr #stdname").each( function() {
        var searchStr = $(this).text().toLowerCase();
        if (searchStr.indexOf(searchKey)!=-1) {
            $(this).parent().show();
        }
        else {
            $(this).parent().hide();
        }
    });
});

如何突出显示搜索到的文本？ 如果我搜索 N，Name 中的文本 N 应该会改变颜色

如果我清除搜索字段，我还需要清除文本的颜色

Answer 1

我不知道你的设置，但我会让一个类“突出显示” 并为此类提供属性：color: blue; 或您想要的任何其他 css 属性以获得特殊结果。 那么

$("#stdname").addClass("highlighted");

和

$("#stdname").removeClass("highlighted");

当您删除搜索字段时

编辑：将上面的内容留给想要所有文本的人。

你可以拿

var s = $(this).val();
var txt = $("#stdname").val().replace(s, '<span style="color: blue">' + s +  '</span>');
$("#stdname").val(txt);

请注意，如果每次按键启动时不从$("#stdname").val() 中删除 span 语句，您最终会出现奇怪的行为