javascript - 仅突出显示字符串中的匹配文本 (JQuery/Javascript)

Question

我试图在任何时候只突出显示字符串中的匹配文本。

我有一个过滤结果的输入框。最初这可以很好地突出显示第一个字符，但职权范围已更改为突出显示字符串中任何位置的文本。

fiddle :Highlight matching text

它可以完美过滤，但会突出显示从前面开始的字母，而不是匹配的字母。我尝试使用 indexOf valThis 来解决问题，但我可能做错了。

非常感谢任何帮助或指点。

$('#box').keyup(function () {

var valThis = this.value.toLowerCase();
var length  = this.value.length;

$('.objType').each(function () {
    var text  = $(this).text(),
        textL = text.toLowerCase(),
        //n = textL.indexOf(valThis);
     var htmlR = '<b>' + text.substr(0, length) + '</b>' + text.substr(length);

    if(textL.includes(valThis))
    {
      $(this).html(htmlR).show()
    }
    else
    {
        $(this).hide();
    }
});

});

Answer 1

线

var htmlR = '<b>' + text.substr(0, length) + '</b>' + text.substr(length);

表示“从字符串的开头获取 length 个字符。”您希望从第一个匹配 字符开始，因此您需要知道它在哪里。所以你需要 String#indexOf，而不是 String#includes。

您还想保存原始文本，以便与原始文本进行比较，而不是与之前过滤操作更新的文本进行比较:

// Grab the original text
$(".objType").each(function() {               // ***
    $(this).data("original", $(this).text()); // ***
})                                            // ***
$('#box').keyup(function() {
  var valThis = this.value.toLowerCase();
  var length = this.value.length;

  $('.objType').each(function() {
    var text = $(this).data("original"),      // ***
      textL = text.toLowerCase(),
      index = textL.indexOf(valThis);         // ***

    if (index !== -1) {
      var htmlR = text.substr(0, index) + '<b>' + text.substr(index, length) + '</b>' + text.substr(index + length); // ***
      $(this).html(htmlR).show()
    } else {
      $(this).hide();
    }
  });
});

Updated Fiddle , 片段:

// Grab the original text
$(".objType").each(function() {               // ***
	$(this).data("original", $(this).text()); // ***
})                                            // ***
$('#box').keyup(function() {
  var valThis = this.value.toLowerCase();
  var length = this.value.length;

  $('.objType').each(function() {
    var text = $(this).data("original"),      // ***
      textL = text.toLowerCase(),
      index = textL.indexOf(valThis);         // ***

    if (index !== -1) {
      var htmlR = text.substr(0, index) + '<b>' + text.substr(index, length) + '</b>' + text.substr(index + length); // ***
      $(this).html(htmlR).show()
    } else {
      $(this).hide();
    }
  });
});

input[type="text"] {
  width: 50%;
  font-size: 110%;
  margin: 10px;
  padding: 5px;
  float: left;
  clear: left;
}

span {
  float: left;
  clear: left;
  margin: 10px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input placeholder="Filter results" id="box" type="text" />

<span class="objType" id="item1">Accepted Event Relation</span>
<span class="objType" id="item2">Case Status Value</span>
<span class="objType" id="item3">External Data Source</span>
<span class="objType" id="item4">Navigation Link Set</span>