JavaScript数组对象高级筛选：实现多条件模糊匹配（包含与开头匹配）-js教程-PHP中文网

JavaScript数组对象高级筛选：实现多条件模糊匹配（包含与开头匹配）

聖光之護

发布： 2025-10-07 12:37:19

原创

648人浏览过

JavaScript数组对象高级筛选：实现多条件模糊匹配（包含与开头匹配）

本文详细讲解如何使用JavaScript高效过滤对象数组。针对name属性，通过构建动态正则表达式，实现对搜索字符串的模糊匹配，包括开头匹配、包含匹配以及多词组合匹配，从而满足复杂的搜索需求。

在现代web应用中，数据筛选是一个核心功能。当我们需要从一个包含多个对象的数组中，根据某个字符串属性（例如name）进行搜索时，往往不仅仅需要简单的精确匹配或判断是否包含，还需要更灵活的模糊匹配能力。例如，用户可能输入一个词希望匹配开头，输入多个词希望匹配这些词的组合，或者输入一个词希望匹配任意位置包含该词的项。

筛选需求分析

假设我们有一个对象数组，每个对象都有一个id和name属性：

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

登录后复制

我们需要实现以下两种核心筛选逻辑：

开头匹配或多词开头匹配：
- 当搜索'tali'时，应匹配'Taliparamba Co Op Hospital'（Taliparamba以tali开头）。
- 当搜索'tali Co OP'时，应匹配'Taliparamba Co Op Hospital'（Taliparamba以tali开头，且包含Co Op）。
包含匹配：

立即学习“Java免费学习笔记（深入）”；
- 当搜索'ath'时，应匹配'Athikkal Saw Mill,Kallai'（Athikkal包含ath）和'Marhaba Ice Plant Atholi'（Atholi包含ath）。

解决方案：利用正则表达式实现灵活匹配

为了高效且灵活地处理上述复杂的模糊匹配需求，正则表达式是理想的选择。通过动态构建正则表达式，我们可以实现强大的搜索功能。

琅琅配音

全能AI配音神器

208

查看详情

核心思路

将用户输入的搜索字符串拆分成独立的词语。
为每个词语构建一个正则表达式片段，并用.*?\b（非贪婪匹配任意字符直到下一个词边界）连接起来，以允许匹配词语之间有其他字符或词语。
在整个正则表达式的开头添加\b，确保第一个搜索词在目标字符串中从一个词的边界开始匹配。
使用i标志实现大小写不敏感匹配。

实现步骤

首先，定义我们的数据数组：

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

登录后复制

接下来，我们创建一个search函数，它接收一个数组和搜索字符串作为参数：

function search(arr, str) {
  // 1. 处理空搜索字符串
  if (!str || str.trim() === '') {
    return arr; // 如果搜索字符串为空，返回原始数组
  }

  // 2. 构建正则表达式
  // 将搜索字符串按空格分割成词语，并用 '.*?\b' 连接
  // '.*?' 表示非贪婪匹配任意字符（0次或多次）
  // '\b' 表示词边界，确保匹配的是完整的词或词的一部分
  // 整体表达式以 '\b' 开头，确保第一个词从一个词的边界开始匹配
  const pattern = '\b' + str.split(' ').join('.*?\b');

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

  // 3. 使用 filter 方法和 test 方法进行筛选
  // filter 遍历数组的每个元素
  // regexp.test(item.name) 检查元素的 name 属性是否匹配正则表达式
  return arr.filter((item) => regexp.test(item.name));
}

登录后复制

代码详解

if (!str || str.trim() === '') { return arr; }: 这是一个良好的实践，如果搜索字符串为空或只包含空格，则直接返回原始数组，避免不必要的计算。
str.split(' '): 将搜索字符串按空格分割成一个词语数组。例如，'tali Co OP'会变成['tali', 'Co', 'OP']。
*`.join('.?')**: 将分割后的词语数组用'.*?'`连接起来。
- .*?: 这是一个非贪婪匹配模式。.匹配任何字符（除了换行符），*表示匹配零次或多次，?使其变为非贪婪模式，即尽可能少地匹配字符。这允许我们的搜索词之间可以有其他字符，并且这些字符的数量可以是任意的。
- \b: 这是一个词边界锚点。它匹配一个单词字符（字母、数字、下划线）和非单词字符之间的位置，或者字符串的开头/结尾。使用它能确保我们匹配的是一个完整的词或词的一部分，而不是在词的中间任意位置。
'\b' + ...: 在整个正则表达式模式的开头添加'\b'。这确保了我们搜索的第一个词必须从目标字符串中的一个词边界开始。例如，搜索'ath'时，它会匹配'Athikkal'中的Ath，而不是'somethingAthe'中的Athe。
new RegExp(pattern, 'i'): 创建一个新的正则表达式对象。pattern是我们动态生成的匹配规则，'i'是标志，表示进行大小写不敏感匹配。
arr.filter((item) => regexp.test(item.name)): 使用数组的filter方法遍历arr数组。对于每个item，调用regexp.test(item.name)方法。如果item.name匹配我们构建的正则表达式，test方法返回true，该item就会被包含在最终的过滤结果中。

示例用法

现在，我们可以使用search函数来测试我们的筛选逻辑：

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

// 示例一：开头匹配
console.log("搜索 'tali':", search(test, 'tali'));
// 预期输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例二：多词组合匹配（开头+包含）
console.log("搜索 'tali Co OP':", search(test, 'tali Co OP'));
// 预期输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例三：包含匹配
console.log("搜索 'ath':", search(test, 'ath'));
// 预期输出: [
//   { id: 1, name: 'Athikkal Saw Mill,Kallai' },
//   { id: 1, name: 'Marhaba Ice Plant Atholi' }
// ]

// 示例四：空字符串搜索
console.log("搜索 '':", search(test, ''));
// 预期输出: 原始数组全部返回

// 示例五：不匹配
console.log("搜索 'xyz':", search(test, 'xyz'));
// 预期输出: []

登录后复制

注意事项与总结

性能考量： 对于非常大的数据集（例如数万甚至数十万条记录），每次搜索都动态构建正则表达式并遍历数组可能会有性能开销。在这种情况下，可以考虑：
- 对数据进行预处理或索引（例如使用Fuse.js等模糊搜索库）。
- 在后端进行搜索，减轻前端负担。
- 对搜索结果进行缓存。
特殊字符处理： 如果用户输入的搜索字符串可能包含正则表达式中的特殊字符（如., *, +, ?, (, ), [, ], {, }, |, ^, $, \），则需要在构建pattern之前对str进行转义，以防止意外的匹配行为或正则表达式错误。例如，可以使用str.replace(/[.*+?^${}()|[]\]/g, '\$&')进行转义。
精确度与灵活性： 当前的解决方案提供了高度的灵活性，允许词语之间有间隔。如果需要更严格的匹配（例如，要求所有词语必须按顺序出现且不能有其他词语间隔），则需要调整正则表达式的构建逻辑。
用户体验： 结合防抖（debounce）或节流（throttle）技术，可以优化用户在输入搜索词时的体验，避免频繁触发搜索操作。