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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!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