RegEx использует шаблон для поля ввода в HTML5, не работает

Question

Это приложение React JS. Поле должно содержать ТОЛЬКО три возможных варианта: КРЕДИТ, ДЕБЕТ. Больше ничего нельзя допускать.

Вот мой JS код ...

        <AutoCompleteInput
            name="type"
            required="required"
            defaultValue={type}
            pattern="\bCREDIT\b|\bDEBIT\b"
            maxLength="6"
            title="Type must be CREDIT or DEBIT."
        />

Как видите, я использую компонент React AutoCompleteInput, поэтому есть раскрывающееся меню с тремя параметрами и пользователь может выбрать их из выпадающего меню. Тем не менее, пользователь также может вводить параметры.

Способ, которым регулярное выражение записывается в шаблоне над пользователем, должен вводить слова в верхнем регистре, если они вводят его в нижнем регистре, записи недопустимы. Как сделать это регулярное выражение нечувствительным к регистру?

У тестировщиков регулярных выражений есть флаг, что я могу выбрать его из выпадающего меню, и он добавит / i к моему регулярному выражению

/(\bCREDIT\b|\bDEBIT\b)\i

, но это выражение не работает в моем коде. Опять же, как я могу сделать мое регулярное выражение без учета регистра? Это (? Я) тоже не работает. Есть способ, но я не могу его найти.

Answer 1

Имея информацию по этому вопросу ... Регулярное выражение для автозаполнения

Мне удалось найти решение, которое я искал. Это долго и грязно, но это работает. это последнее выражение для моего вопроса выше.

^(c|.*?(C|[^a-zA-Z]c))(r|.*?(R|[^a-zA-Z]r))(e|.*?(E|[^a-zA-Z]e))(d|.*?(D|[^a-zA-Z]d))(i|.*?(I|[^a-zA-Z]i))(t|.*?(T|[^a-zA-Z]t))|(d|.*?(D|[^a-zA-Z]d))(e|.*?(E|[^a-zA-Z]e))(b|.*?(B|[^a-zA-Z]b))(i|.*?(I|[^a-zA-Z]i))(t|.*?(T|[^a-zA-Z]t))"