javascript - 如何使用下面的代码突出显示搜索？

Question

下面的代码已经在 li 之间进行了字母搜索。我想强调研究中的字母 li。是否可以使用下面的代码？

<input type="search" id="catInput">
<ul id="myUl">
<li>Hello</li>
<li>Test</li>
<li>Javascript</li>
</ul>
<span id="total"></span>

<script>
var ip = document.getElementById('catInput');
var ul = document.getElementById('myUl');
var li = ul.getElementsByTagName('li');

document.getElementById('total').innerHTML = "" + (li.length) + "";
ip.addEventListener('input', function() {
  var val = this.value.toUpperCase(), idx = 0;
  for (var i = 0; i < li.length; i++) {
    var txt = li[i].textContent.toUpperCase();
    if (txt.indexOf(val) != -1) {
      li[i].style.display = '';
      idx++;
    } else {
      li[i].style.display = 'none';
    }
    if (idx == 0) {
        document.getElementById('total').innerHTML = "No results";
    }else{
        document.getElementById('total').innerHTML = idx;
    }
  }
});
</script>

标签： javascriptjqueryfindhtml-lists

Answer 1

在条件中添加此代码if (textIndex != -1) {}，它将mark标记添加到匹配的输入中：

const rgxVal = `(${val})`;
const rgx = new RegExp(rgxVal, 'gi');
li[i].innerHTML = txt.replace(rgx, `<mark>$1</mark>`);

我还删除toUpperCase()了它txt，val并且仅在测试匹配时才添加它：

const textIndex = txt.toUpperCase().indexOf(val.toUpperCase());
if (textIndex != -1) {
  ...

演示：

var ip = document.getElementById('catInput');
var ul = document.getElementById('myUl');
var li = ul.getElementsByTagName('li');

document.getElementById('total').innerHTML = "" + (li.length) + "";
ip.addEventListener('input', function() {
  var val = this.value, idx = 0;
  for (var i = 0; i < li.length; i++) {
    var txt = li[i].textContent;
    
    if(val) {
      var textIndex = txt.toUpperCase().indexOf(val.toUpperCase());
      if (textIndex != -1) {
        li[i].style.display = '';
        const rgxVal = `(${val})`;
        const rgx = new RegExp(rgxVal, 'gi');
        li[i].innerHTML = txt.replace(rgx, `<mark>$1</mark>`);
        idx++;
      } else {
        li[i].style.display = 'none';
      }
    } else {
      idx = 3;
      li[i].style.display = '';
      li[i].innerHTML = txt;
    }
  }
  if (idx == 0) {
     document.getElementById('total').innerHTML = "No results";
  } else{
     document.getElementById('total').innerHTML = idx;
  }
});

<input type="search" id="catInput">
<ul id="myUl">
<li>Hello</li>
<li>Test</li>
<li>Javascript</li>
</ul>
<span id="total"></span>