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

<main>
  <input
    type="search"
    name="search_box"
    id="search-box"
    class="search_box"
    placeholder="搜索大学..."
  />
  <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>

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;
}

// 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();