React+TypeScript+MUI表格特殊字符搜索异常问题排查

• 核心问题是搜索过滤逻辑直接将用户输入的特殊字符（如-）作为正则表达式使用，但未对正则元字符做转义处理。
• 正则表达式中，-属于特殊元字符（用于定义字符范围，比如[a-z]），当用户输入这类字符时，未转义的正则会将其解析为语法的一部分而非普通字符，导致匹配逻辑完全失效：
  • 搜索-时，未转义的正则可能被判定为无效语法，引擎默认匹配所有内容，因此返回全部行；
  • 搜索-3时，未转义的-会被错误解析，正则实际匹配的是包含3的内容（比如-123里的3），而非精确匹配-3子串。

方案1：改用字符串原生匹配（简单直接） #

如果不需要正则的高级匹配能力（如通配符、复杂模式），直接用字符串的includes()方法替代正则，彻底规避特殊字符的影响：

// 示例过滤函数
const filterQuotes = (quotes: Quote[], searchTerm: string) => {
  const lowerTerm = searchTerm.toLowerCase();
  return quotes.filter(quote => 
    quote.quoteNr.toLowerCase().includes(lowerTerm)
  );
};

• 优势：实现简单，无需处理转义，适合基础的子串匹配场景。

方案2：保留正则但转义特殊元字符 #

如果需要正则的高级特性（如大小写不敏感、全局匹配），先对用户输入的搜索词做正则转义，再执行匹配：

// 正则转义工具函数：转义所有正则元字符
const escapeRegExp = (str: string) => {
  return str.replace(/[.*+?^${}()|[\]\\-]/g, '\\$&');
};

// 示例过滤函数
const filterQuotes = (quotes: Quote[], searchTerm: string) => {
  const escapedTerm = escapeRegExp(searchTerm);
  const matchRegex = new RegExp(escapedTerm, 'i'); // 'i'表示忽略大小写
  return quotes.filter(quote => matchRegex.test(quote.quoteNr));
};

• 原理：escapeRegExp函数会将-等所有正则元字符转义为普通字符，确保用户输入的内容被当作字面量进行匹配。

MUI DataGrid 场景适配 #

如果使用MUI的DataGrid组件，默认字符串过滤会使用正则，需自定义过滤运算符替换默认逻辑：

import { GridFilterModel } from '@mui/x-data-grid';

// 自定义包含过滤运算符
const customContainsOperator = {
  label: '包含',
  value: 'contains',
  getApplyFilterFn: (filterItem) => {
    if (!filterItem.value) return null;
    const escapedValue = escapeRegExp(filterItem.value);
    const matchRegex = new RegExp(escapedValue, 'i');
    return (row) => matchRegex.test(row.quoteNr);
  },
};

// 在DataGrid中配置
<DataGrid
  columns={columns}
  rows={quotes}
  filterOperators={{ string: [customContainsOperator] }}
/>

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