如何基于用户输入过滤字符串列表并排除多空格匹配？

问题根源 #

当输入多个空格时，searchTerm.trim()会得到空字符串，而空正则表达式RegExp('')会匹配任意字符串，导致返回所有列表项，不符合预期。

解决方案 #

我们需要先对搜索词做有效性校验，同时转义用户输入中的正则特殊字符（避免元字符干扰匹配逻辑），再执行正则过滤：

const suggestions = ['las vegas', 'last resort', 'other last'];
const searchTerm = '   '; // 测试多空格输入场景

// 1. 预处理搜索词，去除前后空格
const trimmedTerm = searchTerm.trim();

// 2. 空搜索词直接返回空结果
if (!trimmedTerm) {
  const filtered = [];
  console.log(filtered);
} else {
  // 3. 转义正则特殊字符，避免用户输入干扰
  const escapedTerm = trimmedTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 4. 构建正则，保留不区分大小写，支持后续添加捕获组
  const regex = new RegExp(escapedTerm, 'i');
  const filtered = suggestions.filter(suggestion => regex.test(suggestion));
  console.log(filtered);
}

关键说明 #

• 空值拦截：当trimmedTerm为空时直接返回空数组，彻底避免空正则匹配所有内容的问题。
• 特殊字符转义：处理用户输入的*、+、.等正则元字符，确保匹配逻辑是基于用户输入的字面内容，而非正则语法。
• 保留扩展性：原有的不区分大小写匹配和动态输入特性完全保留，后续可以直接在正则中添加捕获组（比如new RegExp((${escapedTerm}), 'i')）实现额外处理需求。

内容的提问来源于stack exchange，提问作者Cristian Flórez