JavaScript高级搜索实现：解决搜索栏无序关键词匹配失效问题

当前问题根因是代码使用了完整输入串的包含匹配逻辑，词序和目标内容不一致时就会命中失败。你可以通过拆分用户输入为独立关键词，要求所有关键词均命中内容即可完成匹配，不受词序限制。

核心修改代码 #

_searchCalls() {
    let rows = document.querySelector('call-journal').shadowRoot.querySelectorAll('#row')
    let callEntries = document.querySelector('call-journal').shadowRoot.querySelectorAll('call-entry')
    // 提前预处理搜索输入，避免循环内重复执行，提升性能
    const userInput = this._getSearchInput().toLowerCase()
    // 按任意空白字符拆分关键词，过滤空串避免连续空格导致的无效判断
    const keywords = userInput.split(/\s+/).filter(keyword => keyword.length)

    for(let i = 0; i < callEntries.length; i++) {
      const entryInfo = callEntries[i].shadowRoot.querySelector('.callInfo').textContent.toLowerCase()
      const entryDate = callEntries[i].shadowRoot.querySelector('.dateWrapper').textContent.toLowerCase()
      
      // 所有关键词全部命中即匹配成功，不限制词序
      const isMatch = keywords.every(keyword => entryInfo.includes(keyword) || entryDate.includes(keyword))
      rows[i].classList.toggle('hide', !isMatch)
    }
}

主要优化点 #

• 搜索输入预处理逻辑移到循环外，减少重复DOM查询和字符串处理开销
• 关键词拆分支持任意数量的空格分隔，用户输入多个空格也能正常处理
• 日期内容统一转小写，避免大小写差异导致的匹配失效
• 用classList.toggle简化隐藏/显示的类名切换逻辑

可选拓展方案 #

• 全词匹配需求：可替换包含判断为带单词边界的正则匹配，避免短词意外命中长词，比如Bill不会命中Billy：

  const isMatch = keywords.every(keyword => {
    // 转义正则特殊字符避免输入特殊符号报错
    const reg = new RegExp(`\\b${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`, 'i')
    return reg.test(entryInfo) || reg.test(entryDate)
  })
  

• 容错搜索需求：可引入莱文斯坦距离算法，关键词和内容片段的编辑距离小于阈值即可判定命中，兼容用户少量输入错字的场景
• 结果排序需求：可统计每个条目的关键词命中数量、匹配位置权重，得分高的条目优先展示

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