Regex Validation for userInput in React

Question

• 我正在尝试使用正则表达式实现搜索。为了验证输入的值是否是搜索框中的有效正则表达式，我使用了库regex-validate (regex VALIDATION library -regex -regex)的源代码

• 如果输入的值是一个有效的正则表达式，那么我将它解析为一个正则表达式使用源代码从这个库regex - parse)(解析库- regex解析器)过滤/搜索使用解析的正则表达式。下面是相同的

  的代码片段

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链接的正则表达式搜索RegexValidationSearch

• 当用户输入'/?/'或'/*/'re.test(val)返回true，从而暗示它是一个有效的正则表达式但当它试图被解析时也就是这行代码const convertToRegex = RegexParser(val)它抛出以下errorregexror

• 是否有任何方法来解决这个问题，使得这行代码re.test(val)返回false当用户输入任何无效的正则表达式时，暗示它是一个无效的正则表达式(字符串格式)，因此没有必要将其解析为正则表达式

Answer 1

这看起来可能是你正在使用的两个库之间的不兼容(即，它们对有效的正则表达式有不同的想法)。

解决这个问题最简单的方法(老实说也是最安全的，因为你正在处理用户输入)是用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来获得您想要的。这是否适合你的代码库，由你来决定。