Regex Validation for userInput in React

Question

• I am trying to implement a search using regex . To validate if the entered value is a valid regex in the search box I am using the source code from a library regex-validate (REGEX VALIDATION LIBRARY - regex-regex)

• If the entered value is a valid regex then I am Parsing it to a regular expression using the source code from this library Regex-Parse) (PARSING LIBRARY - Regex Parser) to filter/search using the parsed regex.Here is a code snippet for the same

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 for the regex search RegexValidationSearch

• I am facing an issue when the user enters '/?/' or '/*/' the re.test(val) returns true thereby implying that it is a valid regex but when it is trying to get parsed that is this line of code const convertToRegex = RegexParser(val) it throws the following errorRegexError

• Is there any way to fix this such that this line of code re.test(val) returns false when the user enters any invalid regular expression there by implying that it is an invalid regex(in string format) and hence there is no need to parse it to a regular expression

Answer 1

This looks like it might be an incompatibility between the two libraries you are using (ie, they have different ideas of what valid Regex is).

Easiest way to fix this (and honestly the safest too, since you're dealing with user input) is to wrap your entire parsing logic with a try/catch like this:

// 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
}

Also I think(?) you've made a couple errors in how you're handling setValidRegex which I've corrected in code. Don't be optimistic and say the user input is valid regex when you haven't actually confirmed (by creating a RegexParser) that it is!

With this approach there's an argument for deleting the re.test(val) and the other library entirely since you can get what you want by simply try/catch-ing. Up to you to decide if this is a decent choice for your codebase.