JavaScript实时搜索与关键词高亮技巧

下载万磁搜索绿色版

本篇文章给大家分享《JavaScript列表实时搜索与关键词高亮实现》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

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

1. HTML结构：基础骨架

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

）将承载我们的数据项。

<main>
  &lt;input
    type=&quot;search&quot;
    name=&quot;search_box&quot;
    id=&quot;search-box&quot;
    class=&quot;search_box&quot;
    placeholder=&quot;搜索大学...&quot;
  /&gt;
  <h1 class="title">全球顶尖大学列表</h1>
  <ul class="world-universities_list" id="world-universities_list">
    <li class="university">Massachusetts Institute of Technology (MIT)</li>
    <li class="university">Stanford University</li>
    <li class="university">Harvard University</li>
    <li class="university">University of Oxford</li>
    <li class="university">University of Cambridge</li>
    <li class="university">Aalborg University (Denmark)</li>
    <li class="university">Aalto University (Finland)</li>
    <li class="university">Aarhus University (Denmark)</li>
    <!-- 更多大学列表项 -->
    <li class="university last-u">Princeton University</li>
  </ul>
</main>

关键元素说明：

• 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 方法将匹配到的文本包裹在 <span class='highlight'> 标签中
        const highlightedText = originalUniversityText.replace(regex, "<span class='highlight'>$1</span>");
        university.innerHTML = highlightedText; // 更新列表项的HTML内容
      } else {
        // 如果搜索框为空，则恢复列表项的原始文本，移除高亮
        university.innerHTML = originalUniversityText;
      }
    });
  });
};

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

JavaScript代码详解：

1. 获取DOM元素：
   • searchBox: 通过 id 获取搜索输入框。
   • universities: 通过 class 获取所有
   • 列表项，返回一个 NodeList。
2. 事件监听：
   • searchBox.addEventListener("keyup", ...)：当用户在搜索框输入并抬起键盘时，会触发回调函数。keyup 事件比 input 事件在某些场景下更稳定，但 input 事件也能达到类似效果。
3. 文本处理：
   • searchBox.value.toLowerCase().replace(/\s/g, "")：将用户输入转换为小写并移除所有空格。这样做是为了实现不区分大小写和不区分空格的模糊匹配，例如，搜索 "mit" 可以匹配 "Massachusetts Institute of Technology"，搜索 "massachusetts institute" 也能匹配 "Massachusetts Institute of Technology"。
   • university.textContent.toLowerCase().replace(/\s/g, "")：对每个列表项的文本内容也进行同样的处理，以便进行公平的比较。
   • originalUniversityText: 保存列表项的原始文本内容，这在清空搜索框时恢复列表项的原始显示非常重要。
4. 列表过滤：
   • universityName.includes(noWhiteSpaceInput)：检查处理后的大学名称是否包含处理后的搜索输入。
   • university.style.display = "block" 或 "none"：根据匹配结果显示或隐藏列表项。
5. 关键词高亮：
   • 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内容恢复为其原始文本，移除所有高亮。
6. 启动功能：
   • searchUniversity()：在脚本加载完成后调用此函数，激活搜索功能。

4. 注意事项与优化

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

5. 总结

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

理论要掌握，实操不能落！以上关于《JavaScript实时搜索与关键词高亮技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！