在 Javascript 中创建字符串搜索功能 - React Native

Question

我正在尝试创建一个将搜索特定单词的函数。

例如，如果我点击字母 "O"，第一个结果将是单词 "Oasis"（而不是 "U2 - Still Haven't Found What I'm..." 和所有其他歌词中包含 "O" 的歌曲），或者任何其他中间词。
它需要忽略空格 - " "、字符 "-" (" "-" ") 和 ' 或其他字符，因此它将所有词连接在一起。
例如，当我点击 "dontlookbackin" 时，搜索将找到以我按下的第一个字母开头的单词，而不是单词中的其他字母，依此类推。

到目前为止，我只能进行简单的搜索 - 查找包含我按下的第一个字母的每个单词。

"search"函数的具体部分：

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

当前搜索示例 -

如果需要更多细节和修复，请告诉我。

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

Answer 2

按照这些思路应该可以帮助您入门（请参阅评论）：

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, "")));
}

...按照 this question's answers.

中的行使用正则表达式转义函数

实例：

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

正则表达式中的 .* 表示 "any number of any character here" 这意味着您不必在第一个字符（即为什么 "oasisanger" 有效）。但它确实包含了您的要求，即 first 字符匹配名称的第一个字符。

Answer 3

试试这个： song.Song_Name.toLowerCase().startsWith(e.toLowerCase())

在 Javascript 中创建字符串搜索功能 - React Native

Creating a search function for strings in Javascript - React Native

javascript

search

reactjs

react-native

create-react-app