关于代码优化
我自己做提取函数，去重复等，感觉做的很差，很恶心，又说不出来哪不对，请老师看看，谢谢
<!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;
border:1px solid #ccc;
height:200px;
padding:5px;
resize: none;
}
.regexp .textbox_result , .textbox_replaceResult{
background-color: #eee;
}
.regexp .userReplaceText{
margin: 10px;
}
</style>
</head>
<body>
<div class="regexp">
<h1 class="title">正则表达式测试工具</h1>
<textarea class="textbox" placeholder="在此输入进带匹配的文本" title="待匹配的文本"></textarea>
<p>
正则表达式：
<input type = "text" class="reg" title="正则表达式" 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" class="matchingBtn" value="测试匹配"/>
</p>
匹配结果:
<div class="textbox textbox_result"></div>
替换成它:
<input type = "text" class="userReplaceText" title="请告诉我您想替换成啥" placeholder="请告诉我您想替换成啥"/>
<input type = "button" class="replaceBtn" value="替换"/><br/>
替换结果:
<div class="textbox textbox_replaceResult"></div>
</div>
<script>
//获取元素
var totElems ={
userText: document.querySelector(".textbox"),
reg: document.querySelector(".reg"),
textbox_result: document.querySelector(".textbox_result"),
userModifiers : document.getElementsByName("userModifier"),
matchingBtn : document.querySelector(".matchingBtn"),
userReplaceText:document.querySelector(".userReplaceText"),
replaceBtn: document.querySelector(".replaceBtn"),
textbox_replaceResult:document.querySelector(".textbox_replaceResult"),
}
//设置正则修饰modifier
var modifier="";
each(totElems.userModifiers, function(index,elem){
elem.addEventListener("click",function(){
modifier = "";
each(totElems.userModifiers,function(index,elem){
if(elem.checked) {modifier += elem.value;}
console.log(modifier);
});
});
});
//绑定事件----点击按钮触发正则匹配,输出结果
totElems.matchingBtn.addEventListener("click",regSearch);
//绑定handler
totElems.replaceBtn.addEventListener("click" ,replaceResult);
//handler 点击"测试匹配"
function regSearch(){
//验证是否为空
if( isNothing(totElems.userText) ) return;
if( isNothing(totElems.reg) ) return;
//显示查找结果
resultOutPut(matchAddColor(totElems.reg.value ,
modifier ,
totElems.userText.value ),
totElems.textbox_result);
}
//handler 点击"替换"
function replaceResult(){
//验证是否为空
if( isNothing(totElems.userText) ) return;
if( isNothing(totElems.reg) ) return;
if( isNothing(totElems.userReplaceText) ) return;
//显示查找结果
resultOutPut(matchAddReplace(totElems.reg.value ,
modifier ,
totElems.userText.value,totElems.userReplaceText.value ),
totElems.textbox_replaceResult);
}
//原子函数----匹配并高亮替换
function matchAddReplace(regexp , modi, text , replaceText ){
var pattern = new RegExp(regexp,modi);
var resu = pattern.exec(text);
if(resu ==null) return "无可替换内容";
return text.replace(pattern,"<span style='background-color:yellow;'>"+replaceText+"</span>");
// <span style='background-color:red;'>$1</span>
}
//原子函数----匹配后高亮
function matchAddColor(regexp , modi, text ){
var pattern = new RegExp("("+regexp+")",modi);
return pattern.exec(text) ?
text.replace(pattern,"<span style='background-color:red;'>$1</span>") :
"(查找结果：0)";
}
//原子函数----验证inputDOM元素是否为空
function isNothing(inputText){
var boo =false;
if(!inputText.value){
alert("请输入" + inputText.title + "!");
boo = true;
inputText.focus();
}
return boo;
}
//原子函数----显示结果
function resultOutPut(text,elem){
elem.innerHTML = text;
}
//原子函数----遍历数组或类数组
function each(elems,fn){
for(var i= 0;i<elems.length;i++){
fn(i,elems[i]);
}
}
</script>
</body>
</html>
还有如下：
老师说这样的地方可以去重复，可我不知道该怎么做
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星