<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<style type="text/css">
#regexp{
width:650px;
margin:100px auto;
font-size:14px;
}
.biaoti{
font-size:24px;
color:#777;
text-align: center;
}
#regexp .textbox{
width:638px;
height:150px;
border:1px solid #ccc;
border-radius:5px;
padding:5px;
resize:none;
}
#regexp .textField{
width:215px;
border:1px solid #ccc;
padding:5px;
}
#readOnly{
disabled:disabled;
background:grey;
}
</style>
</head>
<body>
<div id="regexp">
<h1 class="biaoti">正则表达式 </h1>
<textarea class="textbox" placeholder="请输入正则表达式" id="userText"></textarea>
<p>正则表达式:<input type="text" name="" class="textField" id="regExp" >
<input type="checkbox" value="i">忽略大小写
<input type="checkbox" name="userModifier" value="g">全局匹配
<input type="checkbox" name="userModifier" value="m">多行匹配
<input type="button" name="userModifier" value="测试匹配" id="matchingBtn"></p>
<p>匹配结果:</p>
<div class="textbox readOnly" id="matchingResult" ></div>
<p>替换文本<input type="text" name="" class="textField" id="replaceText" >
<input type="button" name="userModifier" value="替换" id="replaceBtn"></p>
<p>替换结果:</p>
<div class="textbox readOnly" id="replaceResult" ></div>
</div>
<script type="text/javascript">
var userText=document.getElementById("userText"),
regExp=document.getElementById("regExp"),
matchingBtn=document.getElementById("matchingBtn"),
replaceText=document.getElementById("replaceText"),
replaceBtn=document.getElementById("replaceBtn"),
replaceResult=document.getElementById("replaceResult"),
matchingResult=document.getElementById("matchingResult");
var modifers=document.getElementsByName("userModifier");
var pattern,
modiferstr;
for(var i=0;i<modifers.length;i++){
modifers[i].οnclick=function(){
modiferstr="";
for(var j=0;j<modifers.length;j++){
if(modifers[j].checked){
modiferstr+=modifers[j].value;}
}
}
}
//匹配字符串
matchingBtn.οnclick=function(){
pattern=new RegExp('('+regExp.value+')',modiferstr);
if(!userText.value){
alert("请输入需要匹配的文本");
userText.focus();
return;
}
if(!regExp.value){
alert("请输入正则表达式");
regExp.focus();
return;
}
matchingResult.innerHTML=pattern.exec(userText.value)? userText.value.replace(pattern,"<strong style='background-color:yellow'>$1</strong>"):'没有匹配';
}
replaceBtn.οnclick=function(){
pattern=new RegExp('('+regExp.value+')',modiferstr);
if(!userText.value){
alert("请输入需要匹配的文本");
userText.focus();
return;
}
if(!regExp.value){
alert("请输入正则表达式");
regExp.focus();
return;
}
replaceResult.innerHTML=userText.value.replace(pattern,"<strong style='background-color:yellow'>"+replaceText.value+"</strong>")
}
</script>
</body>
</html>