React Native输入未闭合左括号触发正则语法错误的解决问询

问题描述 #

在React Native应用中，用于API搜索的TextInput组件此前运行正常，但用户输入「14-12(」时，输入左括号「(」瞬间导致应用崩溃。控制台报错：
SyntaxError: Invalid RegExp: Parenthesized expression not closed

相关代码如下：

const [searchTerm, setSearchTerm] = useState("");

// 延迟调用搜索
useEffect(() => {
  const delayDebounceFn = setTimeout(() => {
    (async () => {
      await handleSearch(searchTerm);
    })();
  }, 500);

  return () => clearTimeout(delayDebounceFn);
}, [searchTerm]);

// 处理搜索请求
const handleSearch = async (searchTerm) => {
  const headerOption = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${user.token}`,
    },
  };

  setIsSearchLoading(true);

  axiosInstance
    .post(
      `/rest/V2/search`,
      { book_id: bookSku, search_term: searchTerm.toString() },
      headerOption
    )
    .then((response) => {
      if (response.data.length > 0) {
        setSearchResults(response.data[1]);
      }
      setIsSearchLoading(false);
    })
    .catch((error) => {
      setIsSearchLoading(false);
      console.log(
        "Error fetching the search from the server SectionScreen",
        error
      );
    });
};

// TextInput组件
<TextInput
  autoFocus={true}
  style={styles.searchInput}
  placeholder="Enter Search Term"
  onChangeText={(value) => setSearchTerm(value.toString())}
  value={searchTerm}
  returnKeyType="done"
/>

技术版本：

• React Native: "0.71.8"
• React: "18.2.0"
• Expo: "^48.0.0"

问题原因 #

报错直接指向正则表达式语法错误——未闭合的括号。前端代码本身没有直接用正则处理输入，但API接口接收search_term后，大概率将其作为正则表达式执行匹配操作。(是正则中的特殊分组字符，单独输入会导致正则无法解析，进而触发错误导致应用崩溃。

解决方法 #

有两个修复方向，优先推荐后端处理：

1. 后端层面修复 #

• 检查后端搜索逻辑，不要直接把用户输入当作正则表达式使用。如果必须用正则，先对输入中的正则特殊字符（如(, ), *, +, .等）做转义处理。
• 或者切换为普通字符串匹配，避开特殊字符的正则语法解析。

2. 前端层面预处理 #

如果后端暂时无法修改，可在发送请求前转义搜索关键词中的正则特殊字符：

先添加转义函数：

// 转义正则特殊字符
const escapeRegExp = (str) => {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

再修改handleSearch中的请求参数：

axiosInstance
  .post(
    `/rest/V2/search`,
    { book_id: bookSku, search_term: escapeRegExp(searchTerm.toString()) },
    headerOption
  )
  // 后续逻辑保持不变

这样用户输入的特殊字符会被转义，不会被后端当作正则语法解析，从而避免崩溃。

内容的提问来源于stack exchange，提问作者Pedro-Goncal