JavaScript中基于关键词的数组/表格排序筛选实现

基础过滤实现（仅展示匹配项，不排序） #

核心逻辑是监听用户输入的关键词，统一转换为大小写不敏感的格式后，和列表项的name字段做包含匹配：

// 原始数据
const list = [
  {name: "Apple"},
  {name: "Grape"},
  {name: "Banana"},
  {name: "Pineapple"}
]

// 筛选函数，入参为用户输入的关键词
function filterList(keyword = '') {
  const trimedKeyword = keyword.trim()
  // 空关键词可根据需求返回原列表或者空列表
  if (!trimedKeyword) return list
  // 统一转小写实现大小写不敏感匹配
  const lowerKeyword = trimedKeyword.toLowerCase()
  return list.filter(item => {
    return item.name.toLowerCase().includes(lowerKeyword)
  })
}

调用示例：输入app时，返回结果为[{name: "Apple"}, {name: "Pineapple"}]

带匹配度排序的实现（匹配度越高排名越靠前） #

如果需要对匹配结果按关联度重排，可以给每个匹配项加权重值，过滤后按权重倒序排列：

function filterAndSortList(keyword = '') {
  const trimedKeyword = keyword.trim()
  if (!trimedKeyword) return list
  const lowerKeyword = trimedKeyword.toLowerCase()
  return list
    .map(item => {
      const lowerName = item.name.toLowerCase()
      let weight = 0
      // 完全匹配权重最高
      if (lowerName === lowerKeyword) weight = 3
      // 开头匹配权重次之
      else if (lowerName.startsWith(lowerKeyword)) weight = 2
      // 中间包含匹配权重最低
      else if (lowerName.includes(lowerKeyword)) weight = 1
      return { ...item, weight }
    })
    // 过滤掉不匹配的条目，按权重倒序排列
    .filter(item => item.weight > 0)
    .sort((a, b) => b.weight - a.weight)
}

调用示例：输入app时，Apple属于开头匹配权重为2，Pineapple属于中间包含权重为1，排序后Apple会排在Pineapple前面。

扩展说明 #

• 如果后续列表新增了其他需要匹配的字段，只需要修改匹配逻辑，比如要同时匹配名称和描述字段，增加|| item.desc.toLowerCase().includes(lowerKeyword)即可
• 如果需要支持模糊匹配、拼音匹配等能力，可引入第三方拼音转换库，提前给每个列表项生成拼音字段后再做匹配

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