正则表达式 -正则测试工具

最新推荐文章于 2023-04-20 10:34:31 发布

weixin_40533188

最新推荐文章于 2023-04-20 10:34:31 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/weixin_40533188/article/details/99333229

版权

<!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>

<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" >

   </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(){

replaceResult.innerHTML=userText.value.replace(pattern,"<strong style='background-color:yellow'>"+replaceText.value+"</strong>")

}

</script>

</body>
</html>

weixin_40533188

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式 -正则测试工具

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正则表达式</title><style type="text/css">#regexp{ width:650px; margin:100px...
复制链接

扫一扫