搜索输入文本高亮功能异常排查与优化需求：保留原字符大小写及修复清空输入显示问题

老哥，我看了你代码里的几个问题，咱们一个个来搞定，保证实现你要的效果：

问题根源拆解 #

1. 仅首字母高亮：你注释掉了循环逻辑，只处理了第一个deviceNameCardHead元素；而且直接修改innerHTML会导致之前的高亮标签被重复处理，必须基于原始文本做替换。
2. 大小写被强制替换：你用输入框的内容${reed}作为替换值，这会把匹配到的字符统一改成输入的大小写，得用正则自带的替换符保留原字符。
3. 清空输入后显示异常标签：输入为空时，正则会匹配空字符串，把所有位置都套上高亮标签，这时候得直接恢复原始文本。

修复后的完整代码 #

HTML（可以保留你的结构，多加一个测试元素验证循环） #

<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>
    <h3 class="deviceNameCardHead">HP Pavilion Desktop</h3>
  </div> 
</div>

CSS（保持不变） #

.highlight { background: yellow; }

JavaScript（核心修复逻辑） #

// 提前保存所有目标元素的原始文本，避免反复替换污染DOM
const targetElements = Array.from(document.getElementsByClassName("deviceNameCardHead"));
const originalTexts = targetElements.map(el => el.textContent);

function refree() { 
  const searchTerm = document.getElementById("search").value.trim(); 
  // 只有当搜索词不为空时才创建正则
  const regex = searchTerm ? new RegExp(searchTerm, 'gi') : null;

  targetElements.forEach((el, index) => {
    if (!searchTerm) {
      // 清空输入时，直接恢复原始文本
      el.innerHTML = originalTexts[index];
      return;
    }
    // 用$&引用匹配到的原字符，保留大小写；全局替换所有匹配项
    el.innerHTML = originalTexts[index].replace(regex, `<span class="highlight">$&</span>`);
  });
}

关键修复点说明 #

• 缓存原始文本：用originalTexts数组存每个元素的初始内容，每次搜索都基于原始文本替换，不会出现高亮标签嵌套的问题。
• 保留原字符大小写：replace里的$&是正则的特殊替换符，代表匹配到的原始字符，完美解决大小写被强制替换的问题。
• 空输入处理：搜索词为空时直接恢复原始文本，避免出现奇怪的空高亮标签。
• 遍历所有元素：用forEach处理所有deviceNameCardHead元素，确保每个设备名称都能被搜索高亮。

测试效果 #

输入p后，文本会变成：
Lenova Yoga la<span class='highlight'>p</span>to<span class='highlight'>p</span> <span class='highlight'>P</span>ro
完全符合你要求的「保留原字符大小写、所有匹配项高亮」的效果。

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