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

mitchazj · Accepted Answer · 2022-04-18 06:54:22Z

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.

answered Apr 18, 2022 at 6:54

mitchazj

5662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aniketh deokar Over a year ago

The try/catch implementation is working fine and the re.test(val) is required because when the user inputs something like this 'abc' which is not a regex but a normal search the re.test(val) returns false which is what is required.Thanks for providing me a solution for this problem and for the code corrections

mitchazj Over a year ago

no worries, glad it was helpful

Collectives™ on Stack Overflow

Regex Validation for userInput in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related