React应用中Mongoose如何用$regex同时搜索MongoDB的两个字段

现有逻辑的问题根源 #

你的代码失效和CSS修改没有任何关联，全是语法逻辑层面的硬伤：

• JS 执行层面的漏洞：三元表达式命中关键词分支时，使用 && 连接两个独立的查询对象。根据 JavaScript 短路求值规则，左侧的普通对象永远是真值，&& 会直接返回右侧的操作数。也就是说最终赋值给 keyword 变量的，从来只是包含 category 正则匹配规则的对象，写在前面的 name 字段匹配逻辑在运行时会被完全丢弃，自然无法查询到商品名称匹配的结果。
• 查询设计层面的偏差：就算手动把两个字段的规则合并到同一个对象里，MongoDB 默认的查询逻辑是要求多个条件同时满足——也就是商品名称和分类必须都包含同一个关键词才算匹配，和常规搜索栏任意字段命中关键词就返回结果的预期完全不符。
  之前这段逻辑能正常运行属于偶然的巧合，可能是之前的代码括号位置不同歪打正着，或是旧版本 Mongoose 对特殊查询参数的兼容行为兜底，本质上这段写法不具备长期稳定性，失效只是时间问题。

可稳定运行的多字段匹配实现 #

要实现输入关键词后，同时对 name、category 两个字段做忽略大小写的正则匹配，需要使用 MongoDB 内置的 $or 查询操作符，修正后的代码如下：

const queryFilter = req.query.keyword
  ? {
      // 任意字段命中关键词即返回对应结果
      $or: [
        {
          name: {
            $regex: req.query.keyword,
            $options: "i",
          },
        },
        {
          category: {
            $regex: req.query.keyword,
            $options: "i",
          },
        },
      ],
    }
  : {};

const products = await Product.find({ ...queryFilter })

补充说明 #

• 上述代码完全保留了原有忽略大小写匹配的行为，只要关键词出现在商品名称或分类名称中任意一处，就会返回对应商品结果，符合常规搜索栏的交互预期
• 如果业务需求要求商品名称和分类同时包含输入关键词才算命中，只需要把代码中的 $or 替换为 $and 即可
• 当商品数据量达到十万级以上时，不建议直接使用无索引的全字段正则匹配，可以配合 MongoDB 文本索引优化查询性能，避免出现慢查询

内容的提问来源于stack exchange，提问作者DMQuinn