React JS实现含数字后缀的产品搜索匹配需求

方法一：前端查询预处理 #

在搜索前对用户输入的关键词做清洗，提取出不带数字后缀的核心前缀，用这个前缀执行搜索即可匹配到原产品。

修改你的代码，在处理搜索状态时加入关键词清洗逻辑：

// 定义清洗函数：移除关键词末尾的数字后缀（比如-0、-0-11这类格式）
function cleanQuery(query) {
  return query.replace(/-(\d+(-\d+)*)$/, '');
}

function onSearchStateChange(updatedSearchState) {
  // 先处理查询关键词
  const cleanedQuery = cleanQuery(updatedSearchState.query);
  const processedSearchState = {
    ...updatedSearchState,
    query: cleanedQuery
  };

  if (
    !isEqual(searchState.query, processedSearchState.query) ||
    !isEqual(searchState.page, processedSearchState.page) ||
    !isEqual(searchState.refinementList, processedSearchState.refinementList) ||
    !isEqual(searchState.range, processedSearchState.range)
  ) {
    if (path !== "?") {
      // 同步URL中的查询参数为清洗后的关键词
      const newPath = path.replace(/query=[^&]+/, `query=${encodeURIComponent(cleanedQuery)}`);
      navigate(location.pathname + newPath, {
        state: {
          disableScrollUpdate: true,
        },
      });
      setSearchState(processedSearchState);
    }
  }
}

同时，在从URL读取搜索状态的useEffect里也要加入清洗逻辑：

useEffect(() => {
  const originalSearchState = urlToSearchState(location, fields);
  const cleanedQuery = cleanQuery(originalSearchState.query);
  setSearchState({
    ...originalSearchState,
    query: cleanedQuery
  });
  setOverlayState(urlToOverlayState(location));
}, [location]);

方法二：后端索引优化（以Algolia为例） #

如果不想在前端处理，可在搜索索引层面配置规则，让系统自动识别这类变体关键词：

• 添加同义词映射：在索引的同义词设置中，将EMS-M8UYT-0、EMS-M8UYT-0-11等变体统一映射到EMS-M8UYT-。
• 配置前缀搜索：开启索引的prefixLastWord或prefixAllWords功能，确保关键词前缀能匹配到原产品。
• 自定义分词规则：调整分词逻辑，让连字符后的数字部分不被单独拆分，保留EMS-M8UYT-作为整体匹配单元。

注意事项 #

• 前端预处理方案快速生效，适合小规模的关键词变体场景；但要确保正则表达式能覆盖所有可能的数字后缀格式。
• 后端索引优化更适合长期维护，尤其是产品关键词变体较多的情况，能降低前端逻辑复杂度。

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