JavaScript RegExp.exec()正则匹配方法失效问题求助

• 已参照官方正则文档完成初步排查，排除已知的字符转义导致exec()失效的常见问题。
• 实现目标：使用经regex101验证可正常运行的正则模式[a-zA-Z0-9.\s]+匹配符合规则的用户输入，在控制台打印全部匹配结果。
• 问题现象：用字符串形式声明const reg = '[a-zA-Z0-9.\\\\s]+';时，表单input的pattern属性内置校验可正常运行，但提取匹配项时持续异常：无论是用正则字面量还是RegExp构造函数创建正则实例调用.exec()，要么抛出TypeError: reg.exec is not a function类型错误，要么匹配逻辑异常返回null。
• 已完成调试：尝试过字符串、正则字面量、RegExp构造函数的所有组合写法，核对过转义正确性与方法调用逻辑。未直接使用正则字面量的原因是字面量形式会在HTML中被错误渲染，经开发者工具检查元素确认，只有当前字符串形式的正则可在HTML中正确渲染，支撑表单内置校验正常运行。

核心问题是混淆了两个场景下的正则使用规则：

1. HTML的input.pattern属性只接收字符串格式的正则源码，不需要正则字面量前后的/定界符，字符串内的\s单转义即可被HTML正确解析。
2. JS中调用exec()方法必须使用RegExp类型实例，直接对字符串调用会抛类型错误；如果通过new RegExp()传入字符串构造实例，字符串内的反斜杠需要按JS字符串规则转义；如果直接把正则字面量传给pattern属性，前后的/会被当成正则内容的一部分，导致HTML校验规则失效，这就是之前DOM渲染错误的原因。

不需要强行用同一个变量兼顾HTML属性传值和JS逻辑匹配，分开定义两个变量分别适配两个场景即可，核心改动点：

• 定义单独的字符串变量存正则源码，传给pattern属性使用
• 基于正则源码构造带g标志的RegExp实例，专门用于JS侧的exec匹配
• 每次执行匹配前手动重置正则实例的lastIndex为0，避免全局正则的位置残留导致匹配结果异常
• 修正JSX语法问题：label的for属性改为htmlFor，minlength改为驼峰形式minLength，消除控制台警告

修正后的完整业务代码如下：

import ChatBot from './ChatBot';

const ChatBotCard = (props) => {
    // 给pattern属性用的字符串，单转义即可，HTML可正确解析
    const patternStr = '[a-zA-Z0-9.\\s]+';
    // 给JS exec方法用的正则实例，加g标志用于遍历所有匹配项
    const matchReg = new RegExp(patternStr, 'g');

    const [chatBotStatus, setChatBotStatus] = useState(false)
    const [userInput, setUserInput] = useState('')
    const [toggle, setToggle] = useState(false)
    const [errmssg, setErrmssg] = useState('');

    const formHandle = (e) => {
        e.preventDefault();
        
        let input = document.forms["botForm"]["formInput"].value;
        // 每次匹配前重置lastIndex，避免上次匹配残留位置导致结果异常
        matchReg.lastIndex = 0;
        let result;
        while ((result = matchReg.exec(input)) !== null) {
            let msg = 'Found a match ' + result[0] + '. ';
            msg += 'Next match starts at ' + matchReg.lastIndex;
            console.log(msg);
        }

        console.log("Form handle: input: " + input);
        console.log("Reg exp: " + matchReg);
        
        // 原有长度校验逻辑保留
        if ( input.length > 126)
        {
            setErrmssg('Shorten your question');
            setTimeout(() => {
                setErrmssg('');
              }, 3000);
            return false;
        }
        if ( input.length <= 1)
        {
            setErrmssg('Please, talk to the AI in a sentence more than 1 letter');
            setTimeout(() => {
                setErrmssg('');
              }, 3000);
            return false;
        }

        setUserInput(input);
        setToggle(true);
    }

    return (
        <div
            style={{
                backgroundColor: '#1B2524ff',
                border: '1px solid #212C50ff',
                height: '100%',
            }}
        >
            <form 
                name="botForm"
                onSubmit={formHandle} 
                style={{ 
                    display: 'flex', 
                    flexDirection: 'column', 
                    justifyContent: 'center', 
                    flexFlow: 'column wrap', 
                    alignItems: 'center', 
                    padding: '5px' 
                }}
            >
                <label
                    style={{
                        alignSelf: 'center',
                        justifyContent: 'center',
                        color: '#3F646Dff', padding: '5px'
                    }}
                    htmlFor="search">
                    {props.message}
                </label>

                <input
                    required
                    pattern={patternStr}
                    minLength="1"
                    maxLength="200"
                    aria-label="Textbox max length 200 words"
                    name="formInput"
                    style={{
                        backgroundColor: 'transparent',
                        border: '1px solid #025B79ff',
                        padding: '10px', color: '#19819Fff'
                    }}
                    id="search"
                    type="text"
                />

                <label></label>

                <input
                    style={{
                        backgroundColor: 'transparent',
                        border: '1px solid #19819Fff',
                        color: '#19819Fff',
                        padding: '10px',
                        cursor: 'pointer'
                    }}
                    type="submit"
                    value="Go">
                </input>

                <label 
                    name="errormssg"
                    style={{
                        backgroundColor: 'transparent',
                        border: '1px solid #025B79ff',
                        padding: '10px', color: '#E0012Aff'
                    }}
                >
                    {errmssg}
                </label>

                <input
                    style={{
                        backgroundColor: 'transparent',
                        border: '1px solid #025B79ff',
                        padding: '10px', color: '#19819Fff'
                    }}  
                    type="reset" 
                />

                <label
                    style={{
                        alignSelf: 'center',
                        justifyContent: 'center',
                        color: '#3F646Dff',
                        padding: '5px',
                        fontWeight:'900',
                    }}
                    htmlFor="search">
                    {"You asked about : " + userInput}
                </label>
            </form>

            <ChatBot userInput={userInput} toggle={toggle} />
        </div>
    )
};
export default ChatBotCard

正常运行效果 #

异常运行效果 #

内容的提问来源于stack exchange，提问作者GMDev