Lodash - поиск, если строка содержит слово, начинающееся с

Question

У меня есть массив элементов (скажем, список фитнес-тренировок).

У меня есть панель поиска, и я хотел бы создать функцию поиска, чтобы найти конкретную тренировку .

Я знаю, как отфильтровать массив:

1. Сохранять тренинги, где имя начинается со строки , набранной в строке поиска

   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());
});

Пример: Поиск= "Эль" ...

Результаты -> ["Elizabeth", "Open Elios", "Camel"]

Но это не то, что я хотел бы:

Продолжить обучение, где имя содержит слова, начинающиеся с строка, набранная в строке поиска

Пример: Search = "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

Вы можете создать динамическое регулярное выражение с границей слова \b, используя RegExp конструктор

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'));