JavaScript实现列表实时搜索过滤与关键词高亮显示

日期：2025-10-24 00:00 / 作者：霞舞

本教程将详细介绍如何使用javascript、html和css构建一个实用的实时搜索功能。用户在搜索框输入内容时，列表项会即时根据输入进行过滤，同时匹配的关键词会在列表中以高亮形式显示，从而提供直观高效的用户体验。文章将涵盖html结构搭建、css样式美化以及javascript核心逻辑实现，包括dom操作、事件监听、文本处理和正则表达式高亮技术。

在现代Web应用中，为长列表或数据集合提供高效的搜索功能是提升用户体验的关键。本文将指导您一步步构建一个实时搜索过滤器，该过滤器不仅能根据用户输入动态隐藏或显示列表项，还能将匹配的文本片段高亮显示，即使匹配项不在字符串的开头或结尾。

1. HTML结构：基础骨架

首先，我们需要一个包含搜索输入框和待过滤列表的HTML结构。搜索框用于接收用户的查询，而无序列表（


  
  全球顶尖大学列表
  
    Massachusetts Institute of Technology (MIT)
    Stanford University
    Harvard University
    University of Oxford
    University of Cambridge
    Aalborg University (Denmark)
    Aalto University (Finland)
    Aarhus University (Denmark)
    
    Princeton University

关键元素说明：

input 标签：type="search" 表明这是一个搜索输入框，id="search-box" 将用于JavaScript中获取该元素。
ul 标签：id="world-universities_list" 用于JavaScript中获取列表容器。
li 标签：每个列表项都带有 class="university"，方便JavaScript选择所有大学列表项。

2. CSS样式：美化与高亮定义

为了让页面看起来更专业，并定义高亮文本的样式，我们需要添加一些CSS规则。其中最重要的是 .highlight 类的定义，它将决定匹配文本的视觉效果。

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif; /* 示例字体 */
}

*, *::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

main {
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    display: flex;
    flex-direction: column;
}

.title {
    text-align: center;
    color: rgb(221, 4, 58);
    font-weight: 600;
    font-size: 2rem;
    margin-top: 2rem;
}

.search_box {
    display: block;
    width: 100%;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1.5px solid #0000002c;
    margin-top: 2rem;
    outline: none;
    padding: 2px 10px; /* 增加内边距 */
}

.world-universities_list {
    background-color: rgb(104, 7, 39);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 3rem;
}

.university:not(.last-u) {
    margin-bottom: 1rem; /* 调整间距 */
}

/* 核心高亮样式 */
.highlight {
    background-color: aqua; /* 高亮背景色 */
    color: #333; /* 高亮文本颜色，与背景形成对比 */
    font-weight: bold; /* 加粗 */
    padding: 2px 4px; /* 增加高亮区域的可读性 */
    border-radius: 3px;
}

关键样式说明：

.highlight 类：这是用于包裹匹配文本的标签的样式。我们设置了 background-color 为 aqua 和 font-weight: bold 来使其突出显示。您可以根据自己的设计需求调整这些属性。
其他样式：为 body, main, title, search_box, ul, li 等元素提供了基础布局和视觉美化。

3. JavaScript逻辑：实现实时搜索与高亮

JavaScript是实现核心功能的关键。我们将监听搜索框的输入事件，然后根据输入内容过滤列表并高亮匹配项。

// 1. 获取DOM元素
const searchBox = document.getElementById("search-box");
const universities = document.querySelectorAll(".university"); // 获取所有大学列表项

// 2. 定义搜索函数
const searchUniversity = () => {
  // 监听搜索框的键盘抬起事件
  searchBox.addEventListener("keyup", () => {
    // 获取搜索框当前值，转换为小写并移除空格，便于进行不区分大小写和空格的匹配
    const searchBoxInput = searchBox.value.toLowerCase();
    const noWhiteSpaceInput = searchBoxInput.replace(/\s/g, "");

    // 遍历所有大学列表项
    universities.forEach((university) => {
      // 获取大学名称，转换为小写并移除空格
      const universityName = university.textContent.toLowerCase().replace(/\s/g, "");
      // 原始大学名称，用于高亮显示时保留原始格式
      const originalUniversityText = university.textContent;

      // 3. 列表过滤逻辑
      if (universityName.includes(noWhiteSpaceInput)) {
        university.style.display = "block"; // 显示匹配的列表项
      } else {
        university.style.display = "none"; // 隐藏不匹配的列表项
      }

      // 4. 关键词高亮逻辑
      // 只有当搜索框有输入时才进行高亮
      if (noWhiteSpaceInput) {
        // 创建正则表达式，用于查找所有匹配的关键词（不区分大小写，全局匹配）
        // `(${noWhiteSpaceInput})` 创建一个捕获组，以便在替换时使用 `$1` 引用匹配到的文本
        const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi");
        // 使用 replace 方法将匹配到的文本包裹在  标签中
        const highlightedText = originalUniversityText.replace(regex, "$1");
        university.innerHTML = highlightedText; // 更新列表项的HTML内容
      } else {
        // 如果搜索框为空，则恢复列表项的原始文本，移除高亮
        university.innerHTML = originalUniversityText;
      }
    });
  });
};

// 5. 调用搜索函数，启动功能
searchUniversity();

JavaScript代码详解：

获取DOM元素：
- searchBox: 通过 id 获取搜索输入框。
- universities: 通过 class 获取所有
- 列表项，返回一个 NodeList。
事件监听：
- searchBox.addEventListener("keyup", ...)：当用户在搜索框输入并抬起键盘时，会触发回调函数。keyup 事件比 input 事件在某些场景下更稳定，但 input 事件也能达到类似效果。
文本处理：
- searchBox.value.toLowerCase().replace(/\s/g, "")：将用户输入转换为小写并移除所有空格。这样做是为了实现不区分大小写和不区分空格的模糊匹配，例如，搜索 "mit" 可以匹配 "Massachusetts Institute of Technology"，搜索 "massachusetts institute" 也能匹配 "Massachusetts Institute of Technology"。
- university.textContent.toLowerCase().replace(/\s/g, "")：对每个列表项的文本内容也进行同样的处理，以便进行公平的比较。
- originalUniversityText: 保存列表项的原始文本内容，这在清空搜索框时恢复列表项的原始显示非常重要。
列表过滤：
- universityName.includes(noWhiteSpaceInput)：检查处理后的大学名称是否包含处理后的搜索输入。
- university.style.display = "block" 或 "none"：根据匹配结果显示或隐藏列表项。
关键词高亮：
- if (noWhiteSpaceInput)：只有当搜索框有实际输入时才进行高亮处理，避免空输入时错误地替换内容。
- new RegExp(pattern, flags)：创建一个正则表达式对象。
  - pattern: (${noWhiteSpaceInput})，这里的 noWhiteSpaceInput 是用户输入的搜索词。括号 () 创建了一个捕获组，这意味着匹配到的文本会被“捕获”下来。
  - flags: gi。g 表示全局匹配（找到所有匹配项，而不是只找到第一个）；i 表示不区分大小写匹配。
- originalUniversityText.replace(regex, "$1")：这是高亮的核心。replace() 方法使用正则表达式 regex 查找所有匹配的子字符串，并将它们替换为 $1。$1 是对正则表达式中第一个捕获组（即我们搜索的关键词本身）的引用。
- university.innerHTML = highlightedText：将包含高亮标签的新HTML内容赋值给列表项，从而在页面上显示高亮效果。
- else { university.innerHTML = originalUniversityText; }：如果搜索框为空，则将列表项的HTML内容恢复为其原始文本，移除所有高亮。
启动功能：
- searchUniversity()：在脚本加载完成后调用此函数，激活搜索功能。

4. 注意事项与优化

性能优化： 对于非常大的列表（例如，数千个列表项），频繁的DOM操作可能会导致性能问题。可以考虑使用 去抖 (Debounce) 或 节流 (Throttle) 技术来限制 keyup 事件的触发频率，从而减少不必要的计算和DOM更新。
用户体验：
- 在搜索框中添加 placeholder 属性，提供搜索提示。
- 考虑在没有匹配结果时显示一条“未找到结果”的消息。
- 清除搜索框内容时，确保所有列表项都恢复显示且高亮被移除。
XSS 安全： 在本例中，我们是替换列表项的 innerHTML，并且替换的内容是用户输入与原始文本的组合。如果原始文本来自不受信任的源，并且用户输入被恶意构造，理论上可能存在XSS风险。但在这种特定的场景下（用户输入用于匹配和高亮，而不是直接插入到HTML中），风险相对较低。如果您的应用需要将用户输入直接渲染到DOM中，务必进行严格的输入清理和验证。
可访问性： 对于屏幕阅读器用户，高亮效果可能无法直接感知。可以考虑使用 aria-live 区域来宣布搜索结果的变化。

5. 总结

通过结合HTML的结构化能力、CSS的样式定义以及JavaScript的动态交互，我们成功实现了一个功能完善的实时搜索过滤与关键词高亮功能。这个模式在各种Web应用中都非常常见，例如产品列表、联系人目录或文档搜索等。理解并掌握这种实现方式，将极大地提升您构建用户友好型Web界面的能力。通过进一步的优化和扩展，您可以根据具体需求定制出更强大、更高效的搜索解决方案。