webregexp 正則測試實現(xiàn)代碼

更新時間：2009年03月18日 00:05:42 作者：

WebRegExp 1.0 - 客服果果 [ 無憂版 ]對于想學(xué)習(xí)正則的朋友是個不錯的在線工具，測試你正則的正確性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> WebRegExp 1.0 - 客服果果 [ 無憂版 ] </title> <base href="http://www.dhdzp.com/"/> <style type="text/css"> body{background:#2B3C53;} *{font-size:12px;} #win{     width:900px;font-size:12px;     position:absolute;left:0;top:0;     background:#F1F0EA;     border:2px outset;color:#000;     -moz-border-top-colors:#d4d0c8 white;     -moz-border-left-colors: #d4d0c8 white;     -moz-border-right-colors:#404040 #808080;     -moz-border-bottom-colors:#404040 #808080; } h4{     background:#35528E url(images/caption.jpg) repeat-y 100% 0;     margin:1px;padding:5px;cursor:default;     color:#fff;font-size:14px;font-family:Arial; } h4 div{     background:url(images/ico.gif) no-repeat 2px 0;     padding-left:25px; } #about{    text-decoration:none;color:#000;padding:2px} .menu{line-height:20px;padding:0px 10px} .line{     font-size:1px;    line-height:1px;     background:#fff;    margin:0 2px;    height:1px;     overflow:hidden;    border-top:1px solid #ACA899; } .ad{     background:#FF7B00 url(images/regexp_ad.gif) no-repeat 50% 50%;     height:60px; position:relative; } .ibody{margin:5px;} .left{     width:250px;height:100%;     float:left;text-align:center; } .btnWrap{padding:5px 0;} button{+margin-left:2px;padding:0px; } #tabBtns a{     color:#000;text-decoration:none;     display:block; float:left;margin-right:1px;     width:47px;height:20px;line-height:20px;     background:#fff url(images/tab.gif) no-repeat 0 0; } .list_wrap{margin:5px;} #tabBtns{z-index:10;border:0px solid #aaa; } #tabBtns a:hover{     background:url(images/tab.gif) no-repeat 0 -21px; } #tabBtns a.hot,#tabBtns a.hot:hover{     background:url(images/tab.gif) no-repeat 0 100%;     width:52px; height:20px; position:relative;bottom:-1px; } .list_option{     background:#fff; margin:0px;padding:0px;     border:1px solid #919B9C;display:none; } #list_match.list_option{display:block;} .right{width:636px;    float:right;} .clear{clear:both;font-size:0px;overflow:hidden;height:0px; } #colorText,textarea{     margin:5px auto;height:100px;     overflow:auto;border:1px solid inset; } #colorText{background:#fff;text-align:left;word-wrap:break-word;overflow:hidden;} #regexpText{width:236px} #replaceText{height:30px;} #regexpText{height:60px;} #replaceText,#targetText,#resultText{width:620px} #targetText{height:200px;background:#ddd;color:#000; } #resultText{height:60px;color:#0099FF} select{width:216px;height:170px;margin:0px;padding:0px;margin-top:10px; } fieldset{    text-align:center;padding:0; margin:10px 0 0 0} legend{margin-left:10px;color:#000; } </style> </head> <body> <div   class="9dffp97"   id="win"> <h4><div   class="h9dbthf"   id="caption">WebRegExp 1.0 - 客服果果 [ 無憂版 ]</div></h4> <div   id="9fjhbd9"   class="menu"><a href="javascript:void(0)" id="about" onclick="alert('感謝使用WebRegExp 1.0')">關(guān)于(<u>A</u>)</a></div> <div   id="ptbtdn9"   class="line"></div> <div   id="bf9brth"   class="ad"></div> <div   id="tpjlvhr"   class="ibody">     <div   id="pd9lflv"   class="left">         <fieldset>             <legend>正則式輸入</legend>             <textarea id="regexpText"><[^>]+></textarea>             <div   id="j9vbzfx"   class="btnWrap">                 <button id="doOut">輸出</button>                 <button id="doTrim">剔除</button>                 <button id="doReplace">替換</button>                 <button id="doNext">查找下一個</button>                 <button id="doFind">列表</button>             </div>         </fieldset>         <fieldset >             <legend>模式匹配</legend>             <label for="isI"><input type="checkbox" id="isI" m="i" />忽略大小寫</label>             <label for="isM"><input type="checkbox" id="isM" m="m" />多行模式</label>             <label for="isG"><input type="checkbox" id="isG" m="g" checked />全局模式</label>         </fieldset>         <fieldset class="">             <legend>常用正則式</legend>             <div   id="9x9znxt"   class="list_wrap">                 <div   class="rfzjppx"   id="tabBtns">                     <a href="javascript:void(0)" title="">驗證</a>                     <a href="javascript:void(0)" title="" class="hot">提取</a>                     <a href="javascript:void(0)" title="">剔除</a>                     <div   id="zxb7lfn"   class="clear"></div>                 </div>                 <div   class="fztdrdb"   id="all_list">                     <div   id="xvvh7bl"   class="list_option" id="list_check">                         <select id="exps1" size="2"></select>                                 </div>                     <div   id="nb7blbr"   class="list_option" id="list_match">                         <select id="exps2" size="2"></select>                                 </div>                     <div   id="zxvrnz9"   class="list_option" id="list_trim">                         <select id="exps3" size="2"></select>                                 </div>                 </div>             </div>         </fieldset>     </div>     <div   id="pdrz9lh"   class="right">         <fieldset>             <legend>測試文本</legend>             <textarea id="targetText">  <table cellspacing="0" cellpadding="4" width="100%" align="center" class="t_row"> <tr style="height: 100%"> <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> <div   id="1hbxtnf"   class="smalltxt"> 爬蟲 <img src="images/default/star_level2.gif" alt="Rank: 2" />  <table width="95%" border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed; overflow: hidden"> <tr><td align="center"><div   id="7p9zl9b"   class="avatar" style="width: 70"><img src="images/avatars/16.gif" width="70" height="80" border="0" alt="" /></div></td></tr></table>              </textarea>         </fieldset>         <fieldset >             <legend>替換文本</legend>             <textarea id="replaceText">dhooo</textarea>         </fieldset>         <fieldset>             <legend id="reInfo">查找結(jié)果</legend>             <textarea id="resultText"></textarea>         </fieldset>     </div>     <div   id="jv97hlt"   class="clear"></div> </div> </div> <script> ldh={     ex:function(main,ex){for(var k in (ex||{}))main[k]=ex[k];return main}     ,each:function(list,fn){for(var i=0;i<list.length;i++)fn.call(list[i],i,list)}     ,chk:function $chk(obj){return !!(obj || obj === 0)}     ,find:function(selector,box){         if(typeof(selector)!='string')return selector;         if(selector.charAt(0)=='.')return (function(className,box){             var list=[];             ldh.each(ldh.find('*',box),function (i){                 if(this.className.indexOf(className)!=-1)list.push(this)             })             return list;         })(selector.replace('.',''),ldh.find(box));         if(selector.charAt(0)=='#')return document.getElementById(selector.replace('#',''));         return (ldh.find(box)||document).getElementsByTagName(selector);     } }; ldh.ex(ldh,{     drag:function(hander,ini){         ini=ldh.ex({win:false,dir:'xy'},ini);         var mover=ini.win||hander;         mover.style.position="absolute";         hander.onmousedown=function (e){             e=window.event||e;             this.x=e.clientX-mover.offsetLeft;             this.y=e.clientY-mover.offsetTop; if(document.all){          hander.onlosecapture=dragStop;          hander.setCapture();      }else{          window.onblur=dragStop;      }             document.onmousemove=function(e){                 e=window.event||e;                 var x=e.clientX-hander.x,y=e.clientY-hander.y;                 ldh.chk(ini.left)&&(x=Math.max(x,ini.left));                 ldh.chk(ini.top)&&(y=Math.max(y,ini.top));                 ldh.chk(ini.right)&&(x=Math.min(x,ini.right));                 ldh.chk(ini.bottom)&&(y=Math.min(y,ini.bottom));                 if(ini.dir.indexOf('x')!=-1)mover.style.left=x+"px";                 if(ini.dir.indexOf('y')!=-1)mover.style.top=y+"px";                 if(document.all){    hander.setCapture();e.cancelBubble=true;                 }else{e.preventDefault();e.stopPropagation();                 }                 window.getSelection && window.getSelection().removeAllRanges();                             };             function dragStop(){                 document.onmousemove=document.onmouseup=null;                 if(document.all){hander.onlosecapture=null;hander.releaseCapture(); }else{window.onblur=null}             }             document.onmouseup=dragStop;         };     } }) $=ldh.find; var Attr=function (key,value){return value?(this.setAttribute(key,value),this):this.getAttribute(key)}; var commad=function(){},prevPos=0,resultList=[]; ldh.each(ldh.find('INPUT'),function (){this.onclick=applySearch}) function applySearch(){     var mode='',re,beginTime=new Date;     ldh.each(ldh.find('INPUT'),function (){if(this.checked)mode+=Attr.call(this,'m')});     if($('#regexpText').value==''){re=null}     else{try{re=new RegExp($('#regexpText').value,mode)         }catch(e){re=null}         }     var mArr=String($('#targetText').value).match(re);     $('#resultText').value='';     if(!(mArr instanceof Array))mArr=[];     resultList=mArr;     var time='共耗時 <strong style="color:#009900">'+(new Date-beginTime)+"</strong> 毫秒"     command(mArr,re,mode,time); } if(document.all){     var rngTarget=$('#targetText').createTextRange(),firstRng=rngTarget.getBookmark(); } function findText(text){     if(!text)return;     rngTarget.collapse(true);     if(rngTarget.findText(text)){         rngTarget.select();         rngTarget.collapse(false);     }else{         rngTarget.moveStart('character',-$('#targetText').value.length);     } } ; (function (){     $('#regexpText').onchange=function(){resultList=[];}     $('#exps1').onchange=     $('#exps2').onchange=     $('#exps3').onchange=function (){$('#regexpText').value=this.value;resultList=[]};     ($('#doFind').onclick=function (){             command=function(mArr,a,b,c){                 $('#reInfo').innerHTML='查找結(jié)果(共找到 <strong style="color:red">'+mArr.length+'</strong> 個匹配,'+c+')';                 if(mArr.length==0)return $('#resultText').value='沒有找到匹配項';                 var txt=[];                 ldh.each(mArr,function (i){txt.push((i+1)+'. '+this+'\n')});                 $('#resultText').value=txt.join('');             };             applySearch();     })();     $('#doReplace').onclick=function (){             command=function (mArr,re,b,c){                 $('#resultText').value=$('#targetText').value.replace(re,$('#replaceText').value);                 $('#reInfo').innerHTML='已替換 <strong style="color:red">'+mArr.length+'</strong> 個匹配項 ('+c+')'             }             applySearch();     };     $('#doTrim').onclick=function (){             command=function (mArr,re,b,c){                 $('#resultText').value=$('#targetText').value.replace(re,'');                 $('#reInfo').innerHTML='已剔除 <strong style="color:red">'+mArr.length+'</strong> 個匹配項 ('+c+')'             }             applySearch();     };     $('#doOut').onclick=function (){             command=function (mArr,re,mode,c){                 $('#resultText').value=$('#targetText').value.replace(re,'');                 $('#reInfo').innerHTML='JavaScript代碼 ('+c+')';                 if(mArr.length==0)return $('#resultText').value='由于沒有任何匹配項，所以未能輸出正則表達(dá)式!';                 mode=mode?',"'+mode+'"':'';                 var txt=$('#regexpText').value.replace(/\\/g,'\\\\')                 $('#resultText').value='myRegExp=new RegExp("'+txt+'"'+mode+');';             }             applySearch();     };     $('#doNext').onclick=function (){             if(resultList.length==0){applySearch()}             var m=resultList.shift()             findText(m);             $('#resultText').value=m?m:'沒有找到匹配項';     }     ldh.each($('A','#tabBtns'),function (i){         this.index=i;         this.onkeydown=blur;         this.onclick=function (){             var List=$('DIV','#all_list');             var Btns=$('A','#tabBtns');             ldh.each(Btns,function(){this.className=''});             this.className='hot';             ldh.each(List,function(){this.style.display='none'});             List[this.index].style.display='block';         }     });     ldh.each([         {text:'合法帳號',value:'^[a-zA-Z][a-zA-Z0-9_]{4,15}$'    }         ,{text:'圖片文件',value:'.*(.jpg|.jpeg|.gif|.png)$'}         ,{text:'E-mail',value:'^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$'}         ,{text:'身份證',value:'^\\d{15}|\\d{18}$'}         ,{text:'QQ號',value:'^[1-9]*[1-9][0-9]*$'}         ,{text:'全中文',value:'^[\\u4e00-\\u9fa5]+$'}         ,{text:'手機號碼',value:'^13\\d{9}|15[89]\\d{8}|189\\d{8}$'}         ,{text:'固定電話',value:'^((\\d{3}|\\d{4})-?)?(\\d{8}|\\d{7})$'}         ,{text:'郵政編碼',value:'^[1-9]{1}(\\d+){5}$'}         ,{text:'URL',value:'http:\/\/([\\w-]+\\.)+[\\w-]+(\/\\[\\w- .\/?%&=\\]*)?'}         ,{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])$'}         ,{text:'數(shù)字',value:'^[+|-]?\\d*\\.?\\d*$'}         ,{text:'正整數(shù)',value:'^[1-9]\\d*$'}         ,{text:'負(fù)整數(shù)',value:'^-[1-9]\\d*$'}         ,{text:'任意整數(shù)',value:'^-?[1-9]\\d*$'}         ,{text:'正浮點數(shù)',value:'^[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*$'}         ,{text:'負(fù)浮點數(shù)',value:'^-([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*)$'}         ,{text:'任意浮點數(shù)',value:'^-?([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$'}         ,{text:'英文字母',value:'^[A-Za-z]+$'}         ,{text:'小寫英文字母',value:'^[a-z]+$'}         ,{text:'大寫英文字母',value:'^[A-Z]+$'}     ],function (){var O=$('#exps1').options;O[O.length]=new Option(this.text,this.value)});     ldh.each([         {text:'img標(biāo)簽',value:'<img[^>]+>'    }         ,{text:'鏈接',value:'<a[^>]+>(.*?)<\\/a>'}         ,{text:'圖片地址',value:'(s|S)(r|R)(c|C) *= *(\\\'|\\\")?(\\w|\\\\|\\/|\\.|:)+(\\4)'}         ,{text:'鏈接地址',value:'href=(\\"|\\\'|)([^\\"\\\'<>]+)(\\1)'}         ,{text:'中文字符',value:'[\\u4e00-\\u9fa5]'}         ,{text:'雙字節(jié)字符',value:'[^\\x00-\\xff]'}         ,{text:'文件名',value:'([^\\\/]*?)(?:\\.\\w+)$'}     ],function (){var O=$('#exps2').options;O[O.length]=new Option(this.text,this.value)});     ldh.each([         {text:'空行',value:'\\n[\\s| ]*\\r'}         ,{text:'HTML標(biāo)簽',value:'<[^>]+>'}         ,{text:'首尾空格',value:'(^\\s*)|(\\s*$)'}     ],function (){var O=$('#exps3').options;O[O.length]=new Option(this.text,this.value)});     if(!document.all)$('#doNext').disabled=true;     ldh.drag(ldh.find('#caption'),{win:ldh.find('#win'),left:0,top:0}); })() </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]