课程里老师说的简化，尝试了一下，没成功，老师 ，该怎么写
<!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>验证用户输入的时候，会将后面的程序都执行，该怎么改呢？
36
收起
正在回答
2回答
同学你好，因为点击的时候，调用了如下两次，所以会弹出两个。
这里封装的函数需要修改下，在函数中只判断是否有输入的内容，这是一种封装的思路，同学可以参考下，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星