课程里老师说的简化，尝试了一下，没成功，老师，该怎么写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式测试工具</title>
    <style type="text/css">
        #regexp{
            width: 650px;
            margin:100px auto;
            font-size: 14px;
        }
        #regexp .title{
            color: #777;
            font-size: 24px;
            text-align: center;
        }
        #regexp .textbox{
            width: 638px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            resize: none;
        }
        #regexp .readonly{
            background-color: #eee;
        }
        #regexp .textfield{
            width: 215px;
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="regexp">
        <h1 class="title">正则表达式测试工具</h1>
        <textarea id="userText" class="textbox" placeholder="在此输入待匹配的文本"></textarea>
        <p>正则表达式：
            <input type="text" id="userRegExp" class="textfield" placeholder="在此输入正则表达式"/>
            <input type="checkbox" name="userModifier" value="i"/>忽略大小写
            <input type="checkbox" name="userModifier" value="g"/>全局匹配
            <input type="checkbox" name="userModifier" value="m"/>多行匹配
            <input type="button" id="matchingBtn" value="测试匹配"/>
        </p>
        匹配结果：
        <div id="matchingResult" class="textbox readonly"></div>
        <p>替换文本：
            <input type="text" id="userReplaceText" class="textfield" placeholder="在此输入替换文本"/>
            <input type="button" id="replaceBtn" value="替换"/>
        </p>
        替换结果：
        <div id="replaceResult" class="textbox readonly"></div>
    </div>
    <script type="text/javascript">
        var userText = document.getElementById('userText'),
            userRegExp = document.getElementById('userRegExp'),
            userModifier = document.getElementsByName('userModifier'),
            matchingBtn = document.getElementById('matchingBtn'),
            matchingResult = document.getElementById('matchingResult'),
            userReplaceText = document.getElementById('userReplaceText'),
            replaceBtn = document.getElementById('replaceBtn'),
            replaceResult = document.getElementById('replaceResult');
        var pattern,
            modifier = '';
        for(var i = 0;i < userModifier.length;i++){
            userModifier[i].onclick = function(){
                modifier = '';
                for(var j = 0;j < userModifier.length;j++){
                    if(userModifier[j].checked){
                        modifier += userModifier[j].value;
                    }
                }
            }
        };

        function check(user,ale){
            if(!user.value){
                alert(ale);
                user.focus();
                return;
            }
        }
        matchingBtn.onclick = function(){
            check(userText,'请输入待匹配的文本！');
            check(userRegExp,'请输入正则表达式！');
            pattern = new RegExp('(' + userRegExp.value + ')',modifier);
            matchingResult.innerHTML = pattern.exec(userText.value) ? userText.value.replace(pattern,'<span style="background-color:yellow;">$1</span>') : '没有匹配';
        };
        // matchingBtn.onclick = function(){
        //     if(!userText.value){
        //         alert('请输入待匹配的文本！');
        //         userText.focus();
        //         return;
        //     }
        //     if(!userRegExp.value){
        //         alert('请输入正则表达式！');
        //         userRegExp.focus();
        //         return;
        //     }
        //     pattern = new RegExp('(' + userRegExp.value + ')',modifier);
        //     matchingResult.innerHTML = pattern.exec(userText.value) ? userText.value.replace(pattern,'<span style="background-color:yellow;">$1</span>') : '没有匹配';
        // };
        replaceBtn.onclick = function(){
            check(userText,'请输入待匹配的文本！');
            check(userRegExp,'请输入正则表达式！');
            check(userReplaceText,'请输入要替换成的文本！');
        pattern = new RegExp('(' + userRegExp.value + ')',modifier);
        replaceResult.innerHTML = userText.value.replace(pattern,'<span style="color:red;">' + userReplaceText.value + '</span>');
        };
        // replaceBtn.onclick = function(){
        //     if(!userText.value){
        //         alert('请输入待匹配的文本！');
        //         userText.focus();
        //         return;
        //     }
        //     if(!userRegExp.value){
        //         alert('请输入正则表达式！');
        //         userRegExp.focus();
        //         return;
        //     }
        //     if(!userReplaceText.value){
        //         alert('请输入要提换成的文本！');
        //         userReplaceText.focus();
        //         return;
        //     }
        //     pattern = new RegExp('(' + userRegExp.value + ')',modifier);
        //     replaceResult.innerHTML = userText.value.replace(pattern,'<span style="color:red;">' + userReplaceText.value + '</span>');
        // };
    </script>
</body>
</html>

验证用户输入的时候，会将后面的程序都执行，该怎么改呢？

龍巛幽 2019-11-30

源自：正则表达式 3-43 利用replace方法完善正则测试工具

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2019-11-30 14:30:28

同学你好，因为点击的时候，调用了如下两次，所以会弹出两个。

这里封装的函数需要修改下，在函数中只判断是否有输入的内容，这是一种封装的思路，同学可以参考下，例：

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕糖 2019-11-30 11:08:25

同学你好，同学说的用户输入是指那块？如下，测试是需要点击才可以实现的。

可以详细的描述下问题需求，也可以结合图片来说明。

祝学习愉快~

收起回答

提问者龍巛幽 #1

点击匹配按钮后，如果输入框中没有内容，会有（请输入要匹配的文字！）的弹框，并把光标定位到对应的输入框中。原本课程里，老师用了if语句判断，然后说同学们可以尝试简化一下这段代码，我把这个代码封装在一个函数中了，但是改了之后，如果第一个输入框中没有内容，点击了匹配，就会弹出两个输入框（请输入待匹配的文本！）和（请输入正则表达式！），并把光标定位在了第二个输入框，这与原本功能“如果第一个输入框中没有内容，点击匹配后会提示（请输入待匹配的文本！）并把光标定位在第一个输入框”相违背了。

2019-11-30 12:30:22