引言：复杂文本筛选的需求
在web开发中，数据筛选是一项核心功能。我们经常需要从一个包含多个对象的数组中，根据用户的输入来筛选出匹配的数据。然而，简单的 includes() 或 startswith() 方法往往无法满足所有需求。例如，我们可能需要：
- 单词开头匹配 (Starts With)：当搜索“tali”时，匹配“Taliparamba Co Op Hospital”。
- 字符串包含 (Contains)：当搜索“ath”时，不仅匹配“Athikkal Saw Mill,Kallai”，还要匹配“Marhaba Ice Plant Atholi”（因为“Ath”包含在“Atholi”中）。
- 多词组合搜索 (Multi-word Search)：当搜索“tali Co OP”时，仍然能找到“Taliparamba Co Op Hospital”。
为了应对这些复杂的筛选场景，正则表达式提供了一种强大且灵活的解决方案。
核心工具：正则表达式
正则表达式（Regular Expression）是一种描述字符串模式的强大工具。通过构建特定的模式，我们可以实现复杂的字符串查找、替换和匹配操作。在本教程中，我们将利用正则表达式的以下特性：
- \b 单词边界：匹配一个单词的开头或结尾，有助于实现“单词开头匹配”的效果。
- *`.?` 非贪婪匹配**：匹配任意字符零次或多次，但尽可能少地匹配，用于连接搜索词。
- i 忽略大小写标志：使匹配不区分大小写，提升用户体验。
实现原理与代码解析
我们将通过一个自定义的 search 函数来实现上述筛选逻辑。
示例数据
首先，定义一个示例数组，包含我们需要筛选的对象：
立即学习“Java免费学习笔记（深入）”；
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') 这一行。让我们逐步分解它：
-
str.split(' '):
- 这一步将输入的搜索字符串 str 按空格分割成一个字符串数组。
- 例如，如果 str 是 "tali Co OP"，结果将是 ['tali', 'Co', 'OP']。
-
*`.join('.?\b')`**:
- 这一步将分割后的字符串数组重新连接成一个字符串，但在每个单词之间插入 .*?\\b。
- .*? 匹配任意字符（除了换行符）零次或多次，且是非贪婪的，意味着它会尽可能少地匹配字符。
- \\b 是一个单词边界，它确保了我们匹配的是一个完整的单词，或者一个单词的开头。
- 所以，对于 "tali Co OP"，连接后的字符串会变成 "tali.?\bCo.?\bOP"。
-
'\\b' + ...:
- 在整个模式的最前面添加一个 \\b。这确保了第一个搜索词也必须从一个单词的边界开始匹配。
- 最终的模式字符串示例：\btali.*?\bCo.*?\bOP。
-
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' 这两个词的开头。注意事项
-
性能考量：对于非常大的数据集（例如，数万甚至数十万条记录），每次搜索都重新构建正则表达式并遍历数组可能会有性能开销。在高性能要求的场景下，可以考虑：
- 对数据进行预处理或建立索引（如Trie树、倒排索引）。
- 使用Web Workers在后台线程执行筛选，避免阻塞主线程。
- 优化正则表达式，使其更精确。
- 特殊字符处理：如果搜索字符串 str 可能包含正则表达式的特殊字符（如 . * + ? ( ) [ ] { } \ | ^ $/），则在构建正则表达式之前，需要对 str 进行转义，以防止它们被解释为正则表达式的元字符。例如，可以使用 str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') 进行转义。本教程的示例假定搜索词是普通的文本。
- 精确度与灵活性平衡：当前方案通过 \b 实现了单词边界匹配，这在很多情况下是理想的。如果需要更宽松的“任意位置包含”匹配（不要求从单词边界开始），可以移除正则表达式开头的 \b。例如 new RegExp(str.split(' ').join('.*?'), 'i')。但本教程的目的是同时满足“starts with”和“contains”的要求。
总结
通过巧妙地结合 Array.prototype.filter() 和 RegExp，我们能够构建一个强大而灵活的JavaScript数组对象筛选器。这个方案不仅能处理简单的包含匹配，还能应对复杂的单词开头匹配和多词组合搜索，大大提升了数据检索的效率和用户体验。理解正则表达式的构建原理是实现此类高级筛选功能的关键。
