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

Question

我尝试过以下帮助：
How to highlight text using javascript - Stackoverflow 链接
How do I get the starting and ending index of a highlighted piece of a string in Javascript? - Stackoverflow 链接
A one-line solution to highlighting search matches - 外部链接

但达到了一定的成就。

现在只突出显示第一个字母。如果我在搜索中输入小写字母，它们也会变成小写字母，反之亦然
清除输入后，将显示整个 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>

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

• 用户在input 中输入p 之后，无论p 是小写还是大写，都会突出显示所有出现的p，如果输入的p 是这样的小写字母：Lenova Yoga lap到p pro
  但应该是这样
  Lenova Yoga laptop Pro（当p 为小写或大写时）

Answer 1

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

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>

Answer 2

如果字母之间有span 标签，则您的正则表达式不起作用。因此，您可以将reader[0].innerHTML 替换为reader[0].textContent。这也解决了输入被清除时的问题。

顺便说一句：如果您使用document.querySelector(...)，您可以省略reader[0] 中的[0]，因为它只选择带有该选择器的第一个元素。

工作示例：（简单演示）

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

  reader.innerHTML = reader.textContent.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()">
  </div>

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

---

要解决它改变黄色字母大小写的问题，您需要更多代码。

首先，您必须将来自.deviceNameCardHead 的字符串存储在变量中（例如reader_text），将其转换为小写以进行不区分大小写的搜索并将其存储在变量中（例如lower_text）：

const reader_text = reader.textContent;
const lower_text = reader_text.toLowerCase();

然后您必须遍历reader_text 的所有字符以查找所有出现的搜索字符串并将所有索引值存储在一个数组中（例如index_array）：

for(i = 0; i < lower_text.length; i++) {
  const reed_index = lower_text.indexOf(reed1, i);
    
  if(reed_index >= 0) {
    index_array.push(reed_index);
  }
}

然后您必须遍历index_array 并将原始字符串中的所有匹配项存储在一个数组中（例如highlight_array）以获得大小写字母。要将数组最小化为唯一值，您可以使用 Set() 构造函数和扩展语法 [...]。

index_array = [...new Set(index_array)];
index_array.forEach(function(val) {
  highlight_array.push(reader_text.substr(val, reed.length));
});

之后，您必须遍历 highlight_array 并将所有出现的大写和小写字母分别替换为 span.highlight-wrapped 值。为防止reader_text 被覆盖，请使用单独的变量（例如highlight_text）：

let highlight_text = reader_text;

highlight_array = [...new Set(highlight_array)];
highlight_array.forEach(function(val) {
  highlight_text = highlight_text.replaceAll(val, `<span class="highlight">${val}</span>`);
});

最后你必须将.deviceNameCardHead中的字符串替换为highlight_text：

reader.innerHTML = highlight_text;

工作示例：

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

function refree() {
  const reed = document.getElementById("search").value;
  const reed1 = reed.toLowerCase();
  let highlight_text = reader_text;
  let highlight_array = [];
  let index_array = [];
  
  for(i = 0; i < lower_text.length; i++) {
    const reed_index = lower_text.indexOf(reed1, i);
    
    if(reed_index >= 0) {
      index_array.push(reed_index);
    }
  }

  index_array = [...new Set(index_array)];
  index_array.forEach(function(val) {
    highlight_array.push(reader_text.substr(val, reed.length));
  });

  highlight_array = [...new Set(highlight_array)];
  highlight_array.forEach(function(val) {
    highlight_text = highlight_text.replaceAll(val, `<span class="highlight">${val}</span>`);
  });
  
  reader.innerHTML = highlight_text;
}

.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()">
  </div>

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