如何使用JavaScript实现搜索框输入时匹配文字加粗效果？

核心思路 #

要实现匹配字符加粗，需要：

1. 保存每个搜索项的原始文本，避免重复修改HTML导致内容错乱
2. 使用正则表达式匹配输入内容（忽略大小写），将匹配部分用<strong>标签包裹
3. 处理输入为空的情况，恢复原始文本显示

修改后的完整代码 #

HTML（修正重复ID问题）

<div id="search-bar-container">
  <input id="search-bar" type="text" name="search" onkeyup="search_items()" placeholder="Search items..">
  <div id="search-bar-filler"></div>
  <div id='search-list'>
    <div class="search-item-names">Automotive Degreaser</div>
    <div class="search-item-names">Beats by Dre</div>
    <div class="search-item-names">JBL Partybox</div>
    <div class="search-item-names">Makeup</div>
    <div class="search-item-names">Mr Potato Head</div>
    <div class="search-item-names">Olympus Camera</div>
    <div class="search-item-names">Pillow</div>
    <div class="search-item-names">RC Race Car</div>
    <div class="search-item-names">Simon Rabbit</div>
    <div class="search-item-names">Truth Hoodie</div>
  </div>
</div>

CSS（保持原有样式不变）

#filler {
  position: absolute;
  background-color: red;
  width: 20px;
  height: 20px;
}

#search-list {
  margin-top: 20px;
  width: 150px;
  height: 150px;
  display: none;
}

JavaScript（添加加粗功能并优化逻辑）

// 初始化保存每个搜索项的原始文本
document.addEventListener('DOMContentLoaded', () => {
  const items = document.getElementsByClassName('search-item-names');
  for (let i = 0; i < items.length; i++) {
    items[i].dataset.originalText = items[i].innerHTML;
  }
});

// List toggle (search bar)
const searchBar = document.querySelector('#search-bar');
const searchList = document.querySelector('#search-list');

searchBar.addEventListener('click', () => {
  searchList.style.display = "block";
});

// 优化列表隐藏逻辑：点击搜索区域外才隐藏
const updateListState = e => {
  const isInSearchArea = e.target.closest('#search-bar-container') !== null;
  if (!isInSearchArea) {
    searchList.style.display = "none";
  }
}
document.addEventListener('mousemove', updateListState);

// Letter search (search bar)
function search_items() {
  let input = document.getElementById('search-bar').value.trim();
  const inputLower = input.toLowerCase();
  const items = document.getElementsByClassName('search-item-names');

  // 转义正则特殊字符，避免输入./*等符号时出错
  const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

  for (let i = 0; i < items.length; i++) {
    const originalText = items[i].dataset.originalText;
    const originalLower = originalText.toLowerCase();

    if (!originalLower.includes(inputLower)) {
      items[i].style.display = "none";
    } else {
      items[i].style.display = "list-item";
      if (input === '') {
        // 输入为空时恢复原始文本
        items[i].innerHTML = originalText;
      } else {
        // 正则匹配输入内容，忽略大小写并保留原字符格式
        const regex = new RegExp(escapeRegExp(inputLower), 'gi');
        const highlightedText = originalText.replace(regex, match => `<strong>${match}</strong>`);
        items[i].innerHTML = highlightedText;
      }
    }
  }
}

关键细节说明 #

• 保存原始文本：通过dataset.originalText存储每个项的初始内容，确保每次修改都基于原始文本，避免多次替换导致的标签嵌套问题
• 正则转义：escapeRegExp函数处理输入中的特殊正则字符（如.、*），防止正则表达式报错
• 大小写保留：使用gi修饰符（全局+忽略大小写），替换时保留匹配字符的原始大小写，比如输入"he"时，"Help"中的"He"会被加粗为<strong>He</strong>lp
• 优化隐藏逻辑：用closest()方法判断点击区域，避免复杂的ID判断，逻辑更简洁健壮

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