JavaScript多条件模糊筛选对象数组技巧

在JavaScript中，针对对象数组进行多条件模糊筛选是前端开发中常见的需求。本文深入探讨如何利用正则表达式实现高效、灵活的筛选，满足“开头匹配”和“包含匹配”等复杂场景。文章详细解析了如何动态构建正则表达式，以支持单词边界区分、多词模糊匹配和忽略大小写等特性，并提供了可直接使用的代码示例。通过学习本文，开发者能够掌握利用正则表达式提升数据过滤功能的关键技巧，为构建更智能、用户体验更佳的Web应用奠定基础。此外，还讨论了性能优化、特殊字符处理以及大小写敏感性等实际应用中需要注意的问题。

1. 引言与问题描述

在前端开发中，我们经常需要根据用户输入对列表数据进行实时过滤。常见的需求包括：

• 前缀匹配 (Starts With)：搜索词是目标字符串的开头部分。例如，搜索“tali”能找到“Taliparamba Co Op Hospital”。
• 包含匹配 (Contains)：搜索词是目标字符串的任意部分。例如，搜索“ath”能找到“Athikkal Saw Mill,Kallai”和“Marhaba Ice Plant Atholi”。
• 多词模糊匹配：当搜索词包含多个单词时，希望这些单词能以任意顺序且中间隔着任意字符的方式匹配目标字符串中的相应单词。例如，搜索“tali Co OP”也能找到“Taliparamba Co Op Hospital”。

传统的 startsWith() 或 includes() 方法在处理这些复杂、灵活的匹配场景时显得力不从心，尤其是在需要同时兼顾多词匹配和单词边界的情况下。

我们以下面的对象数组为例：

const test = [
    { id: 1, name: 'Taliparamba Co Op Hospital' },
    { id: 1, name: 'Athikkal Saw Mill,Kallai' },
    { id: 1, name: 'Marhaba Ice Plant Atholi' },
];

目标是编写一个通用的函数，能够根据用户输入的搜索字符串 str 对 test 数组中的 name 字段进行上述灵活的过滤。

2. 解决方案：利用正则表达式

解决这类复杂过滤问题的最佳工具是正则表达式（Regular Expression）。正则表达式提供了强大的模式匹配能力，能够灵活定义搜索规则。

核心思路是根据用户输入的搜索字符串动态构建一个正则表达式，该表达式能够：

1. 区分单词边界：确保匹配的是完整的单词或单词的开头，而非单词内部的字符。
2. 支持多词匹配：允许搜索字符串中的多个单词在目标字符串中按顺序出现，中间可以有其他字符。
3. 忽略大小写：提供更友好的用户体验。

2.1 正则表达式构建详解

我们将通过以下步骤构建正则表达式：

1. 拆分搜索字符串：将用户输入的搜索字符串按空格拆分成单词数组。例如，'tali Co OP' 变为 ['tali', 'Co', 'OP']。
2. 连接单词：使用 .*?\\b 作为连接符将拆分后的单词重新连接起来。
   • .*?：匹配任意字符零次或多次，? 使其成为非贪婪匹配，即尽可能少地匹配字符。这允许搜索词中的单词之间存在其他字符。
   • \\b：这是一个单词边界（Word Boundary）元字符。它匹配一个单词字符（字母、数字、下划线）和一个非单词字符之间的位置，或者字符串的开头/结尾。这确保了我们匹配的是独立的单词或单词的开头，而不是单词内部的子串。
3. 添加起始单词边界：在整个正则表达式的开头添加 \\b，确保第一个搜索词也从单词边界开始匹配。
4. 设置不区分大小写：使用 i 标志（ignore case）使匹配不区分大小写。

综合以上步骤，构建正则表达式的逻辑如下：

const str = 'tali Co OP';
// 1. 拆分字符串： ['tali', 'Co', 'OP']
const words = str.split(' ');
// 2. 连接单词： 'tali.*?\\bCo.*?\\bOP'
const joinedWords = words.join('.*?\\b');
// 3. 添加起始单词边界并创建正则表达式： \\btali.*?\\bCo.*?\\bOP
const regexp = new RegExp('\\b' + joinedWords, 'i');

2.2 代码实现

基于上述正则表达式构建逻辑，我们可以编写一个通用的搜索函数：

