Creating a search function for strings in Javascript - React Native

Question

I'm trying to create a function which will search a specific words.

For example if I tap the letter "O" the first result will be the word "Oasis" (and not "U2 - Still Haven't Found What I'm..." and all the other songs that has "O" in their words), or any other middle word.
It need to ignore spaces - " ", the char "-" (" "-" ") and ' or other chars, so it will connect all thw words together.
For example when I tap "dontlookbackin" the search will find the word which is starting with the first letter I pressed, than the other letter in the word and so on.

So far I'm only able to make a simple search - to find every word that contains the first letter I pressed.

The specific part of the "search" function :

 SearchSong = () => {
    console.log("Pressed")
    var e = this.state.searchRes;
    if (e == "") {
      return;
    }
    var musicList = [];
    var songs = [];
    if (this.state.songs != null) {
      songs = this.state.songs;  
       musicList = songs.filter(song =>
        song.Song_Name.toLowerCase().includes(e.toLowerCase())
      );

Example of the current search -

If more detials and fixes are needed please tell me.

What is the actual problem? Removing the spaces and such? Since the string 'Oasis - Don't Look Back In Anger' without spaces and in lowercase is 'oasisdontlookbackinanger', so your .includes() check should find it. — Shilly, Nov 30 '18 at 11:30
@Shilly I need it to find only the word which start twith the letter I pressed, than the second (the third and so on). As for now it don't ignore the chars and spaces. — ExtraSun, Nov 30 '18 at 11:34

Sagar Jajoriya · Accepted Answer · 2018-11-30T12:40:24.247

1

let strKeyword = "string001";
    musicList = [];
    songsLength = songs.length;

for (i = 0; i < songsLength; i++) {
    if (songs[i].Song_Name.replace(/[^a-zA-Z0-9]/g, "").substr(0, strKeyword.length).toLowerCase() == strKeyword.toLowerCase()) {
        musicList.push(songs[i]);
    }
}

console.log(musicList);

edited Nov 30 '18 at 12:40

answered Nov 30 '18 at 11:41

Sagar Jajoriya

2,377
1
9
17

Thanks, I think it should ignore the chars and " " in the search result not in the word I pressed. still in progress, I updated my qustion. What if need numbers not to ignore them ? – ExtraSun Nov 30 '18 at 12:34
1

You want to remove all the chars from the songs list, not from the search keyword, am I right ? – Sagar Jajoriya Nov 30 '18 at 12:37
Yes I fixed this - ` if (this.state.songs[i].Song_Name.replace(/[^a-zA-Z]/g, "").substr(0, strKeyword.length).toLowerCase() == strKeyword.toLowerCase()) { fixed it with numbers thanks. Can you tell me how to find from a middle word in the string? ` . – ExtraSun Nov 30 '18 at 12:38
1

Updated the answer for skip numbers also. Please check. – Sagar Jajoriya Nov 30 '18 at 12:41
middle word like ? – Sagar Jajoriya Nov 30 '18 at 12:41
Middle as - people are strange (from : The Doors - People Are Strange) – ExtraSun Nov 30 '18 at 12:47
1

For this, you can use `include` method to find occurrence as you've already used in your question. – Sagar Jajoriya Nov 30 '18 at 12:48
I dont understand where to put in the code the 'inclueds' to find a whole middle word – ExtraSun Nov 30 '18 at 12:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184519/discussion-between-sup-dr-and-sagar-jajoriya). – ExtraSun Nov 30 '18 at 12:59

score 1 · Answer 2 · answered Nov 30 '18 at 11:42

Something along these lines should get you started (see comments):

function removeUnwantedChars(str) {
    return str.replace(/\W/g, "");
}

function search(str) {
    // Create regex like "abc" becomes "^a.*b.*c"
    str = removeUnwantedChars(str);
    if (!str) {
        return [];
    }
    const searchRex = new RegExp(
        "^" +
        RegExp.escape(str.charAt(0)) + [...str.substring(1)].map(ch =>
            ".*" + RegExp.escape(ch)
        ).join(""),
        "i"
    );
    // Search for matches
    return songs.filter(song => searchRex.test(song.Song_Name.replace(/\W/g, "")));
}

...using a regex escape function along the lines of the ones in this question's answers.

Live Example:

if (!RegExp.escape) {
    RegExp.escape = function(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    };
}

const songs = [
    {Song_Name: "U2 - I Still Haven't Found What I'm Looking For"},
    {Song_Name: "Oasis - Champagne Supernova"},
    {Song_Name: "Oasis - Don't Look Back In Anger"},
    {Song_Name: "The Rolling Stones - Like A Rolling Stone"}
];

function removeUnwantedChars(str) {
    return str.replace(/\W/g, "");
}

function search(str) {
    // Create regex like "abc" becomes "^a.*b.*c"
    str = removeUnwantedChars(str);
    if (!str) {
        return [];
    }
    const searchRex = new RegExp(
        "^" +
        RegExp.escape(str.charAt(0)) + [...str.substring(1)].map(ch =>
            ".*" + RegExp.escape(ch)
        ).join(""),
        "i"
    );
    // Search for matches
    return songs.filter(song => searchRex.test(song.Song_Name.replace(/\W/g, "")));
}

const testStrings = [
  "oasisdontlookbackin",
  "oasisanger",
  "therollstone",
  "rolling" // no match
];
for (const str of testStrings) {
  console.log(str, "=>", search(str));
}

.as-console-wrapper {
  max-height: 100% !important;
}

The .* in the regex means "any number of any character here" which means that you don't have to type every significant character after the first one (which is why "oasisanger" works). But it does incorporate your requirement that the first character match the first character of the name.

That said, I'd drop the requirement that the user get the first character right. More flexible. But it's a matter of taste. — T.J. Crowder, Nov 30 '18 at 11:44

score 0 · Answer 3 · answered Nov 30 '18 at 11:42

0

Try this: song.Song_Name.toLowerCase().startsWith(e.toLowerCase())

answered Nov 30 '18 at 11:42

Walidovic

21
1
7

I tried it, it worked(!) but I want to find also from a middle word. ( I edited the question). – ExtraSun Nov 30 '18 at 11:54

Creating a search function for strings in Javascript - React Native

3 Answers3