使用 match() 搜索数组中的多个值

Question

我想获取对象作为输出，其中一个值与搜索的文本匹配。我目前使用返回匹配来执行此操作。但我还没有弄清楚，如何测试数组中的数字。目前它只有在我输入类型或名称时才有效。

例如如果我输入 2 它应该输出 [{"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]}]

Json 文件：

[
    {"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]},
    {"type":"ABe 4/16", "name":"STZ","numbers":["5", "6", "8", "9", "12"]},
    {"type":"ABe 4/16", "name":"RTZ", "numbers":["10", "11", "13", "14", "15"]},
    {"type":"Test", "name":"RTZ", "numbers":["16", "17", "18", "19", "20"]}
]

Javascript：

const search = document.getElementById('search');

const searchData = async searchText => {
    const res = await fetch('https://cmd-golem.github.io/json/test.json');
    const resJson = await res.json();
    
    let matches = resJson.filter(data => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return data.type.match(regex) || data.name.match(regex);
    });

    console.log(matches)
};

search.addEventListener('input', () => searchData(search.value));

有人知道如何通过返回匹配来做到这一点，或者如果用其他方式不可能做到这一点。

const search = document.getElementById('search');

const searchData = async searchText => {
    const res = await fetch('https://cmd-golem.github.io/json/test.json');
    const resJson = await res.json();
    
    let matches = resJson.filter(data => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return data.type.match(regex) || data.name.match(regex);
    });

    console.log(matches)
};

search.addEventListener('input', () => searchData(search.value));

<input id="search" type="text" placeholder="Search">

Answer 1

我的建议。见 cmets。

const search = document.getElementById('search');
const searchData = async searchText => {
    const res = await fetch('https://cmd-golem.github.io/json/test.json');
    const resJson = await res.json();
    const regex = new RegExp(`^${searchText}`, 'gi'); // note it's ouside the filter.
    // Recursion.
    const found = data => (Array.isArray(data) ? data.find(found) : data.match(regex));
    let matches = resJson.filter(data => (found(data.type) || found(data.name) || found(data.numbers)));
    console.log(matches);
};
search.addEventListener('input', () => searchData(search.value));

<input id="search" type="text" placeholder="Search">

Answer 2

我认为你是在正确的轨道上。您可以使用以下内容搜索特定的引用文本：

let data = [
  {"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]},
  {"type":"ABe 4/16", "name":"STZ","numbers":["5", "6", "8", "9", "12"]},
  {"type":"ABe 4/16", "name":"RTZ", "numbers":["10", "11", "13", "14", "15"]},
  {"type":"Test", "name":"RTZ", "numbers":["16", "17", "18", "19", "20"]}
];

let filter = "2";
let pattern = new RegExp(`"${filter}"`);
let filtered = data.filter((d) => pattern.test(JSON.stringify(d)));

console.log(filtered);

stringify 语句确保每个项目都有一个字符串，RexExp 测试可以测试该字符串中 filter 的任何匹配项