javascript - 文本颜色随搜索输入而变化，但无法按预期工作

Question

我已经尝试过帮助：
如何使用 javascript 突出显示文本- Stackoverflow 链接
如何获取 Javascript 中突出显示的字符串的开始和结束索引？- Stackoverflow 链接
突出显示搜索匹配的单行解决方案- 外部链接

但达到了一定的成就标志。

现在只突出显示第一个字母。如果我在搜索中输入小写字母，它们也会变成小写字母，反之亦然
当输入被清除时，整个replace显示包括tag名称

这是我达到的目标：

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();
  var reader = document.getElementsByClassName("deviceNameCardHead")

  // for (let i = 0; i < reader.length; i++) {
  reader[0].innerHTML = reader[0].innerHTML.replace(new RegExp(reed1, 'gi'), `<span class="highlight">${reed}</span>`);
}
//}

.highlight {
  background: yellow;
}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga laptop Pro</h3>
  </div>

</div>

下面的答案解决了大部分问题。但是有没有办法这样：

• 用户输入p时，无论是小写还是大写，都会突出显示所有出现input的，如果输入的是小写，则不会将其所有出现更改为小写，如下所示：Lenova Yoga la p to p p ro 但应该像这样 Lenova Yoga la p to p P ro（当是小写或大写时）pp

p

标签： javascripthtml

Answer 1

这可以是解决方案。但我不知道match这里是怎么用的。这是我第一次使用它。如果有人可以在评论中讲述它会有所帮助

const reader = document.querySelector(".deviceNameCardHead");
const reader_text = reader.textContent;

function refree() {
  var reed = document.getElementById("search").value;
  var reed1 = reed.toLowerCase();

  // for (let i = 0; i < reader.length; i++) {
  reader.innerHTML = reader_text.replace(new RegExp(reed1, 'gi'), (match) => `<span class="highlight">${match}</span>`);
}
//}

.highlight {
  background: yellow;
}

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it" oninput="refree()">
    <br>
  </div>

  <div class="deviceNameCard">
    <h3 class="deviceNameCardHead">Lenova Yoga laptop Pro</h3>
  </div>

</div>