JavaScript数组对象高级过滤：实现多条件（开头匹配与内容包含）搜索-js教程-PHP中文网

JavaScript数组对象高级过滤：实现多条件（开头匹配与内容包含）搜索

本文深入探讨了如何在JavaScript中高效地过滤对象数组，以满足“开头匹配”和“内容包含”这两种常见的搜索需求。通过巧妙利用正则表达式，我们构建了一个灵活且大小写不敏感的通用过滤函数，能够处理单词、多词顺序匹配以及模糊包含匹配，为数据筛选提供了强大的解决方案。

需求背景：多条件对象数组过滤

在前端开发中，我们经常需要对包含大量数据的对象数组进行筛选和搜索。常见的场景包括：

开头匹配（StartWith）：用户输入部分关键词，系统返回以这些关键词开头的匹配项。例如，搜索“tali”能找到“Taliparamba Co Op Hospital”。
多词顺序匹配：用户输入多个关键词，系统返回包含所有关键词且按顺序出现的匹配项。例如，搜索“tali Co OP”也能找到“Taliparamba Co Op Hospital”。
内容包含（Contains）：用户输入关键词，系统返回名称中包含该关键词的所有匹配项，无论关键词出现在哪个位置。例如，搜索“ath”能找到“Athikkal Saw Mill,Kallai”和“Marhaba Ice Plant Atholi”。

这些需求往往需要一个既灵活又高效的解决方案。

核心策略：基于正则表达式的灵活匹配

为了同时满足上述多种过滤条件，我们选择使用JavaScript的正则表达式（RegExp）作为核心工具。正则表达式的强大之处在于其能够定义复杂的匹配模式，并提供高效的字符串搜索能力。

我们的策略是：

将用户输入的搜索字符串分解成独立的单词。
利用正则表达式的元字符，构建一个能够匹配这些单词按顺序出现，且单词之间可以有任意字符（或无字符）间隔的模式。
确保匹配过程忽略大小写，以提升用户体验。

实现步骤与代码示例

以下是实现多条件对象数组过滤的JavaScript函数及其应用示例：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

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

/**
 * 根据搜索词过滤对象数组
 * @param {Array<object>} arr - 待过滤的对象数组
 * @param {string} searchTerm - 用户输入的搜索词
 * @returns {Array<object>} 过滤后的数组
 */
function filterArrayOfObjects(arr, searchTerm) {
    if (!searchTerm) {
        return arr; // 如果搜索词为空，返回原数组
    }

    // 1. 将搜索词按空格分割成单词，并对每个单词进行正则转义
    //    转义是为了防止搜索词中包含特殊正则字符（如 . * + ? 等）导致匹配错误
    const escapedSearchTerms = searchTerm
        .split(' ')
        .map(word => word.replace(/[.*+?^${}()|[]\]/g, '\$&'));

    // 2. 构建正则表达式模式
    //    使用 '.*?' 非贪婪匹配任意字符（0次或多次）连接各个单词，
    //    并用 '\b' 单词边界确保匹配的是独立的单词或单词的一部分，而不是单词内部的字符。
    const pattern = escapedSearchTerms.join('.*?\b');

    // 3. 创建正则表达式对象
    //    '\b' 在模式开头，确保整个搜索从一个单词边界开始匹配。
    //    'i' 标志表示忽略大小写。
    const regex = new RegExp('\b' + pattern, 'i');

    // 4. 使用 Array.prototype.filter() 方法进行过滤
    return arr.filter(item => regex.test(item.name));
}

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

