自制正则表达式测试工具

按照国际惯例先放效果图
直接上代码：
<!DOCTYPE html>
<html lang="zh-CN"headmeta charset="UTF-8" />
title>正则表达式测试工具</style>
    dl,dd {
        padding: 0;
        margin;
    }
    .cf 
        zoom 1
    .cf:after 
        display block
        clear both
        content ""
    .wrap 
        width 1000px 100px auto
    .title 
        color #777
        font-size 24px
        text-align center
    #regexp 
        float left 650px 14px
    #regexp .textbox  638px
        height 150px
        border 1px solid #ccc
        border-radius 5px
        resize none
    #regexp .readonly 
        background-color #eee
    #regexp .textfield  215px
    #reglist  right 320px #f5f5f5 20px 0
    #reglist dt 
        margin-bottom 10px
        text-indent 20px #999 18px
        font-weight bold
    #reglist dd  40px
        line-height
    #reglist a  #08c
        text-decoration
    #reglist a:hover  #005580}
body>

    div class="wrap cf">
        h1 ="title"h1id="regexp">
            textarea ="userText" class="textbox" placeholder="在此输入待匹配的文本"></textareap>
                正则表达式：input type="text" id="userRegExp"="textfield"="在此输入正则表达式" />
                ="checkbox" name="userModifier" value="i" />忽略大小写
                ="g" 全局匹配
                ="m" 多行匹配
                ="button"="matchingBtn"="测试匹配" />
            
            匹配结果：
            ="matchingResult"="textbox readonly"div
                替换文本：="userReplaceText"="在此输入替换文本" ="replaceBtn"="替换" 
            替换结果：
            ="replaceResult"dl ="reglist"dt>常用正则表达式dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字符a="[^\x00-\xff]">匹配双字节字符(包括汉字在内)="\n\s*\r">匹配空白行="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">匹配Email地址="[a-zA-z]+://[^\s]*">匹配网址URL="\d{3}-\d{8}|\d{4}-\{7,8}">匹配国内电话号码="[1-9][0-9]{4,}">匹配腾讯QQ号="[1-9]\d{5}(?!\d)">匹配中国邮政编码="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$">匹配18位身份证号="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))">匹配(年-月-日)格式日期="^[1-9]\d*$">匹配正整数="^-[1-9]\d*$">匹配负整数="^-?[1-9]\d*$">匹配整数="^[1-9]\d*|0$">匹配非负整数（正整数 + 0）="^-[1-9]\d*|0$">匹配非正整数（负整数 + 0）="^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$">匹配正浮点数="^-[1-9]\d*\.\d*|-0\.\d*[1-9]\d*$">匹配负浮点数dl>
    >

p ="text-align: center;">本程序由strong ="color: blue;">xxxstrong>制作，欢迎大家使用！script>
    var userText = document.getElementById('userText),userRegExp userRegExp document.getElementsByName(userModifiermatchingBtnmatchingResultuserReplaceTextreplaceBtnreplaceResultreglist).getElementsByTagName(a);
     pattern,modifier = '';

    for ( i 0; i < userModifier.length; i++) {
        userModifier[i].onclick function () {
            modifier ;
             j ; j  userModifier.length; j) {
                if (userModifier[j].checked) {
                    modifier += userModifier[j].value;
                }
            }
        }
    }

    matchingBtn.onclick  () {
        !userText.value) {
            alert(请输入待匹配的文本！);
            userText.focus();
            return;
        }
        userRegExp.value) {
            alert(请输入正则表达式！);
            userRegExp.focus();
            ;
        }
        pattern new RegExp((' + userRegExp.value + ),modifier);
        matchingResult.innerHTML  pattern.exec(userText.value) ? userText.value.replace(pattern,<span style="background-color: yellow;">$1</span>) : (没有匹配);
    }
    replaceBtn.onclick userReplaceText.value) {
            alert(请输入要替换成的文本！);
            userReplaceText.focus();
            <span style="color: red;"> userReplaceText.value </span>);
    }

     reglists.length; i) {
        reglists[i].onclick  () {
            userRegExp.value this.title;
        };
    }
html>
自制正则表达式测试工具

相关文章
