首页 > 编程 > Regex > 正文

webregexp 正则测试实现代码

2020-03-16 21:17:11
字体:
来源:转载
供稿:网友
WebRegExp 1.0 - 客服果果 [ 无忧版 ]对于想学习正则的朋友是个不错的在线工具,测试你正则的正确性。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title> WebRegExp 1.0 - 客服果果 [ 无忧版 ] </title>  
  6. <base href="http://www.dhooo.com/web/" />  
  7. <style type="text/css">  
  8. body{background:#2B3C53;}  
  9. *{font-size:12px;}  
  10. #win{  
  11.     width:900px;font-size:12px;  
  12.     position:absolute;left:0;top:0;  
  13.     background:#F1F0EA;  
  14.     border:2px outset;color:#000;  
  15.     -moz-border-top-colors:#d4d0c8 white;  
  16.     -moz-border-left-colors: #d4d0c8 white;  
  17.     -moz-border-right-colors:#404040 #808080;  
  18.     -moz-border-bottom-colors:#404040 #808080;  
  19. }  
  20. h4{  
  21.     background:#35528E url(images/caption.jpg) repeat-y 100% 0;  
  22.     margin:1px;padding:5px;cursor:default;  
  23.     color:#fff;font-size:14px;font-family:Arial;  
  24. }  
  25. h4 div{  
  26.     background:url(images/ico.gif) no-repeat 2px 0;  
  27.     padding-left:25px;  
  28. }  
  29. #about{    text-decoration:none;color:#000;padding:2px}  
  30. .menu{line-height:20px;padding:0px 10px}  
  31. .line{  
  32.     font-size:1px;    line-height:1px;  
  33.     background:#fff;    margin:0 2px;    height:1px;  
  34.     overflow:hidden;    border-top:1px solid #ACA899;  
  35. }  
  36. .ad{  
  37.     background:#FF7B00 url(images/regexp_ad.gif) no-repeat 50% 50%;  
  38.     height:60px; position:relative;  
  39. }  
  40. .ibody{margin:5px;}  
  41. .left{  
  42.     width:250px;height:100%;  
  43.     float:left;text-align:center;  
  44. }  
  45. .btnWrap{padding:5px 0;}  
  46. button{+margin-left:2px;padding:0px; }  
  47. #tabBtns a{  
  48.     color:#000;text-decoration:none;  
  49.     display:block; float:left;margin-right:1px;  
  50.     width:47px;height:20px;line-height:20px;  
  51.     background:#fff url(images/tab.gif) no-repeat 0 0;  
  52. }  
  53. .list_wrap{margin:5px;}  
  54. #tabBtns{z-index:10;border:0px solid #aaa; }  
  55. #tabBtns a:hover{  
  56.     background:url(images/tab.gif) no-repeat 0 -21px;  
  57. }  
  58. #tabBtns a.hot,#tabBtns a.hot:hover{  
  59.     background:url(images/tab.gif) no-repeat 0 100%;  
  60.     width:52px; height:20px; position:relative;bottom:-1px;  
  61. }  
  62. .list_option{  
  63.     background:#fff; margin:0px;padding:0px;  
  64.     border:1px solid #919B9C;display:none;  
  65. }  
  66. #list_match.list_option{display:block;}  
  67. .right{width:636px;    float:right;}  
  68. .clear{clear:both;font-size:0px;overflow:hidden;height:0px; }  
  69. #colorText,textarea{  
  70.     margin:5px auto;height:100px;  
  71.     overflow:auto;border:1px solid inset;  
  72. }  
  73. #colorText{background:#fff;text-align:left;word-wrap:break-word;overflow:hidden;}  
  74. #regexpText{width:236px}  
  75. #replaceText{height:30px;}  
  76. #regexpText{height:60px;}  
  77. #replaceText,#targetText,#resultText{width:620px}  
  78. #targetText{height:200px;background:#ddd;color:#000; }  
  79. #resultText{height:60px;color:#0099FF}  
  80. select{width:216px;height:170px;margin:0px;padding:0px;margin-top:10px; }  
  81. fieldset{    text-align:center;padding:0; margin:10px 0 0 0}  
  82. legend{margin-left:10px;color:#000; }  
  83. </style>  
  84. </head>  
  85. <body>  
  86. <div id="win">  
  87. <h4><div id="caption">WebRegExp 1.0 - 客服果果 [ 无忧版 ]</div></h4>  
  88. <div class="menu"><a href="javascript:void(0)" id="about" onclick="alert('感谢使用WebRegExp 1.0')">关于(<u>A</u>)</a></div>  
  89. <div class="line"></div>  
  90. <div class="ad"></div>  
  91. <div class="ibody">  
  92.     <div class="left">  
  93.         <fieldset>  
  94.             <legend>正则式输入</legend>  
  95.             <textarea id="regexpText"><[^>]+></textarea>  
  96.             <div class="btnWrap">  
  97.                 <button id="doOut">输出</button>  
  98.                 <button id="doTrim">剔除</button>  
  99.                 <button id="doReplace">替换</button>  
  100.                 <button id="doNext">查找下一个</button>  
  101.                 <button id="doFind">列表</button>  
  102.             </div>  
  103.         </fieldset>  
  104.         <fieldset >  
  105.             <legend>模式匹配</legend>  
  106.             <label for="isI"><input type="checkbox" id="isI" m="i" />忽略大小写</label>  
  107.             <label for="isM"><input type="checkbox" id="isM" m="m" />多行模式</label>  
  108.             <label for="isG"><input type="checkbox" id="isG" m="g" checked />全局模式</label>  
  109.         </fieldset>  
  110.         <fieldset class="">  
  111.             <legend>常用正则式</legend>  
  112.             <div class="list_wrap">  
  113.                 <div id="tabBtns">  
  114.                     <a href="javascript:void(0)" title="">验证</a>  
  115.                     <a href="javascript:void(0)" title="" class="hot">提取</a>  
  116.                     <a href="javascript:void(0)" title="">剔除</a>  
  117.                     <div class="clear"></div>  
  118.                 </div>  
  119.                 <div id="all_list">  
  120.                     <div class="list_option" id="list_check">  
  121.                         <select id="exps1" size="2"></select>              
  122.                     </div>  
  123.                     <div class="list_option" id="list_match">  
  124.                         <select id="exps2" size="2"></select>              
  125.                     </div>  
  126.                     <div class="list_option" id="list_trim">  
  127.                         <select id="exps3" size="2"></select>              
  128.                     </div>  
  129.                 </div>  
  130.             </div>  
  131.         </fieldset>  
  132.     </div>  
  133.     <div class="right">  
  134.         <fieldset>  
  135.             <legend>测试文本</legend>  
  136.             <textarea id="targetText">  
  137. <!-- testText-->  
  138. <table cellspacing="0" cellpadding="4" width="100%" align="center" class="t_row">  
  139. <tr style="height: 100%">  
  140. <td width="18%" valign="top" class="t_user"><a name="pid575004"></a> <a name="newpost"></a> <a href="space.php?uid=94039" target="_blank" class="bold">客服果果</a>  
  141.  
  142. <div class="smalltxt">  
  143. 爬虫 
  144.   
  145. <img src="images/default/star_level2.gif" alt="Rank: 2" /> 
  146.   
  147.  
  148.   
  149. <table width="95%" border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed; overflow: hidden">  
  150. <tr><td align="center"><div class="avatar" style="width: 70"><img src="images/avatars/16.gif" width="70" height="80" border="0" alt="" /></div></td></tr></table>  
  151. <!-- testText end-->  
  152.             </textarea>  
  153.         </fieldset>  
  154.         <fieldset >  
  155.             <legend>替换文本</legend>  
  156.             <textarea id="replaceText">dhooo</textarea>  
  157.         </fieldset>  
  158.         <fieldset>  
  159.             <legend id="reInfo">查找结果</legend>  
  160.             <textarea id="resultText"></textarea>  
  161.         </fieldset>  
  162.     </div>  
  163.     <div class="clear"></div>  
  164. </div>  
  165. </div>  
  166. <script>  
  167. ldh={  
  168.     ex:function(main,ex){for(var k in (ex||{}))main[k]=ex[k];return main}  
  169.     ,each:function(list,fn){for(var i=0;i<list.length;i++)fn.call(list[i],i,list)}  
  170.     ,chk:function $chk(obj){return !!(obj || obj === 0)}  
  171.     ,find:function(selector,box){  
  172.         if(typeof(selector)!='string')return selector;  
  173.         if(selector.charAt(0)=='.')return (function(className,box){  
  174.             var list=[];  
  175.             ldh.each(ldh.find('*',box),function (i){  
  176.                 if(this.className.indexOf(className)!=-1)list.push(this)  
  177.             })  
  178.             return list;  
  179.         })(selector.replace('.',''),ldh.find(box));  
  180.         if(selector.charAt(0)=='#')return document.getElementById(selector.replace('#',''));  
  181.         return (ldh.find(box)||document).getElementsByTagName(selector);  
  182.     }  
  183. };  
  184. ldh.ex(ldh,{  
  185.     drag:function(hander,ini){  
  186.         ini=ldh.ex({win:false,dir:'xy'},ini);  
  187.         var mover=ini.win||hander;  
  188.         mover.style.position="absolute";  
  189.         hander.onmousedown=function (e){  
  190.             e=window.event||e;  
  191.             this.x=e.clientX-mover.offsetLeft;  
  192.             this.y=e.clientY-mover.offsetTop;  
  193. if(document.all){  
  194.          hander.onlosecapture=dragStop;  
  195.          hander.setCapture();  
  196.      }else{  
  197.          window.onblur=dragStop;  
  198.      }  
  199.             document.onmousemove=function(e){  
  200.                 e=window.event||e;  
  201.                 var x=e.clientX-hander.x,y=e.clientY-hander.y;  
  202.                 ldh.chk(ini.left)&&(x=Math.max(x,ini.left));  
  203.                 ldh.chk(ini.top)&&(y=Math.max(y,ini.top));  
  204.                 ldh.chk(ini.right)&&(x=Math.min(x,ini.right));  
  205.                 ldh.chk(ini.bottom)&&(y=Math.min(y,ini.bottom));  
  206.                 if(ini.dir.indexOf('x')!=-1)mover.style.left=x+"px";  
  207.                 if(ini.dir.indexOf('y')!=-1)mover.style.top=y+"px";  
  208.                 if(document.all){    hander.setCapture();e.cancelBubble=true;  
  209.                 }else{e.preventDefault();e.stopPropagation();  
  210.                 }  
  211.                 window.getSelection && window.getSelection().removeAllRanges();                  
  212.             };  
  213.             function dragStop(){  
  214.                 documentdocument.onmousemove=document.onmouseup=null;  
  215.                 if(document.all){hander.onlosecapture=null;hander.releaseCapture();  
  216. }else{window.onblur=null}  
  217.             }  
  218.             document.onmouseup=dragStop;  
  219.         };  
  220.     }  
  221. })  
  222. $=ldh.find;  
  223. var Attr=function (key,value){return value?(this.setAttribute(key,value),this):this.getAttribute(key)};  
  224. var commad=function(){},prevPos=0,resultList=[];  
  225. ldh.each(ldh.find('INPUT'),function (){this.onclick=applySearch})  
  226. function applySearch(){  
  227.     var mode='',re,beginTime=new Date;  
  228.     ldh.each(ldh.find('INPUT'),function (){if(this.checked)mode+=Attr.call(this,'m')});  
  229.     if($('#regexpText').value==''){re=null}  
  230.     else{try{re=new RegExp($('#regexpText').value,mode)  
  231.         }catch(e){re=null}      
  232.     }  
  233.     var mArr=String($('#targetText').value).match(re);  
  234.     $('#resultText').value='';  
  235.     if(!(mArr instanceof Array))mArr=[];  
  236.     resultList=mArr;  
  237.     var time='共耗时 <strong style="color:#009900">'+(new Date-beginTime)+"</strong> 毫秒"  
  238.     command(mArr,re,mode,time);  
  239. }  
  240. if(document.all){  
  241.     var rngTarget=$('#targetText').createTextRange(),firstRng=rngTarget.getBookmark();  
  242. }  
  243. function findText(text){  
  244.     if(!text)return;  
  245.     rngTarget.collapse(true);  
  246.     if(rngTarget.findText(text)){  
  247.         rngTarget.select();  
  248.         rngTarget.collapse(false);  
  249.     }else{  
  250.         rngTarget.moveStart('character',-$('#targetText').value.length);  
  251.     }  
  252. } ;  
  253. (function (){  
  254.     $('#regexpText').onchange=function(){resultList=[];}  
  255.     $('#exps1').onchange=  
  256.     $('#exps2').onchange=  
  257.     $('#exps3').onchange=function (){$('#regexpText').value=this.value;resultList=[]};  
  258.     ($('#doFind').onclick=function (){  
  259.             command=function(mArr,a,b,c){  
  260.                 $('#reInfo').innerHTML='查找结果(共找到 <strong style="color:red">'+mArr.length+'</strong> 个匹配,'+c+')';  
  261.                 if(mArr.length==0)return $('#resultText').value='没有找到匹配项';  
  262.                 var txt=[];  
  263.                 ldh.each(mArr,function (i){txt.push((i+1)+'. '+this+'/n')});  
  264.                 $('#resultText').value=txt.join('');  
  265.             };  
  266.             applySearch();  
  267.     })();  
  268.     $('#doReplace').onclick=function (){  
  269.             command=function (mArr,re,b,c){  
  270.                 $('#resultText').value=$('#targetText').value.replace(re,$('#replaceText').value);  
  271.                 $('#reInfo').innerHTML='已替换 <strong style="color:red">'+mArr.length+'</strong> 个匹配项 ('+c+')'  
  272.             }  
  273.             applySearch();  
  274.     };  
  275.     $('#doTrim').onclick=function (){  
  276.             command=function (mArr,re,b,c){  
  277.                 $('#resultText').value=$('#targetText').value.replace(re,'');  
  278.                 $('#reInfo').innerHTML='已剔除 <strong style="color:red">'+mArr.length+'</strong> 个匹配项 ('+c+')'  
  279.             }  
  280.             applySearch();  
  281.     };  
  282.     $('#doOut').onclick=function (){  
  283.             command=function (mArr,re,mode,c){  
  284.                 $('#resultText').value=$('#targetText').value.replace(re,'');  
  285.                 $('#reInfo').innerHTML='JavaScript代码 ('+c+')';  
  286.                 if(mArr.length==0)return $('#resultText').value='由于没有任何匹配项,所以未能输出正则表达式!';  
  287.                 modemode=mode?',"'+mode+'"':'';  
  288.                 var txt=$('#regexpText').value.replace(////g,'////')  
  289.                 $('#resultText').value='myRegExp=new RegExp("'+txt+'"'+mode+');';  
  290.             }  
  291.             applySearch();  
  292.     };  
  293.     $('#doNext').onclick=function (){  
  294.             if(resultList.length==0){applySearch()}  
  295.             var m=resultList.shift()  
  296.             findText(m);  
  297.             $('#resultText').value=m?m:'没有找到匹配项';  
  298.     }  
  299.     ldh.each($('A','#tabBtns'),function (i){  
  300.         this.index=i;  
  301.         this.onkeydown=blur;  
  302.         this.onclick=function (){  
  303.             var List=$('DIV','#all_list');  
  304.             var Btns=$('A','#tabBtns');  
  305.             ldh.each(Btns,function(){this.className=''});  
  306.             this.className='hot';  
  307.             ldh.each(List,function(){this.style.display='none'});  
  308.             List[this.index].style.display='block';  
  309.         }  
  310.     });  
  311.     ldh.each([  
  312.         {text:'合法帐号',value:'^[a-zA-Z][a-zA-Z0-9_]{4,15}$'    }  
  313.         ,{text:'图片文件',value:'.*(.jpg|.jpeg|.gif|.png)$'}  
  314.         ,{text:'E-mail',value:'^//w+([-+.]//w+)*@//w+([-.]//w+)*//.//w+([-.]//w+)*$'}  
  315.         ,{text:'身份证',value:'^//d{15}|//d{18}$'}  
  316.         ,{text:'QQ号',value:'^[1-9]*[1-9][0-9]*$'}  
  317.         ,{text:'全中文',value:'^[//u4e00-//u9fa5]+$'}  
  318.         ,{text:'手机号码',value:'^13//d{9}|15[89]//d{8}|189//d{8}$'}  
  319.         ,{text:'固定电话',value:'^((//d{3}|//d{4})-?)?(//d{8}|//d{7})$'}  
  320.         ,{text:'邮政编码',value:'^[1-9]{1}(//d+){5}$'}  
  321.         ,{text:'URL',value:'http:////([//w-]+//.)+[//w-]+(////[//w- .//?%&=//]*)?'}  
  322.         ,{text:'IP地址',value:'^(//d{1,2}|1//d//d|2[0-4]//d|25[0-5])//.(//d{1,2}|1//d//d|2[0-4]//d|25[0-5])//.(//d{1,2}|1//d//d|2[0-4]//d|25[0-5])//.(//d{1,2}|1//d//d|2[0-4]//d|25[0-5])$'}  
  323.         ,{text:'数字',value:'^[+|-]?//d*//.?//d*$'}  
  324.         ,{text:'正整数',value:'^[1-9]//d*$'}  
  325.         ,{text:'负整数',value:'^-[1-9]//d*$'}  
  326.         ,{text:'任意整数',value:'^-?[1-9]//d*$'}  
  327.         ,{text:'正浮点数',value:'^[1-9]//d*//.//d*|0//.//d*[1-9]//d*$'}  
  328.         ,{text:'负浮点数',value:'^-([1-9]//d*//.//d*|0//.//d*[1-9]//d*)$'}  
  329.         ,{text:'任意浮点数',value:'^-?([1-9]//d*//.//d*|0//.//d*[1-9]//d*|0?//.0+|0)$'}  
  330.         ,{text:'英文字母',value:'^[A-Za-z]+$'}  
  331.         ,{text:'小写英文字母',value:'^[a-z]+$'}  
  332.         ,{text:'大写英文字母',value:'^[A-Z]+$'}  
  333.     ],function (){var O=$('#exps1').options;O[O.length]=new Option(this.text,this.value)});  
  334.     ldh.each([  
  335.         {text:'img标签',value:'<img[^>]+>'    }  
  336.         ,{text:'链接',value:'<a[^>]+>(.*?)<///a>'}  
  337.         ,{text:'图片地址',value:'(s|S)(r|R)(c|C) *= *(///'|///")?(//w|////|///|//.|:)+(//4)'}  
  338.         ,{text:'链接地址',value:'href=(//"|///'|)([^//"///'<>]+)(//1)'}  
  339.         ,{text:'中文字符',value:'[//u4e00-//u9fa5]'}  
  340.         ,{text:'双字节字符',value:'[^//x00-//xff]'}  
  341.         ,{text:'文件名',value:'([^////]*?)(?://.//w+)$'}  
  342.     ],function (){var O=$('#exps2').options;O[O.length]=new Option(this.text,this.value)});  
  343.     ldh.each([  
  344.         {text:'空行',value:'//n[//s| ]*//r'}  
  345.         ,{text:'HTML标签',value:'<[^>]+>'}  
  346.         ,{text:'首尾空格',value:'(^//s*)|(//s*$)'}  
  347.     ],function (){var O=$('#exps3').options;O[O.length]=new Option(this.text,this.value)});  
  348.     if(!document.all)$('#doNext').disabled=true;  
  349.     ldh.drag(ldh.find('#caption'),{win:ldh.find('#win'),left:0,top:0});  
  350. })()  
  351. </script>  
  352. </body>  
  353. </html>  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表