使用连字符使 Javascript includes() 方法 return 项目

Question

我正在使用 javascript includes() 方法过滤对象数组，如下所示；

  const names = [
    {name: 'Rose-mary Thompson', age: 30},
    {name: 'Rose mary Samuel', age: 30},
    {name: 'John-Doe Jackson', age: 30},
    {name: 'John Doe Philips', age: 30},
  ]

如果我搜索 'Rose mary'，我希望结果也包括 'Rose-mary'。我不希望用户必须在带有 - 的名称出现在搜索结果之前键入连字符 (-)。

这是我的代码；

let searchQuery = 'Rose mary'
let filteredResults = []

const searchItems = () => {
    if (searchQuery.length > 1) {
        const results = names.filter((name) => {
            return name.name.toLowerCase().includes(searchQuery.toLowerCase());
          });
        filteredResults = results
    }  
}

请问我该如何实现？

Answer 1

includes 只会找到完全匹配项。由于您已经在搜索时调整了每个字符串，因此您可以将 searchQuery 和 name 都“规范化”为小写，并将 - 转换为 space:

const searchItems = () => {
    if (searchQuery.length > 1) {
        const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
        const results = names.filter((name) => {
            return name.name
                .toLowerCase()
                .replace(/-/g, " ")
                .includes(adjustedQuery);
        });
        filteredResults = results;
    }
};

const names = [
    { name: "Rose-mary Thompson", age: 30 },
    { name: "Rose mary Samuel", age: 30 },
    { name: "John-Doe Jackson", age: 30 },
    { name: "John Doe Philips", age: 30 },
];

let searchQuery = "Rose mary";
let filteredResults = [];

const searchItems = () => {
    if (searchQuery.length > 1) {
        const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
        const results = names.filter((name) => {
            return name.name
                .toLowerCase()
                .replace(/-/g, " ")
                .includes(adjustedQuery);
        });
        filteredResults = results;
    }
};

searchItems();
console.log(filteredResults);

旁注：我还会为函数设置 names 和 searchQuery 参数，并得到 return 结果：

const names = [
    { name: "Rose-mary Thompson", age: 30 },
    { name: "Rose mary Samuel", age: 30 },
    { name: "John-Doe Jackson", age: 30 },
    { name: "John Doe Philips", age: 30 },
];

const searchItems = (names, searchQuery) => {
    if (searchQuery.length > 1) {
        const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
        const results = names.filter((name) => {
            return name.name
                .toLowerCase()
                .replace(/-/g, " ")
                .includes(adjustedQuery);
        });
        return results;
    }
    return names; // Or whatever you want when there's no query
};

console.log(searchItems(names, "Rose mary"));

使用连字符使 Javascript includes() 方法 return 项目

Make the Javascript includes() method return items with hyphen

javascript

search

reactjs

react-native