几个问题,想帮我解答一下，可以的话看看代码有没有可以更完善的地方

来源：4-7 完善测试工具

Bravura

2019-12-11 19:43:43

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正则表达式测试工具</title>
    <style>
        dl,
        dd {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 1000px;
            margin: 100px auto;
        }

        #regexp {
            float: left;
            width: 650px;

        }

        .title {

            color: #777;
            font-size: 24px;
            text-align: center;
        }

        #regexp .textbox {
            width: 638px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            resize: none;
        }

        #regexp .readonly {
            background-color: #eee;
        }

        #regexp .textfidel {
            width: 215px;
            padding: 5xp;
            border: 1 solid #ccc;
        }

        #reglist {
            float: right;
            width: 320px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #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-color: #eee;
        }
    </style>
</head>

<body>
    <div class="wrap" id="wrap">
        <h1 class="title">正则表达式测试工具</h1>
        <div id="regexp">
            <h1 class="title">正则表达式测试工具</h1>
            <textarea id="usertext" class="textbox" placeholder="在此处输入比配的文本"></textarea>
            <p>
                正则表达式：<input type="text" id="userRegExp" class="textfield" type="text" placeholder="在此处输入正则表达式" />
                <input type="checkbox" class="userModifier" value="i" />忽略大小写
                <input type="checkbox" class="userModifier" value="g" />全局匹配
                <input type="checkbox" class="userModifier" value="m" />多行匹配
                <input type="button" value="测试匹配" id="matchingBtn">
            </p>
                匹配结果：<div id="matchingResult" class="textbox readonly">
            </div>

            <p>
                替换文本：<input type="text" id="userReplace" class="textReplace" type="text" />
                         <input type="button" value="点击替换" id="replaceBtn">
            </p>
            匹配结果：
            <div id="replaceResult" class="textbox readonly"></div>
        </div>


        <dl id="reglist">
            <dt>常用正则表达式</dt>
            <dd><a href="javascript:;" class="regexplist" title=" [\u4e00-\u9fa5]*">匹配中文字符</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="[1-9]\d{4,}$">qq</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="^[\u4e00-\u9fa5a-zA-Z0-9_]{2,8}$">昵称</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="">匹配中文字符</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="">匹配中文字符</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="">匹配中文字符</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="">匹配中文字符</a></dd>
            <dd><a href="javascript:;" class="regexplist" title="">匹配中文字符</a></dd>
        </dl>
    </div>



    <script>
        //获取 节点

        var wrap = document.getElementById("wrap");   
        var wrapElems = {
            userText: wrap.querySelector("#usertext"),
            userRegExp: wrap.querySelector("#userRegExp"),
            userModifier: wrap.querySelectorAll(".userModifier"),
            matchingBtn: wrap.querySelector("#matchingBtn"),
            matchingResult: wrap.querySelector("#matchingResult"),
            userReplace: wrap.querySelector("#userReplace"),
            replaceBtn: wrap.querySelector("#replaceBtn"),
            replaceResult: wrap.querySelector("#replaceResult"),
            reglist: wrap.querySelector("#reglist").querySelectorAll(".regexplist")      
        };
        var modifier = "";

       

        
        //获得匹配模式modifier

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

            }
        }


        //文本填写错误提示
        function errorTip(userTextValue, userRegExpValue, userReplaceValue) {
            if (!userTextValue) {
                alert("请输入带匹配的文本");
                wrapElems.userText.focus();
                return false;
            }
            if (!userRegExpValue) {
                alert("请输入正则表达式");
                wrapElems.userRegExp.focus();
                return false;
            }
            if (!userReplaceValue) {
                alert("请输入替换本文");
                wrapElems.userRegExp.focus();
                return false;
            }
            return true;
        }

        

        //正则btn点击事件
        wrapElems.matchingBtn.onclick = function () {
            if (!errorTip(wrapElems.userText.value, wrapElems.userRegExp.value, 1)) return;
            //显示匹配是否成功
            var p = new RegExp(wrapElems.userRegExp.value, modifier);
            wrapElems.matchingResult.innerHTML = p.exec(wrapElems.userText.value) ? wrapElems.userText.value.replace(p, '<strong style="background-color:yellow;">' + p.exec(wrapElems.userText.value) + '</strong') : "没有匹配";
        }


        //替换btn点击事件
        wrapElems.replaceBtn.onclick = function () {
            if (!errorTip(wrapElems.userText.value, wrapElems.userRegExp.value, wrapElems.userReplace.value)) return;
            //显示匹配是否成功
            var p = new RegExp(userRegExp.value, modifier);
            wrapElems.replaceResult.innerHTML = wrapElems.userText.value.replace(p, wrapElems.userReplace.value);
        }

        //点击正则表达式
        for (var i = 0; i < wrapElems.reglist.length; i++) {
            wrapElems.reglist[i].onclick = function () {
                wrapElems.userRegExp.value = this.title;
            }
        }


    </script>
</body>

</html>

第一个是点击右边匹配文字字符没反应了，显示没有匹配