如何用 JavaScript 实现多标签内容的模糊搜索过滤-html教程

本文介绍一种高效、可扩展的 dom 搜索过滤方案：通过 `queryselectorall` 结合 `some()` 方法，使搜索栏能同时匹配 `h1`、`h3` 和 `p` 等多个标签内的文本内容，支持大小写不敏感与部分匹配。

在构建动态搜索功能时，仅检索单一标签（如仅 h1）往往无法满足真实场景需求——用户可能依据标题、副标题、角色名或类型描述进行搜索。上述问题的核心在于：需要判断一个容器元素（.bigger）内部是否存在任意一个指定标签（h1, h3, p）包含搜索关键词，而非只检查首个匹配元素。

正确解法是分两步实现：

1. 批量选取目标子元素：使用 item.querySelectorAll(“h1, h3, p”) 获取当前 .bigger 容器下所有符合条件的文本节点；
2. 逻辑聚合判断：借助展开运算符 […nodeList] 转为数组，并调用 Array.prototype.some() 遍历，只要任一元素的 innerHTML（转小写后）包含搜索词，即视为该容器“匹配”。

以下是优化后的完整函数：

function searchLp() {
  const input = document.getElementById('search-lp').value.trim().toLowerCase();
  const items = document.querySelectorAll('.bigger');

  items.forEach(item => {
    // 获取当前 item 下所有 h1/h3/p 元素
    const textElements = [...item.querySelectorAll('h1, h3, p')];

    // 判断是否存在任一元素包含搜索词（忽略空格与大小写）
    const matches = textElements.some(el => 
      el.textContent?.trim().toLowerCase().includes(input)
    );

    // 控制显隐：匹配则显示，否则隐藏
    if (matches) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
}

✅ 关键改进说明：