javascript - 使用 jquery 突出显示搜索文本

Question

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

现在我想突出显示(更改文本颜色:文本颜色类=蓝色文本)在表格单元格中找到的搜索关键字，我搜索了这个答案，但没有找到任何有用的东西!

我的 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，名称中的文本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 语句，最终会出现奇怪的行为