如何用JavaScript实现搜索输入字符与UI-li列表内容任意位置匹配标记？

核心思路 #

监听输入框的输入事件，利用正则表达式全局匹配关键词，将匹配到的文本用带高亮样式的标签包裹，同时提前存储列表项原始文本，避免重复替换导致的标签嵌套问题。

实现代码 #

HTML结构

<input type="text" class="search-inbox" placeholder="搜索大学">
<ul class="university-list">
  <li>北京大学</li>
  <li>清华大学</li>
  <li>复旦大学</li>
  <li>上海交通大学</li>
  <li>南京大学</li>
</ul>

CSS样式

.highlight {
  background-color: yellow;
  font-weight: bold;
}

JavaScript逻辑

// 获取输入框和列表元素
const searchInput = document.querySelector('.search-inbox');
const universityItems = document.querySelectorAll('.university-list li');

// 存储原始文本，避免重复替换导致标签嵌套
const originalTexts = Array.from(universityItems).map(item => item.textContent);

// 监听输入事件
searchInput.addEventListener('input', function() {
  const keyword = this.value.trim();
  
  universityItems.forEach((item, index) => {
    let text = originalTexts[index];
    if (!keyword) {
      // 清空输入时恢复原始文本
      item.textContent = text;
      return;
    }
    // 构建正则：全局匹配+大小写不敏感
    const regex = new RegExp(keyword, 'gi');
    // 替换匹配内容为高亮标签
    const highlightedText = text.replace(regex, match => `<span class="highlight">${match}</span>`);
    item.innerHTML = highlightedText;
  });
});

关键说明 #

• 提前缓存原始文本，解决多次搜索时innerHTML重复替换导致的标签嵌套问题
• 正则使用gi标志，支持任意位置的全局匹配，且不区分大小写
• 输入框清空时自动恢复列表项原始内容

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