JavaScript实现用户列表搜索过滤 前缀匹配项优先排序

实现步骤 #

• 预处理搜索关键词：去除首尾空格后统一转为小写，解决大小写匹配不一致的问题，空关键词可直接返回排序后的原数组
• 初步筛选：遍历原始用户列表，保留所有（转小写后）包含搜索关键词的项
• 匹配分组：将筛选出的项拆为两组，前缀匹配组存放（转小写后）以搜索关键词开头的项，非前缀包含组存放仅包含关键词但不以其开头的项
• 组内排序：两组分别按自然字母顺序排序，避免ASCII编码排序导致大写项强制排在小写项前的问题
• 结果拼接：前缀匹配组在前、非前缀包含组在后，拼接得到最终结果

完整代码实现 #

function filterAndSortUsers(users, keyword) {
  const lowerKeyword = keyword.trim().toLowerCase();
  // 空关键词场景可根据业务调整，此处默认返回按字母排序的全量列表
  if (!lowerKeyword) {
    return [...users].sort((a, b) => a.localeCompare(b));
  }

  // 第一步：筛选所有包含关键词的匹配项
  const allMatched = users.filter(user => {
    return user.toLowerCase().includes(lowerKeyword);
  });

  // 第二步：拆分前缀匹配、非前缀匹配两组
  const prefixList = [];
  const containList = [];
  allMatched.forEach(user => {
    if (user.toLowerCase().startsWith(lowerKeyword)) {
      prefixList.push(user);
    } else {
      containList.push(user);
    }
  });

  // 第三步：两组分别按自然字母序排序
  prefixList.sort((a, b) => a.localeCompare(b));
  containList.sort((a, b) => a.localeCompare(b));

  // 拼接返回最终结果
  return [...prefixList, ...containList];
}

// 测试验证
const users = ["Armand Collins", "Any user", "Marc Hayes", "mark"];
console.log(filterAndSortUsers(users, "ma"));
// 输出结果：["Marc Hayes", "mark", "Armand Collins"]，与预期完全一致

补充说明 #

• 代码全程不修改原始输入数组，返回的是全新数组，不会污染原始数据源
• 匹配逻辑默认大小写不敏感，如果业务需要大小写精确匹配，移除所有.toLowerCase()转换逻辑即可
• 排序使用localeCompare实现自然字母排序，适配多语言场景的排序需求，比直接比较字符串编码的排序结果更符合用户认知

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