webregexp 正則測試實現代碼

2020-03-16 21:17:11

字體：大中小

來源：轉載

供稿：網友

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

<!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.dhooo.com/web/" />

<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 id="win">

<h4><div id="caption">WebRegExp 1.0 - 客服果果 [ 無憂版 ]</div></h4>

<div class="menu"><a href="javascript:void(0)" id="about" onclick="alert('感謝使用WebRegExp 1.0')">關于(<u>A</u>)</a></div>

<div class="line"></div>

<div class="ad"></div>

<div class="ibody">

    <div class="left">

        <fieldset>

            <legend>正則式輸入</legend>

            <textarea id="regexpText"><[^>]+></textarea>

            <div 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 class="list_wrap">

                <div 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 class="clear"></div>

                </div>

                <div id="all_list">

                    <div class="list_option" id="list_check">

                        <select id="exps1" size="2"></select>

                    </div>

                    <div class="list_option" id="list_match">

                        <select id="exps2" size="2"></select>

                    </div>

                    <div class="list_option" id="list_trim">

                        <select id="exps3" size="2"></select>

                    </div>

                </div>

            </div>

        </fieldset>

    </div>

    <div 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 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 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">查找結果</legend>

            <textarea id="resultText"></textarea>

        </fieldset>

    </div>

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

                documentdocument.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='查找結果(共找到 <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='由于沒有任何匹配項，所以未能輸出正則表達式!';

                modemode=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:'數字',value:'^[+|-]?//d*//.?//d*$'}

        ,{text:'正整數',value:'^[1-9]//d*$'}

        ,{text:'負整數',value:'^-[1-9]//d*$'}

        ,{text:'任意整數',value:'^-?[1-9]//d*$'}

        ,{text:'正浮點數',value:'^[1-9]//d*//.//d*|0//.//d*[1-9]//d*$'}

        ,{text:'負浮點數',value:'^-([1-9]//d*//.//d*|0//.//d*[1-9]//d*)$'}

        ,{text:'任意浮點數',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標簽',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:'雙字節字符',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標簽',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>