如何搜索任意顺序的字符串

Question

我有一个.js文件，里面有字符串数组。假设我的一个数组有字符串"敏捷的棕色狐狸跳过懒惰的狗"。我可以搜索"敏捷的棕色狐狸"。它会在数组中显示具有那个值的字符串。但是如果我搜索"狐狸跳得快，狗跳得懒"，它就不会显示这一行。我的搜索需要与字符串出现在数组中的顺序相同，否则它将不起作用。我如何在数组中搜索，使其显示匹配的条目而不是精确的条目?

下面是我的代码:

//App.js
import { useState } from "react";
import { Data } from "./data";
import "./App.css";
import Table from "./Table";
function App() {
const [query, setQuery] = useState("");
const keys = [""];
const search = (data) => {
return data.filter((item) =>
keys.some((key) => item.toLowerCase().includes(query))
);
};
return (
<div className="app">
<h1>Search Something</h1>
{/* <Home /> */}

<div className="searchBoxes">
<input
className="search"
placeholder="Search Array..."
onChange={(e) => setQuery(e.target.value.toLowerCase())}
/>
</div>
{<Table data={search(Data)} />}
</div>
);
}
export default App;

//data.js
export const Data = ["The quick brown fox jumps over the lazy dog", "Lorem ipsum dolor sit amet", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC"]

//Table.jsx
const Table = ({ data }) => {
return (
<table>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item}</td>
</tr>
))}
</tbody>
</table>
);
};

export default Table;

我尝试使用不同的数组函数，如。map()，但没有得到想要的结果。

Answer 1

您正在使用如何在data数组中搜索的错误顺序。

const search = (data) => {
queryWords = query.split(' ').filter(queryWord => queryWord.length > 0)
return data.filter(dataEntry => queryWords.every(queryWord => dataEntry.toLowerCase().split(' ').includes(queryWord) || dataEntry.toLowerCase().includes(queryWord)))
};

queryWords包含搜索查询中的每个单词，例如，如果您正在搜索棕色狗，则:

query='the brown dog'

现在按' '拆分，得到数组

queryWords = ['the', 'brown', 'dog']

你需要过滤它，所以它不包含任何空字符串。这就是filter(queryWord => queryWord.length > 0)发挥作用的地方。

你需要知道的是过滤data数组中的每个dataEntry:你正在寻找包含every的条目从你的搜索查询词或整个句子(注意||运算符和dataEntry.toLowerCase().includes(queryWord)基本上就像你最初的想法。