老师为什么替换不了？
来源：3-43 利用replace方法完善正则测试工具
hyperse
2019-06-03 18:48:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式测试工具</title>
<style>
#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>
<p>
替换文本：<input type="text" id="userReplaceText" class="textfield" placeholder="在此输入替换文本" />
<input type="button" id="replaceBtn" value="替换" />
</p>
替换结果：
<div id="matchingResult" class="textbox readonly"></div>
</div>
<script>
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;
}
}
}
}
//console.log(userModifier);//返回NodeList(3)
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(){
if(!userText.value){
alert("请输入待匹配的文本！");
userText.focus();
return;
}
if(!userRegExp.value){
alert("请输入正则表达式！");
userRegExp.focus();
return;
}
if(!userReplaceText.value){
alert("请输入要替换成的文本！");
userRelaceText.focus();
return;
}
pattern = new RegExp('('+userRegExp.value+')',modifier);
replaceResult.innerHTML = userText.value.replace(pattern,'<span style="color:red;">'+userReplaceText.value+'</span>');
}
</script>
</body>
</html>
1回答
-
Miss路
2019-06-03
同学，你好。
自己去对照一下源码找问题，往往老师讲过的内容大家出错都是因为写错单词，写错符号等问题，大的思路一般都不错。老师都讲过的内容不该出错的。但是在初学阶段往往会出现这样的问题，那么唯一的办法就是自己花费很长的时间去对照源码找问题，当你经过这个过程之后，就会有很多收获，知道哪里容易出错，以后再写的时候就会注意到，并且重新查找的过程中，思路会更清晰，找到问题之后，也会很有成就感。
如果你花了很长时间，实在找不出问题，你再来提问，老师再帮你解决。
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题