JavaScript多条件筛选技巧：开头匹配与包含搜索

下载万磁搜索绿色版

在Web开发中，数据筛选是核心功能，尤其在面对复杂文本匹配需求时，简单的`includes()`或`startsWith()`方法显得力不从心。本文深入探讨JavaScript中如何利用正则表达式高效筛选对象数组，满足基于单词开头匹配、字符串包含以及多词组合搜索等复杂需求。我们将构建一个灵活的`search`函数，通过`\b`单词边界、`.*?`非贪婪匹配以及忽略大小写标志`i`等正则表达式特性，确保数据检索的准确性和效率。掌握这些技巧，能显著提升Web应用的用户体验和数据处理能力。

引言：复杂文本筛选的需求

在Web开发中，数据筛选是一项核心功能。我们经常需要从一个包含多个对象的数组中，根据用户的输入来筛选出匹配的数据。然而，简单的 includes() 或 startsWith() 方法往往无法满足所有需求。例如，我们可能需要：

1. 单词开头匹配 (Starts With)：当搜索“tali”时，匹配“Taliparamba Co Op Hospital”。
2. 字符串包含 (Contains)：当搜索“ath”时，不仅匹配“Athikkal Saw Mill,Kallai”，还要匹配“Marhaba Ice Plant Atholi”（因为“Ath”包含在“Atholi”中）。
3. 多词组合搜索 (Multi-word Search)：当搜索“tali Co OP”时，仍然能找到“Taliparamba Co Op Hospital”。

为了应对这些复杂的筛选场景，正则表达式提供了一种强大且灵活的解决方案。

核心工具：正则表达式

正则表达式（Regular Expression）是一种描述字符串模式的强大工具。通过构建特定的模式，我们可以实现复杂的字符串查找、替换和匹配操作。在本教程中，我们将利用正则表达式的以下特性：

• \b 单词边界：匹配一个单词的开头或结尾，有助于实现“单词开头匹配”的效果。
• *`.?` 非贪婪匹配**：匹配任意字符零次或多次，但尽可能少地匹配，用于连接搜索词。
• i 忽略大小写标志：使匹配不区分大小写，提升用户体验。

实现原理与代码解析

我们将通过一个自定义的 search 函数来实现上述筛选逻辑。

示例数据

首先，定义一个示例数组，包含我们需要筛选的对象：

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

search 函数概览

search 函数接收两个参数：要筛选的数组 arr 和搜索字符串 str。

function search(arr, str) {
  // 1. 构建正则表达式
  const regexp = new RegExp('\\b' + str.split(' ').join('.*?\\b'), 'i');
  // 2. 使用 filter 方法筛选数组
  return arr.filter((item) => regexp.test(item.name));
}

正则表达式构建详解

核心逻辑在于 new RegExp('\\b' + str.split(' ').join('.*?\\b'), 'i') 这一行。让我们逐步分解它：

1. str.split(' '):

   • 这一步将输入的搜索字符串 str 按空格分割成一个字符串数组。
   • 例如，如果 str 是 "tali Co OP"，结果将是 ['tali', 'Co', 'OP']。

2. *`.join('.?\b')`**:

   • 这一步将分割后的字符串数组重新连接成一个字符串，但在每个单词之间插入 .*?\\b。
   • .*? 匹配任意字符（除了换行符）零次或多次，且是非贪婪的，意味着它会尽可能少地匹配字符。
   • \\b 是一个单词边界，它确保了我们匹配的是一个完整的单词，或者一个单词的开头。
   • 所以，对于 "tali Co OP"，连接后的字符串会变成 "tali.?\bCo.?\bOP"。

3. '\\b' + ...:

   • 在整个模式的最前面添加一个 \\b。这确保了第一个搜索词也必须从一个单词的边界开始匹配。
   • 最终的模式字符串示例：\btali.*?\bCo.*?\bOP。

4. new RegExp(pattern, 'i'):

   • 使用 new RegExp() 构造函数创建一个正则表达式对象。
   • pattern 是我们刚刚构建的模式字符串。
   • 'i' 是一个标志，表示匹配时忽略大小写。这使得搜索“tali”也能匹配“Taliparamba”。

filter 方法的应用

一旦正则表达式 regexp 被构建完成，我们就可以使用 Array.prototype.filter() 方法来筛选数组：

return arr.filter((item) => regexp.test(item.name));

• filter() 方法会遍历数组中的每一个 item。
• regexp.test(item.name) 会检查 item.name 属性是否匹配我们构建的正则表达式。如果匹配，test() 返回 true，该 item 就会被包含在最终的筛选结果中。

示例与测试

让我们使用上面定义的 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' },
];

function search(arr, str) {
  const regexp = new RegExp('\\b' + str.split(' ').join('.*?\\b'), 'i');
  return arr.filter((item) => regexp.test(item.name));
}

console.log("搜索 'tali':", search(test, 'tali'));
// 预期输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]
// 解释: 'tali' 从 'Taliparamba' 的单词边界开始匹配。

console.log("搜索 'tali Co OP':", search(test, 'tali Co OP'));
// 预期输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]
// 解释: 'tali' 匹配 'Taliparamba'，'.*?\b' 匹配中间的字符和单词边界，'Co' 匹配 'Co'，'OP' 匹配 'Op'。

console.log("搜索 'ath':", search(test, 'ath'));
// 预期输出: [
//   { id: 1, name: 'Athikkal Saw Mill,Kallai' },
//   { id: 1, name: 'Marhaba Ice Plant Atholi' }
// ]
// 解释: 'ath' 匹配 'Athikkal' 的开头，也匹配 'Atholi' 的开头。由于 \b 的存在，它会匹配 'Athikkal' 和 'Atholi' 这两个词的开头。

注意事项

1. 性能考量：对于非常大的数据集（例如，数万甚至数十万条记录），每次搜索都重新构建正则表达式并遍历数组可能会有性能开销。在高性能要求的场景下，可以考虑：
   • 对数据进行预处理或建立索引（如Trie树、倒排索引）。
   • 使用Web Workers在后台线程执行筛选，避免阻塞主线程。
   • 优化正则表达式，使其更精确。
2. 特殊字符处理：如果搜索字符串 str 可能包含正则表达式的特殊字符（如 . * + ? ( ) [ ] { } \ | ^ $/），则在构建正则表达式之前，需要对 str 进行转义，以防止它们被解释为正则表达式的元字符。例如，可以使用 str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') 进行转义。本教程的示例假定搜索词是普通的文本。
3. 精确度与灵活性平衡：当前方案通过 \b 实现了单词边界匹配，这在很多情况下是理想的。如果需要更宽松的“任意位置包含”匹配（不要求从单词边界开始），可以移除正则表达式开头的 \b。例如 new RegExp(str.split(' ').join('.*?'), 'i')。但本教程的目的是同时满足“starts with”和“contains”的要求。

总结

通过巧妙地结合 Array.prototype.filter() 和 RegExp，我们能够构建一个强大而灵活的JavaScript数组对象筛选器。这个方案不仅能处理简单的包含匹配，还能应对复杂的单词开头匹配和多词组合搜索，大大提升了数据检索的效率和用户体验。理解正则表达式的构建原理是实现此类高级筛选功能的关键。

本篇关于《JavaScript多条件筛选技巧：开头匹配与包含搜索》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！