/**
 * 根据灵活的搜索条件过滤对象数组。
 * 支持单词/多词的前缀匹配和包含匹配（基于单词边界）。
 *
 * @param {Array<Object>} arr 要过滤的对象数组。
 * @param {string} str 用户输入的搜索字符串。
 * @returns {Array<Object>} 过滤后的对象数组。
 */
function search(arr, str) {
    // 如果搜索字符串为空，则返回原始数组
    if (!str || str.trim() === '') {
        return arr;
    }

    // 1. 将搜索字符串按空格拆分成单词
    const searchWords = str.trim().split(' ');

    // 2. 使用 '.*?\\b' 连接单词，并确保每个单词都在单词边界开始
    //    \\b 确保第一个单词从单词边界开始匹配
    //    .*?\\b 确保后续单词也在单词边界开始，且中间可有任意字符
    const pattern = '\\b' + searchWords.join('.*?\\b');

    // 3. 创建正则表达式对象，'i' 标志表示不区分大小写
    const regexp = new RegExp(pattern, 'i');

    // 4. 使用 filter 方法对数组进行过滤
    return arr.filter((item) => regexp.test(item.name));
}

3. 使用示例

现在，我们使用上面定义的 test 数组和 search 函数来验证其功能：

const test = [
    { id: 1, name: 'Taliparamba Co Op Hospital' },
    { id: 1, name: 'Athikkal Saw Mill,Kallai' },
    { id: 1, name: 'Marhaba Ice Plant Atholi' },
];

// 示例 1: 单词前缀匹配
// 搜索 'tali'，预期匹配 'Taliparamba Co Op Hospital'
console.log('搜索 "tali":', search(test, 'tali'));
// 输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例 2: 多词模糊匹配
// 搜索 'tali Co OP'，预期匹配 'Taliparamba Co Op Hospital'
console.log('搜索 "tali Co OP":', search(test, 'tali Co OP'));
// 输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例 3: 单词包含匹配 (基于单词边界)
// 搜索 'ath'，预期匹配 'Athikkal Saw Mill,Kallai' 和 'Marhaba Ice Plant Atholi'
console.log('搜索 "ath":', search(test, 'ath'));
// 输出: [
//   { id: 1, name: 'Athikkal Saw Mill,Kallai' },
//   { id: 1, name: 'Marhaba Ice Plant Atholi' }
// ]

// 示例 4: 搜索空字符串或空白字符串
console.log('搜索 "":', search(test, ''));
// 输出: 原始数组，即 test

console.log('搜索 "   ":', search(test, '   '));
// 输出: 原始数组，即 test

从示例输出可以看出，search 函数成功地处理了单词前缀匹配、多词模糊匹配以及单词包含匹配的需求。

4. 注意事项

• 性能考量：对于非常大的数组（数万甚至数十万条数据）和复杂的正则表达式，频繁地执行 filter 和 RegExp.test 可能会有性能开销。在这些场景下，可以考虑以下优化：
  • 预处理数据：如果 name 字段是固定的，可以提前生成一个用于搜索的规范化字符串（例如，全部小写，移除特殊字符），或者构建一个搜索索引（如倒排索引）。
  • 防抖/节流：在用户输入时，使用防抖（debounce）或节流（throttle）来限制搜索函数的调用频率。
• 特殊字符处理：如果搜索字符串 str 可能包含正则表达式的特殊字符（如 ., *, +, ?, (, ), [, ], {, }, |, ^, $, \\），并且希望它们被当作字面量字符而不是正则元字符来匹配，则需要在构建 pattern 之前对 str 进行转义。例如：

  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& 表示匹配到的完整字符串
  }
  // const pattern = '\\b' + searchWords.map(escapeRegExp).join('.*?\\b');

  本教程中的 \\b 和 .*? 是我们主动引入的正则元字符，因此不需要转义。但用户输入的 str 如果含有这些字符，则需要考虑转义。

• 大小写敏感性：当前方案通过 i 标志实现了不区分大小写。如果需要区分大小写，只需移除 i 标志即可。

5. 总结

通过巧妙地结合 JavaScript 的 split(), join() 方法和正则表达式的 RegExp 构造函数，我们成功实现了一个高度灵活的对象数组过滤函数。该函数能够有效处理单词或多词的前缀匹配和包含匹配，并能自动忽略大小写，极大地提升了用户搜索体验。掌握这种利用正则表达式动态构建搜索模式的技巧，对于开发交互性强、功能丰富的搜索和过滤功能至关重要。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript多条件模糊筛选对象数组技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。