如何在字符串中匹配两个不连续的单词以进行 React/Javascript 搜索？

Question

我有一个依赖于这种过滤方法的搜索栏。 我将所有搜索字符串连接到变量concat 中，然后使用.includes() 或.match()，如下所示。如果搜索多个单词，仅当单词在concat 中连续出现时才会返回结果。

但是，我希望它匹配 concat 中的任何两个单词，而不仅仅是连续的单词。有没有办法轻松做到这一点？

    .filter((frontMatter) => {
      var concat =
        frontMatter.summary +
        frontMatter.title +
        frontMatter.abc+
        frontMatter.def+
        frontMatter.ghi+
        frontMatter.jkl;
      return concat.toLowerCase().match(searchValue.toLowerCase());
    });

也试过了；

    .filter((frontMatter) => {
      const concat =
        frontMatter.summary +
        frontMatter.title +
        frontMatter.abc+
        frontMatter.def+
        frontMatter.ghi+
        frontMatter.jkl;
      return concat.toLowerCase().includes(searchValue.toLowerCase());
    });

谢谢！

Answer 1

一切都在代码的 cmets 中进行了解释。

如果您不在乎“阻止”与“未确定”一词匹配

.filter((frontMatter) => {
  // Get the front matter into a string, separated by spaces
  const concat = Object.values(frontMatter).join(" ").toLowerCase();

  // Look for a string in quotes, if not then just find a word
  const regex = /\"([\w\s\\\-]+)\"|([\w\\\-]+)/g;

  // Get all the queries
  const queries = [...searchValue.toLowerCase().matchAll(regex)].map((arr) => arr[1] || arr[2]);

  // Make sure that every query is satisfied
  return queries.every((q) => concat.includes(q));
});

如果您确实关心“阻止”不应匹配“未确定”一词

.filter((frontMatter) => {
  // Get the front matter into a string, separated by spaces
  // The prepended and appended spaces are important for the regex later!
  const concat = ` ${Object.values(frontMatter).join(" ").toLowerCase()} `;

  // Look for a string in quotes, if not then just find a word
  const regex = /\"([\w\s\\\-]+)\"|([\w\\\-]+)/g;

  // Get all the queries
  const queries = [...searchValue.toLowerCase().matchAll(regex)].map((arr) => arr[1] || arr[2]);

  // Make sure that every query is satisfied
  // [\\s\\.?!_] and [\\s\\.?!_] check for a space or punctuation at the beginning and end of a word
  // so that something like "deter" isn't matching inside of "undetermined"
  return queries.every((q) => new RegExp(`[\\s\\.?!_]${q}[\\s\\.?!_]`).test(concat));
});

Answer 2

我会使用.reduce 来计算匹配的数量，如果至少有 2 个则返回 true：

const props = ['summary', 'title', 'abc', 'def', 'ghi', 'jkl'];
// ...
.filter((frontMatter) => {
  const lowerSearch = searchValue.toLowerCase();
  const matchCount = props.reduce(
    (a, prop) => a + lowerSearch.includes(frontMatter[prop].toLowerCase()),
    0
  );
  return matchCount >= 2;
})