Question

我有一系列元素（比如说健身训练列表）。

我有一个搜索栏，我想创建一个搜索功能以找到特定的培训。

我知道如何将数组过滤为：

保持训练，其中名称以在搜索栏中键入字符串开头

array = array.filter(function(item) {
   return item.name.toLowerCase().startsWith(searchFilter.toLowerCase());
});

示例：搜索=“ El” ...

结果-> ["Elizabeth", "Elisa"]

未提取结果-> ["Open Elios"]

保持训练，其中名称包含在搜索栏中键入的字符串

array = _.filter(array, function(item) {
   return _.includes(item.name.toLowerCase(), searchFilter.toLowerCase());
});

示例：搜索=“ El” ...

结果-> ["Elizabeth", "Open Elios", "Camel"]

但这不是我想要的：

保持训练，其中名称包含在搜索栏中键入字符串开头的单词

示例：搜索=“ El” ...

结果-> ["Elizabeth", "Open Elios"]

未提取结果-> ["Camel"]

Answer 1

您可以为此使用正则表达式，例如：

const result = ["Elizabeth", "Open Elios", "Camel"].filter(v => /\bel/i.test(v));
console.log(result);

重要的部分是\b，它表示单词边界，基本上，该表达式/bel用来测试该值是否包含以单词边界开头且被el赋予的东西。

这是一个完整的示例，该示例从字符串构造正则表达式：

const array = ["Elizabeth", "Open Elios", "Camel"];
const searchFilter = 'El';
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const result = array.filter(value => new RegExp(`\\b${escapeRegExp(searchFilter)}`, "i").test(value));

console.log(result);

Answer 2

除正则表达式外，您还可以两次应用filter，最后一个返回一个布尔值，表示要包含的当前字符串的过滤器。

var search_string = 'eli';
search_string = search_string.toLowerCase();
const arr = ["Elizabeth", "Open Elios", "Camel"];
const result = arr.filter(value => value.split(' ').filter(token => token.toLowerCase().startsWith(search_string)).length > 0);
console.log(result);

更新：

如@Titus在评论中所建议，您也可以使用some()方法来过滤数据，如果该数据找到以您的搜索字符串开头的令牌，则将立即返回true，而不是将所有令牌收集在过滤器中将从您的搜索字符串开始。

var search_string = 'eli';
search_string = search_string.toLowerCase();
const arr = ["Elizabeth", "Open Elios", "Camel"];
const result = arr.filter(value => value.split(' ').some(token => token.toLowerCase().startsWith(search_string)));
console.log(result);

Answer 3

您可以使用RegExp构造函数创建一个带有单词边界\b的动态正则表达式

function filter(arr, word) {
  const regex = new RegExp(`\\b${word}`, 'i');
  return arr.filter(n => regex.test(n))
}

console.log(filter(["Elizabeth", "Elisa", "Open Elios", "Camel"], "El"))

Answer 4

您可以使用正则表达式基于值构建动态模式

(?:^|[ ])${value}

(?:^|[ ])-匹配字符串或空格的开头
${value}-来自搜索栏的动态值

let search = (value) => {
  const reg = `(?:^|[ ])${value}`
  const regex = new RegExp(reg,'gi')
  const result = ["Elizabeth", "Open Elios", "Camel"].filter(v => regex.test(v));
  return result
}

console.log(search('el'));

Lodash-搜索“字符串”是否包含以“。”开头的单词

4 个答案: