webregexp 正则测试实现代码

150 阅读 0 评论 99 点赞

我是靠谱客的博主称心玫瑰，最近开发中收集的这篇文章主要介绍webregexp 正则测试实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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">关于(<u>A</u>)</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"> 
                    验证 
                    提取 
                    剔除 
                    <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">  客服果果

<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> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]