使用正则表达式搜索时如何移除或隐藏转义反斜杠？

当前的实现把供正则使用的转义结果直接和输入框显示的用户输入内容做了绑定，等于把内部匹配用的转义逻辑直接暴露在UI层，用户输入特殊正则字符时，输入框会多出原本不需要展示的反斜杠。

• 拆分两个独立的内容状态，把展示逻辑和正则匹配逻辑彻底解耦：
  1. 单独维护一个原生输入状态，完全同步用户在输入框键入的原始内容，不做任何转义加工，直接绑定为输入框的显示值，保证用户看到的内容和自己输入的完全一致
  2. 转义操作只在真正执行正则搜索的环节执行，专门用于生成安全的正则匹配规则，不参与UI渲染
• 拆分后的代码实现：

// 原生输入状态，直接绑定到输入框的value上
const [rawSearchValue, setRawSearchValue] = useState('');

const handleSearchChange = ({ target }: ChangeEvent<HTMLInputElement>): void => {
  // 这里只存用户的原始输入，不做任何转义
  setRawSearchValue(target.value);
};

// 单独封装转义逻辑，仅在生成正则时调用
const escapeRegexSpecialChar = (text: string) => {
  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

// 实际执行搜索时，用转义后的内容生成正则
const getSearchMatchedData = (dataList: DataType[]) => {
  const safePattern = escapeRegexSpecialChar(rawSearchValue);
  const searchRegex = new RegExp(safePattern, 'gi');
  return dataList.filter(item => searchRegex.test(item.targetField));
}

• 用户输入包含正则特殊字符的内容时，输入框不会额外显示转义生成的反斜杠，和用户键入的内容完全一致
• 正则匹配环节依然会对特殊字符做正确转义，不会出现因为.、*这类通配符导致的匹配范围溢出问题

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