关于正则表达式测试工具
来源：3-43 利用replace方法完善正则测试工具
田马达加斯加
2018-11-16 16:47:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式测试工具222</title>
<style type="text/css">
#regexp{
width:650px;
margin:100px auto;
font-size:14px;
}
#regexp .title{
font-size:24px;
text-align:center;
color:#777;
}
#regexp .textbox{
width:638px;
height:150px;
border:1px solid #ccc;
border-radius:5px;
padding:5px;
resize:none;
}
#regexp .readonly{
background:#eee;
}
#regexp .textFiled{
width:215px;
padding:5px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="regexp">
<h1 class="title">正则表达式测试工具</h1>
<textarea class="textbox" id="userText" placeholder="在此输入带匹配的文本"></textarea>
<p>
正则表达式：
<input type="text" class="textFiled" id="userRegexp" placeholder="在此输入正则表达式"/>
<input type="checkbox" name="userModified" value="i">忽略大小写
<input type="checkbox" name="userModified" value="g">全局匹配
<input type="checkbox" name="userModified" value="m">多行匹配
<input type="button" value="测试匹配" id="matchingBtn">
</p>
匹配结果：
<div class="textbox readonly" id="matchingResult"></div>
<p>
替换文本：
<input type="text" class="textFiled" id="userReplaceText" placeholder="在此输入替换文本"/>
<input type="button" value="替换" id="replaceBtn"/>
</p>
替换结果：
<div class="textbox readonly" id="replaceResult"></div>
</div>
<script type="text/javascript">
var userText=document.getElementById('userText'),
userRegexp=document.getElementById('userRegexp'),
userModifieds=document.getElementsByName('userModified'),
matchingBtn=document.getElementById('matchingBtn'),
matchingResult=document.getElementById('matchingResult'),
userReplaceText=document.getElementById(userReplaceText),
replaceBtn=document.getElementById(replaceBtn),
replaceResult=document.getElementById(replaceResult);
console.log(replaceBtn);
var pattern,modified;
for(var i=0;i<userModifieds.length;i++){
userModifieds[i].onclick=function(){
modified='';
for(var j=0;j<userModifieds.length;j++){
if(userModifieds[j].checked){
modified+=userModifieds[j].value;
}
}
}
}
matchingBtn.onclick=function(){
if(!userText.value){
alert('请输入待匹配的文本！');
userText.focus();
return;
}
if(!userRegexp.value){
alert('请输入正则表达式！');
userRegexp.focus();
return;
}
pattern=new RegExp('('+userRegexp.value+')',modified);
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('请输入要替换的目标文本！');
userReplaceText.focus();
return;
}
pattern=new RegExp('('+userRegexp.value+')',modified);
replaceResult.innerHTML=userText.value.replace(pattern,'<span style="color:red;">userReplaceText.value</span>');
};
</script>
</body>
</html>
我的替换结果显示不出来，怎么回事
1回答
-
田马达加斯加
提问者
2018-11-16
找出问题了，谢谢
0
相似问题