八十五：JavaScript之正则表达式之实现正则测试工具

实现效果：通过正则表达式进行校验、匹配、替换，点击常用的正则表达式时，直接使用

HTML

八十五：JavaScript之正则表达式之实现正则测试工具

CSS

八十五：JavaScript之正则表达式之实现正则测试工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        dl, dd{padding: 0; margin: 0;}
        /* 清除浮动 */
        .clear-float{zoom: 1}
        .clear-float:after{display: block;clear: both;content: ""}

        .wrap{width: 1000px; margin: 100px auto;}
        .title{color: #777; font-size: 24px; text-align: center;}
        #regexp{float: left;width: 650px; font-size: 14px;}
        #regexp .textBox{
            width: 638px; /* 650 - 1*2 - 5*2 = 638 */
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 5px;/* 圆角 */
            padding: 5px;
            resize: none;  /* 文本域不让拖动改变大小 */
        }
        #regexp .readonly{background: #eee;}
        #regexp .testField{width: 215px;padding: 5px;border: 1px solid #ccc;}
        #regList{float: right; width: 320px;border: 1px solid #ccc;border-radius: 5px;background: #f5f5f5; padding: 20px 0}
        #regList dt{margin-bottom: 10px;text-indent: 20px;color: #999;font-size: 18px;font-weight: bold}
        #regList dd{height: 40px;line-height: 40px;text-indent: 20px;}
        #regList a{display: block;color: #08c;text-decoration: none}
        #regList a:hover{color: #005580;background: #eee}
    </style>
</head>
<body>
<div class="wrap clear-float">
    <h1 class="title">正则表达式调试工具</h1>

    <!--程序主界面-->
    <div >' + userReplaceText.value + '</span>');
    }

    // 右侧常用正则示例
    // 循环添加点击事件，将点击元素的正则赋值给要输入的正则表达式
    for (var i = 0; i < regLists.length; i++){
        regLists[i].onclick = function (){
            userRegExp.value = this.title;
        };
    }
</script>

</body>
</html>