Converting user input string to regular expression

Mastering the mighty RegExp constructor

Take advantage of JavaScript's powerful new RegExp("pattern", "flags") to create regex patterns on the fly from strings. This becomes super handy when you need to find specific keywords in a chunk of text based on user input.

let pattern = "keyword";  // Pretend a user typed this
let flags = "gi";  // Cause we're being fancy and want to find ALL the matches, ignoring case
let dynamicRegex = new RegExp(pattern, flags);  // Boom. User-defined regex. 💥


And this makes your life easy when you're handling user-generated form validations, search features, and more. Welcome to the future of dynamic web apps.

Special characters: friend or foe?

Your regex pattern might get funky with unexpected behavior if you don’t escape special Javascript regex characters. So how do you fix it?

Give your friendly neighborhood escapeRegExp function a visit—it escapes special characters in strings so you can sleep at night:

// "Be good." - regex to special characters, probably
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}


Before you give any user input to RegExp, pass it through escapeRegExp first. That way, any special regex characters become harmless strings. And that, my friends, is magic. 🧙‍♂️

Don't let flags and delimiters ruin your day

Your user might get creative and include regex delimiters (/) and flags in their string input. Show the user how adaptable you are by ensuring your code can handle these peculiarities.

If the user provides their own flags, your tool should validate and extract them with a function like this:

// Extract flags from user's input. If you can't find any, the function politely returns an empty string
function extractFlags(input) {
  let matches = input.match(/\/([gimuy]*)$/);
  return matches ? matches[1] : '';
}


Remember, if the user's input doesn't form a valid regex, simply provide them with feedback or suggestions. In JavaScript, we trust. 🙏

Power up your code with testing and validation

Once your regex is alive, it's time to throw it into the ring with a test() against an opponent string to verify its functionality.

// Test, because proof is in the pudding...or the code
let isMatch = dynamicRegex.test("A keyword is only a word, unless it is THE word.");
console.log(`Is there a match? ${isMatch ? "Yes" : "No, it's time to revisit your regex."}`);


Advanced tips and cautionary tales

When you're assembling regular expressions from user input, take these sage words of advice:

• Keep it sane: Sanity checks are vital for maintaining valid regular expressions. Refrain from executing user input directly—code responsibly!
• Ask for help: If you're still stuck with escaping special characters, consider using the escape-string-regexp library.
• Stay user-friendly: Providing feedback to the user in the event of an invalid regex can promote a better user experience and safer operation.