突出显示表格JavaScript中的文本

Question

我有一个代码，理论上应该搜索输入字段中输入的文本，然后在表中搜索并加粗文本。 我有一个奇怪的问题，即在未找到匹配项的表单元格中重复了其中的文本。

jQuery html()的行为就像appendTo()。

这是我拥有的代码

    var highlight = function (string) {
      jQuery(".mitglieder-table .name-cell span").each(function () {
        var matchStart = jQuery(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");//take the value of span and search for our string
        var matchEnd = matchStart + string.length - 1;
        var beforeMatch = jQuery(this).text().slice(0, matchStart);
        var matchText = jQuery(this).text().slice(matchStart, matchEnd + 1);
        var afterMatch = jQuery(this).text().slice(matchEnd + 1);
        jQuery(this).html(beforeMatch + "<strong>" + matchText + "</strong>" + afterMatch);
      });
    };

    jQuery("#mitglieder-search").on("keyup change", function() {
      let value = $(this).val();
      highlight(value);
    });

以及codepen https://codepen.io/razvan-cuceu/pen/GPoJoB

中说明的问题