JavaScript 对象数组高级筛选：支持多条件模糊匹配

本文详细介绍了如何在JavaScript中对对象数组进行灵活筛选，以满足“开头匹配”和“包含匹配”等多条件需求。通过利用正则表达式的强大功能，我们能够高效处理单词或多词的模糊搜索，并提供了具体实现代码和使用示例，帮助开发者构建更智能的数据过滤功能。

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 字段进行上述灵活的过滤。

立即学习“Java免费学习笔记（深入）”；

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

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

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

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

2.1 正则表达式构建详解

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

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

2.2 代码实现

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

/** * 根据灵活的搜索条件过滤对象数组。 * 支持单词/多词的前缀匹配和包含匹配（基于单词边界）。 * * @param {Array