JavaScript regex for multiple strings that is case insensitive (none literal notation)

A plugin allows me to use regular expressions for data validation like so when I check for a single string:

<input type="text" data-validation-regexp="^\s*[Rr][Ee][Dd]\s*$" data-validation="custom">

The regex takes this format because of the following reason: Have HTML5's a inputs pattern attribute ignore case

The plugin states:

This plugin also supports the attribute "pattern" by using the HTML5 module.

As stated by MDN

pattern - A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email or password; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.

This regular expression in the data-validation-regexp attribute is an alternative to its literal notation/format which is /red/i

This raises the question are there any alternative ways to write:

/(rot|rouge|red|rojo)/i

I want to check for the strings rot, rouge, red or rojo. However not in literal notation/format while allowing for case insensitivity and space either side of the string. So if either of those strings are present then the regular expression 'passes'. (I am struggling to implement this after multiple experiments and would greatly appreciate the help).

When tested on https://regex101.com the regex /(rot|rouge|red|rojo)/i works in PCRE (PHP), but I need to find a JavaScript alternative and there must be some way to do this possibly using the OR operator.