javascript - 突出显示表格中的子字符串

我见过类似的问题，但是这个问题有些不同。
我想做的事：
在表中找到一个子字符串，突出显示它并隐藏所有其他没有该子字符串的tr。就像谷歌浏览器的CtrlF函数一样，仅显示包含输入搜索子字符串的tr。

在这里，我有一个可以找到子字符串但不突出显示它的函数，注释行是一些不成功的尝试。

function LogSearch() {
//var x, y, oldHtml;
$('#inputSearch').on('keyup', function (e) {
var value = this.value;
    $('#grid > tbody  > tr').each(function () {
        var bMatch = false;
        $(this).find('td').each(function () {
            //oldHtml = $(this).html();
            if ($(this).html().indexOf(value) > -1) {
                //x = $(this).html().indexOf(value);
                //y = $(this).html().indexOf(value) + value.length;
                //$(this).html($(this).html().substring(0, x) + "<span class='orangeText' style='background-color:orange;'>" + value + "</span>" + $(this).html().substring(y));
                bMatch = true;
                return false;
            }
            //else if ($(this).find(".orangeText")) {
            //    var fullHtml = $(this).remove(".orangeText");
            //    $(this).html(fullHtml);
            //}
        });
        if (bMatch) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
 });
}

最佳答案

我想我了解您的问题。在这里看看：https://jsfiddle.net/davidbuzatto/7wzbrf7o/1/

JavaScript：

$( "#inputSearch" ).on( "keyup", function(e) {

  reset();

  var v = this.value;

  $( "#grid > tbody  > tr" ).each( function () {

    var found = false;

    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      var ind = tdV.indexOf(v);
      if ( ind != -1 ) {
        tdV = replaceAll( tdV, v, '<span class="highlight">' + v + '</span>' );
        $(this).html(tdV);
        found = true;
      }
    });

    if ( !found ) {
      $(this).hide();
    }

  });

});

function reset() {
    $( "#grid > tbody  > tr" ).each( function () {
    $(this).show();
    $(this).find( "td" ).each( function () {
      var tdV = $(this).html();
      tdV = replaceAll( tdV, '<span class="highlight">', '' );
      tdV = replaceAll( tdV, '</span>', '' );
      $(this).html(tdV);
    });
  });
}

function replaceAll( target, search, replacement ) {
    return target.split(search).join(replacement);
};

CSS：

.highlight {
    background-color: yellow;
}

关于javascript - 突出显示表格中的子字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42632305/