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

Question

I have an array of elements (let's say a list of fitness trainings).

I have a search bar, and I would like to create a search feature to find a specific training .

I know how to filter the array to:

1. Keep trainings where name start with string typed in the search bar

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

Exemple: Search = "El"...

Results -> ["Elizabeth", "Elisa"]

Results not fetched -> ["Open Elios"]

2. Keep trainings where name contains string typed in the search bar

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

Exemple: Search = "El"...

Results -> ["Elizabeth", "Open Elios", "Camel"]

But it's not what I would like:

3. Keep training where name contains words starting with string typed in the search bar

Exemple: Search = "El"...

Results -> ["Elizabeth", "Open Elios"]

Results not fetched -> ["Camel"]

Answer 1

You can use regex for that, something like:

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

The important part is \\b which means word boundary, basically this expression /bel is testing if the value contains something that starts with a word boundary and is fallowed by el .

Here is a complete example that constructs the regex from a string:

 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

You could create a dynamic regex with a word boundary \\b using RegExp constructor

 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 3

Apart form regex, you could also apply filter twice with the last one returning a boolean value for the filter of the current string to be included.

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

Update:

As suggested by @Titus in the comments, you can also use some() method to filter data which would immediately return true if it finds a token which starts with your search string, instead of collecting all tokens in a filter that would start with your search string.

 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 4

You can use regex to build a dynamic pattern based on value

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

• (?:^|[ ]) - Match start of string or space
• ${value} - dynamic value coming from search bar

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