如何实现支持h1/h3/p多标签过滤的搜索栏功能？

方案一：指定标签内容合并过滤 #

精准收集容器内h1、h3、p的文本内容，统一进行匹配判断：

function searchLp() {
    const input = document.getElementById('search-lp').value.toLowerCase().trim();
    const containers = document.querySelectorAll('.bigger');
    
    containers.forEach(container => {
        // 收集目标标签文本，过滤不存在的标签避免报错
        const targetTexts = [
            container.querySelector('h1'),
            container.querySelector('h3'),
            container.querySelector('p')
        ].filter(el => el)
        .map(el => el.textContent.toLowerCase().trim());
        
        // 判断是否匹配输入内容
        const isMatch = input === '' || targetTexts.some(text => text.includes(input));
        
        // 控制容器显示/隐藏
        if (isMatch) {
            container.classList.remove('hidden');
        } else {
            container.classList.add('hidden');
        }
    });
}

方案二：直接使用容器全部文本（更简洁） #

如果不需要限制特定标签，直接获取容器的所有文本内容进行匹配，所有可见文本都会被纳入搜索范围：

function searchLp() {
    const input = document.getElementById('search-lp').value.toLowerCase().trim();
    const containers = document.querySelectorAll('.bigger');
    
    containers.forEach(container => {
        const allText = container.textContent.toLowerCase().trim();
        // 使用toggle简化类操作：第二个参数为true时添加hidden，false时移除
        container.classList.toggle('hidden', !(input === '' || allText.includes(input)));
    });
}

之前尝试失败的原因分析 #

• ||逻辑写法错误：若写成!h1.includes(input) || !h3.includes(input)，会导致只要有一个标签不匹配就隐藏容器，正确逻辑应为!(h1.includes(input) || h3.includes(input) || p.includes(input))
• querySelector("h1, h3, p")无效：该方法仅返回第一个匹配的元素，无法获取所有三个标签的内容
• querySelectorAll未正确遍历：使用该方法后需要逐个遍历标签，检查是否有任意一个匹配输入，而非直接判断集合
• innerHTML包含冗余代码：直接检查innerHTML会把<h1>这类标签代码纳入判断，易出现误匹配，textContent才能获取纯文本内容

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