console.log("
--- 搜索 'tali Co OP' (多词顺序匹配) ---");
console.log(filterArrayOfObjects(testData, 'tali Co OP'));
/*
预期输出:
[ { id: 1, name: 'Taliparamba Co Op Hospital' } ]
*/

console.log("
--- 搜索 'ath' (内容包含) ---");
console.log(filterArrayOfObjects(testData, 'ath'));
/*
预期输出:
[
  { id: 1, name: 'Athikkal Saw Mill,Kallai' },
  { id: 1, name: 'Marhaba Ice Plant Atholi' }
]
*/

console.log("
--- 搜索 'mill' (内容包含) ---");
console.log(filterArrayOfObjects(testData, 'mill'));
/*
预期输出:
[ { id: 1, name: 'Athikkal Saw Mill,Kallai' } ]
*/

console.log("
--- 搜索 'hospital' (内容包含，大小写不敏感) ---");
console.log(filterArrayOfObjects(testData, 'hospital'));
/*
预期输出:
[ { id: 1, name: 'Taliparamba Co Op Hospital' } ]
*/

console.log("
--- 搜索 '' (空搜索词) ---");
console.log(filterArrayOfObjects(testData, ''));
/*
预期输出:
[
  { id: 1, name: 'Taliparamba Co Op Hospital' },
  { id: 1, name: 'Athikkal Saw Mill,Kallai' },
  { id: 1, name: 'Marhaba Ice Plant Atholi' }
]
*/</object></object>

关键点解析：正则表达式构建

理解正则表达式的构建是掌握此解决方案的关键：

searchTerm.split(' '): 首先，将用户输入的搜索词按空格分割成一个单词数组。例如，'tali Co OP' 会变成 ['tali', 'Co', 'OP']。
*`.map(word => word.replace(/[.+?^${}()|[]]/g, '$&'))**: 这一步非常重要，它对每个分割出的单词进行了正则表达式特殊字符的转义。例如，如果搜索词是"A.B"，没有转义的话.会被解释为匹配任意字符，而不是字面上的点。$&` 表示将匹配到的特殊字符前面加上一个反斜杠进行转义。
*`.join('.?')`**: 这是构建模式的核心。
- .*?: 这是一个非贪婪匹配模式。. 匹配除换行符以外的任何单个字符，* 匹配前一个字符零次或多次，? 使 * 变为非贪婪模式，即尽可能少地匹配字符。这意味着在两个搜索单词之间，可以有零个或多个任意字符。
- \b: 这是一个单词边界锚点。它匹配一个单词字符（字母、数字、下划线）和一个非单词字符（或字符串的开头/结尾）之间的位置。使用它确保了我们匹配的是完整的单词或单词的一部分，而不是在另一个单词内部的字符序列。
- 例如，['tali', 'Co', 'OP'] 会被连接成 tali.*?\bCo.*?\bOP。
new RegExp('\b' + pattern, 'i'):
- 在整个模式的开头添加 \b：这确保了整个搜索模式（即第一个搜索单词）必须从目标字符串中的一个单词边界开始匹配。这对于实现“开头匹配”和“多词顺序匹配”至关重要，因为它防止了在单词内部的任意位置开始匹配。
- 'i' 标志：表示执行不区分大小写的匹配。这极大地提升了用户体验，用户无需关心输入的大小写。

使用考量与进阶优化

性能考量：
- 对于小型数据集，这种方法非常高效。但如果处理数万甚至数十万条数据，且搜索操作频繁，正则表达式的构建和测试可能会带来一定的性能开销。
- 可以考虑对搜索结果进行缓存，或者在用户输入时使用防抖（debounce）或节流（throttle）技术，避免短时间内频繁触发过滤操作。
精确度与灵活性：
- 当前的 \b 确保了匹配从单词边界开始，这在很多场景下是理想的。如果需要更严格的“字符串开头匹配”而非“单词边界开头匹配”，可以将 new RegExp('\b' + pattern, 'i') 修改为 new RegExp('^' + pattern, 'i')，但这样会限制 tali Co OP 这种多词匹配，除非 Taliparamba Co Op Hospital 本身就是以 tali Co OP 开头。
- 如果希望匹配结果包含所有符合条件的字段（不仅仅是name），可以将 item.name 替换为遍历 item 所有字符串类型字段的逻辑。
用户体验：
- 提供清晰的搜索输入框，并可以考虑在搜索结果为空时给出提示。
- 对于复杂的搜索词，可以提供搜索语法提示。

总结

通过巧妙地运用JavaScript的正则表达式，我们成功实现了一个功能强大且灵活的对象数组过滤函数，能够优雅地处理“开头匹配”、“多词顺序匹配”以及“内容包含”等多种搜索场景。理解正则表达式的构建逻辑是掌握此方案的关键。在实际应用中，结合性能优化和用户体验的考量，可以构建出高效且用户友好的数据筛选功能。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南