JavaScript嵌套遍历DOM实现精确文本搜索过滤问题求解

原有代码问题排查 #

• 遍历范围错误：将搜索栏所在的search-box容器也纳入内容遍历范围，会误操作搜索功能本身的元素
• 显示逻辑颠倒：匹配到目标<inn>标签时反而将对应p元素设置为隐藏，未匹配时才显示，和需求完全相反
• 多标签判断漏洞：单个p下存在多个<inn>标签时，仅以最后一个标签的匹配结果决定p的显示状态，前面的匹配结果会被覆盖
• 层级判断缺失：仅处理了p元素的显示隐藏，未判断父级div下是否存在可见的匹配p，导致无匹配内容的空div残留在页面
• 边界兼容缺失：未处理搜索框为空的场景，空输入时会隐藏所有内容；未做文本首尾空白过滤，容易因为标签内的多余空格导致精确匹配失效

精确匹配实现代码 #

直接替换原有JS逻辑即可，无需引入第三方库：

function searchMeDesc() {
  // 获取搜索关键词，统一做标准化处理：去首尾空格、转大写
  const input = document.getElementById('myInputDesc');
  const keyword = input.value.trim().toUpperCase();
  // 获取所有内容div，排除搜索框所在的容器
  const allContentDiv = document.querySelectorAll('div:not(.search-box)');

  // 空关键词时恢复所有内容显示
  if (!keyword) {
    allContentDiv.forEach(div => {
      div.style.display = 'block';
      div.querySelectorAll('p').forEach(p => p.style.display = 'block');
    });
    return;
  }

  // 逐div遍历判断
  allContentDiv.forEach(div => {
    let divHasMatch = false;
    const allP = div.querySelectorAll('p');
    
    allP.forEach(p => {
      let pHasMatch = false;
      const allInn = p.querySelectorAll('inn');
      
      // 逐inn标签做精确匹配
      allInn.forEach(inn => {
        const innText = inn.innerText.trim().toUpperCase();
        if (innText === keyword) {
          pHasMatch = true;
        }
      });

      // 根据p的匹配结果设置显示状态，同步更新div的匹配标记
      if (pHasMatch) {
        p.style.display = 'block';
        divHasMatch = true;
      } else {
        p.style.display = 'none';
      }
    });

    // 根据div下是否有匹配p设置div显示状态
    div.style.display = divHasMatch ? 'block' : 'none';
  });
}

// 可选优化：绑定输入实时触发，不用点击搜索按钮
document.getElementById('myInputDesc').addEventListener('input', searchMeDesc);

匹配逻辑说明 #

• 所有参与比对的文本统一先做trim()去除首尾多余空白、toUpperCase()统一为大写，避免格式差异导致匹配失效
• 采用===严格相等判断，只有<inn>标签内的文本和搜索关键词完全一致时才判定为匹配，完全不会出现搜索"Fig. 1"时误匹配"Fig. 10""Fig. 12"的问题
• 每个p、div层级单独维护匹配状态标记，不会出现多节点下判断结果被覆盖的问题
• 自动跳过搜索栏容器，不会影响搜索功能本身的显示

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