如何在搜索框输入内容时修改deviceNameCardHead类元素中匹配搜索文本的颜色

实现方案 #

首先添加高亮匹配文本的CSS样式：

.highlight {
  /* 可自定义你需要的高亮颜色和样式 */
  color: #ff4d4f;
  font-weight: bold;
}

然后修改你的JS逻辑，提前存储原始文本避免反复替换导致标签嵌套问题：

// 页面加载时先保存所有设备名称的原始文本，避免后续替换残留标签
const originalTexts = Array.from(document.getElementsByClassName("deviceNameCardHead")).map(el => el.textContent);

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

  for (let i = 0; i < reader.length; i++) {
    // 每次搜索先重置为原始文本，清除上一次的高亮标记
    reader[i].innerHTML = originalTexts[i];
    
    if (!reed1) {
      // 搜索框为空时全部显示，无高亮
      reader[i].parentElement.style.display = "block";
      continue;
    }
    
    const lowerText = originalTexts[i].toLowerCase();
    const matchIndex = lowerText.indexOf(reed1);
    if (matchIndex > -1) {
      hasMatch = true;
      reader[i].parentElement.style.display = "block";
      // 提取原文匹配到的内容，包裹高亮标签
      const matchText = originalTexts[i].slice(matchIndex, matchIndex + reed1.length);
      const reg = new RegExp(`(${matchText})`, 'gi');
      reader[i].innerHTML = originalTexts[i].replace(reg, '<span class="highlight">$1</span>');
    } else {
      reader[i].parentElement.style.display = "none";
    }
  }

  // 统一更新匹配提示
  document.getElementById("demo").innerHTML = hasMatch ? "Yes" : "No";
  document.getElementById("demo1").innerHTML = reed ? " - " + reed1 : "";
}

你现有的HTML代码不需要修改，直接复用即可，测试时输入laptop，对应元素里的匹配文本就会显示你定义的高亮样式。

内容的提问来源于stack exchange，提问作者Rana Daggubati