正则表达式在 HTML5 中为输入字段使用模式，不起作用答案

【问题标题】：RegEx using pattern for an input field in HTML5, not working正则表达式在 HTML5 中为输入字段使用模式，不起作用
【发布时间】：2020-01-21 04:05:25
【问题描述】：

这是一个 React JS 应用程序。该字段只允许三个可能的选项：CREDIT、DEBIT。不应该允许其他任何事情。

这是我的 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

但该表达式不适用于我的代码。同样，我怎样才能让我的正则表达式不区分大小写？这 (?i) 也不起作用。大部分有办法，但我想不通。

【问题讨论】：

标签： javascript regex reactjs

【解决方案1】：

有了关于这个问题的信息...Regular expression for auto-complete

我能够得到我正在寻找的解决方案。它又长又乱，但它有效。这是我上面问题的最后一个正则表达式。

^(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))"

【讨论】：