React 中用户输入的正则表达式验证

Question

我正在尝试使用正则表达式执行搜索。为了验证输入的值是否是搜索框中的有效正则表达式，我使用了库中的源代码 regex-validate (REGEX VALIDATION LIBRARY - regex-regex)
如果输入的值是有效的正则表达式，那么我将使用此库 Regex-Parse) (PARSING LIBRARY - Regex Parser) 中的源代码将其解析为正则表达式，使用已解析的 filter/search =49=] 是相同的
的代码片段

import { useState } from "react";
import "./styles.css";
import { re, RegexParser } from "./regexValidation";

export default function App() {
  const [val, setVal] = useState("");
  const [validRegex, setValidRegex] = useState(false);

  const validateRegex = (val: string) => {
    setVal(val);
    if (val === "") {
      setValidRegex(false);
      return;
    }
    // to check if the entered value(val) is a valied regex in string
    if (re.test(val)) {
      setValidRegex(false);
      // parsing the entered value(val) to a regularexpression
      const convertToRegex = RegexParser(val);

      //filtering logic to filter based on convertToRegex variable
    } else {
      setValidRegex(true);
    }
  };
  const handleChange = (e: any) => {
    validateRegex(e.target.value);
  };
  return (
    <div className="App">
      <input value={val} onChange={handleChange}></input>
      <h1>{validRegex ? "inValidRegex" : "ValidRegex"}</h1>
    </div>
  );
}

CodeSandBox link 用于正则表达式搜索 RegexValidationSearch
当用户输入 '/?/' 或 '/*/' 时，我遇到了一个问题 re.test(val) returns true 从而暗示它是一个有效的正则表达式但是当它试图解析这行代码时 const convertToRegex = RegexParser(val) 它会抛出以下错误RegexError
有没有办法解决这个问题，当用户输入任何无效的正则表达式时，这行代码 re.test(val) returns false 暗示它是无效的正则表达式（字符串格式），因此无需将其解析为正则表达式

Answer 1

这看起来可能是您正在使用的两个库之间不兼容（即，它们对什么是有效的 Regex 有不同的看法）。

解决此问题的最简单方法（老实说也是最安全的方法，因为您正在处理用户输入）是用 try/catch 包装整个解析逻辑，如下所示：

// to check if the entered value(val) is a valied regex in string
if (re.test(val)) {
   let convertToRegex;
   try {
      convertToRegex = RegexParser(val);
      setValidRegex(true); // only set this AFTER a successful parse.
      // also note I've swapped the true / false value here.
   } catch (e) {
      setValidRegex(false);
   }

   if (convertToRegex) {
      // TODO: implement filtering logic based on convertToRegex variable
   }
} else {
   // NOTE: it didn't parse correctly, shouldn't this be false?
   setValidRegex(false); // I've changed it for you
}

我还认为（？）您在处理 setValidRegex 时犯了一些错误，我已在代码中更正了这些错误。当您还没有真正确认（通过创建 RegexParser）时不要乐观地说用户输入是有效的正则表达式！

对于这种方法，存在完全删除 re.test(val) 和其他库的争论，因为您可以通过简单地 try/catch-ing 获得您想要的东西。这是否适合您的代码库，由您决定。

React 中用户输入的正则表达式验证

Regex Validation for userInput in React

javascript

regex

reactjs