老师，我的文本替换，输出原字符串

来源：3-43 利用replace方法完善正则测试工具

慕移动0023355

2019-06-02 22:00:43

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #regexp{
            width: 650px;
            margin: 100px auto;
            font-size: 14px;
        }
        #regexp .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 .textfield{
            width: 215px;
            padding: 5px;
            border: 1px solid #ccc;

        }
        #regexp .readonly{

            background-color: #eee;
        }
    </style>
</head>
<body>
<div id="regexp">
    <h1 class="title">正则表达式测试工具</h1>
    <textarea id="userText" class="textbox" placeholder="在此输入带匹配的文本"></textarea>
    <p>
        正则表达式：<input type="text" id="userRegExp" class="textfield" placeholder="在此输入正则表达式"/>
        <input type="checkbox" name="userModifier" value="i" >忽略大小写
        <input type="checkbox" name="userModifier" value="g">忽略大小写
        <input type="checkbox" name="userModifier" value="m">忽略大小写
        <input type="button" value="测试匹配" id="matchingBtn"/>
    </p>
    匹配结果：
    <div id="matchingResult" class="textbox readonly" placeholder="在此输入等待匹配的文本" disabled="disabled"></div>

<p>
    文本替换：<input type="text" id="userReplaceText" class="textfield" placeholder="在此输入正则表达式"/>

    <input type="button" value="替换按钮" id="replaceBtn"/>
</p>
    匹配结果：
    <div id="replaceResult" class="textbox readonly" placeholder="在此输入等待匹配的文本" disabled="disabled"></div>

</div>
<script>
    var wrapElem = document.querySelector('#regexp');
    var regexpElem = {
        userText : wrapElem.querySelector('#userText'),
        userRegExp : wrapElem.querySelector('#userRegExp'),
        userModifier : document.getElementsByName("userModifier"),
        matchingBtn : wrapElem.querySelector("#matchingBtn"),
        matchResult : wrapElem.querySelector("#matchingResult"),
        userReplaceText :wrapElem.querySelector("#userReplaceText"),
        replaceBtn :wrapElem.querySelector("#replaceBtn"),
        replaceResult:wrapElem.querySelector("#replaceResult")
    };
    var pattern,
        modifier ='';
    for (var i=0 ;i <regexpElem.userModifier.length;i++){
        regexpElem.userModifier[i].onclick = function () {
            modifier = '';//为了防止每点击一次就会累加一遍
            for(var j=0;j<regexpElem.userModifier.length;j++){
                if (regexpElem.userModifier[j].checked) {
                    modifier+= regexpElem.userModifier[j].value;

                }
            }
        }
    }

    regexpElem.matchingBtn.onclick = function () {
        if(!regexpElem.userText.value) {
            alert('请输入带匹配的文本！');
            regexpElem.userText.focus();
            return;
        }
            if(!regexpElem.userRegExp.value){
                alert('请输入正则表达式！');
                regexpElem.userRegExp.focus();
                return;
            }

        pattern =  new RegExp('('+regexpElem.userRegExp.value+')',modifier);
        regexpElem.matchResult.innerHTML= pattern.exec(regexpElem.userText.value)?regexpElem.userText.value.replace(pattern,'<span style="background-color:yellow;">$1<span>'):'(没有匹配)';
    }
    regexpElem.replaceBtn.onclick = function () {
        if(!regexpElem.userText.value) {
            alert('请输入带匹配的文本！');
            regexpElem.userText.focus();
            return;
        }
        if(!regexpElem.userReplaceText.value){
            alert('请输入要替换的文本');
            regexpElem.userReplaceText.focus();
            return;
        }

        pattern =  new RegExp(regexpElem.userReplaceText.value);
        regexpElem.replaceResult.innerHTML= regexpElem.userText.value.replace(pattern,'<span style="color:red;">'+ regexpElem.userReplaceText.value+'<span>');
    }
</script>
</body>
</html>

写回答

1回答