React/TypeScript项目中基于变体搜索词过滤数据表格的问题

针对你遇到的搜索词变体（如wi-fi、wi fi）无法匹配Wifi、Wifi Direct的问题，这里提供两种可行的解决方案：

方案一：文本标准化处理 #

核心思路是将搜索词和目标文本中的分隔符（空格、连字符）统一移除，转换成无分隔的纯文本后再做匹配，以此忽略格式差异。

首先添加一个标准化函数：

const normalizeText = (str: string): string => {
  // 转小写，同时移除所有空格和连字符
  return str.toLowerCase().replace(/[\s-]/g, '');
};

然后修改你的handleSearchTerm方法中的过滤逻辑：

handleSearchTerm = (event: React.ChangeEvent<HTMLInputElement>): void => {
  const searchTerm = event.currentTarget.value.trim().toLowerCase();
  const searchTermTokens = searchTerm.split(/\s+/).filter(token => token.trim()); 

  this.setState({ filterValue: searchTerm });

  const filteredSpecs = this.props.specs.filter((spec) => {
    const combinedValues = `${spec.fieldName} ${spec.displayValue || ''}`;
    // 标准化目标文本
    const normalizedTarget = normalizeText(combinedValues);

    // 检查每个标准化后的搜索token是否存在于标准化后的目标文本中
    return searchTermTokens.every(token => {
      const normalizedToken = normalizeText(token);
      return normalizedTarget.includes(normalizedToken);
    });
  });

  console.log('Filtered specifications:', filteredSpecs);
};

方案二：变体正则匹配 #

通过生成能匹配不同分隔符的正则表达式，让搜索词的变体形式都能匹配到目标文本。

添加正则生成函数：

const createVariantRegex = (token: string): RegExp => {
  // 先转义正则特殊字符，避免语法错误
  const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 将空格/连字符替换成可选的分隔符模式，匹配空格、连字符或无分隔
  const pattern = escapedToken.replace(/[\s-]/g, '[- ]?');
  // 忽略大小写匹配
  return new RegExp(pattern, 'i');
};

修改过滤逻辑：

handleSearchTerm = (event: React.ChangeEvent<HTMLInputElement>): void => {
  const searchTerm = event.currentTarget.value.trim().toLowerCase();
  const searchTermTokens = searchTerm.split(/\s+/).filter(token => token.trim()); 

  this.setState({ filterValue: searchTerm });

  const filteredSpecs = this.props.specs.filter((spec) => {
    const combinedValues = `${spec.fieldName} ${spec.displayValue || ''}`;

    // 检查每个搜索token的变体正则是否能匹配目标文本
    return searchTermTokens.every(token => {
      const variantRegex = createVariantRegex(token);
      return variantRegex.test(combinedValues);
    });
  });

  console.log('Filtered specifications:', filteredSpecs);
};

原代码问题说明 #

你之前的实现直接用includes匹配原始搜索token，当搜索词是wi-fi时，token为wi-fi，而目标文本Wifi转小写后是wifi，不存在wi-fi子串，因此匹配失败。上述两种方案都能解决这种分隔符不一致的匹配问题。

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