体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师说的那个简化，我试了一下，能实现但不知道是否标准，请老师帮忙看下

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

Elisa呀

2020-02-20 22:08:10

请老师帮忙看下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

  <title>正则表达式测试工具</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 .readonly{

      background-color: #eee;

    }

    #regexp .textfield{

      width: 215px;

      padding:5px;

      border:1px solid #ccc;

    }

  </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" id="matchingBtn"value="测试匹配"/>

    </p>

    匹配结果：

    <div id="matchingResult" class="textbox readonly"></div>

     <p>

      替换表达式：

      <input type="text" id="userReplaceText"class="textfield" placeholder="在此输入替换表达式">

      <input type="button" id="replaceBtn"value="测试替换"/>

    </p>

    替换结果：

    <div id="replaceResult" class="textbox readonly"></div>

    <!--<textarea id="matchingResult" class="textbox" disabled="disabled"></textarea>-->

  </div>

 <script>

  var userText=document.getElementById('userText'),

      userRegExp=document.getElementById('userRegExp'),

      userModifier=document.getElementsByName('userModifier'),

      matchingBtn=document.getElementById('matchingBtn'),

      matchingResult=document.getElementById('matchingResult'),

      userReplaceText=document.getElementById('userReplaceText'),

      replaceBtn=document.getElementById('replaceBtn'),

      replaceResult=document.getElementById('replaceResult');

  var pattern;


  var modifier='';

  for(var i=0;i<userModifier.length;i++){

    userModifier[i].onclick=function(){

      modifier='';//清空重新计算，不然会累积

      for(var j=0;j<userModifier.length;j++){

        if(userModifier[j].checked){

          modifier+=userModifier[j].value;

        }

      }

    }

  }

  //点击正则匹配按钮

  function check(tex,ale){

    if(!tex.value){

      alert(ale)

      tex.focus();

      return;

    }

  }

  matchingBtn.onclick=function(){

    check(userText,'请输入待匹配的文本！')；

    check(userRegExp,'请输入正则表达式！')；

  }

  // matchingBtn.onclick=function(){

  //   if(!userText.value){

  //     alert('请输入待匹配的文本！');

  //     userText.focus();

  //     return;

  //   }

  //   if(!userRegExp.value){

  //     alert('请输入正则表达式！');

  //     userRegExp.focus();

  //     return;

  //   }

    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=function(){

    check(userText,'请输入待匹配的文本！')；

    check(userRegExp,'请输入正则表达式！')；

    check(userReplaceText,'请输入要替换成的文本！')

  }

  // replaceBtn.onclick=function(){

  //   if(!userText.value){

  //     alert('请输入待匹配的文本！');

  //     userText.focus();

  //     return;

  //   }

  //   if(!userRegExp.value){

  //     alert('请输入正则表达式！');

  //     userRegExp.focus();

  //     return;

  //   }

  //   if(!userReplaceText.value){

  //     alert('请输入要替换成的文本！');

  //     userRegExp.focus();

  //     return;

  //   }

    pattern=new RegExp('('+userRegExp.value+')',modifier);

    replaceResult.innerHTML=userText.value.replace(pattern,'<span style="color:red">'+userReplaceText.value+'</span>');

  }

 </script> 

</body>

</html>


写回答

2回答

好帮手慕星星

2020-02-21

同学你好，代码中问题如下：

1、标点符号需要是英文状态下的

2、不需要再写一个匹配按钮的点击事件，在原来地方修改就好

参考：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>正则表达式测试工具</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 .readonly {
            background-color: #eee;
        }
        
        #regexp .textfield {
            width: 215px;
            padding: 5px;
            border: 1px solid #ccc;
        }
    </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" id="matchingBtn" value="测试匹配" />

        </p>

        匹配结果：

        <div id="matchingResult" class="textbox readonly"></div>

        <p>

            替换表达式：

            <input type="text" id="userReplaceText" class="textfield" placeholder="在此输入替换表达式">

            <input type="button" id="replaceBtn" value="测试替换" />

        </p>

        替换结果：

        <div id="replaceResult" class="textbox readonly"></div>

        <!--<textarea id="matchingResult" class="textbox" disabled="disabled"></textarea>-->

    </div>

    <script>
        var userText = document.getElementById('userText'),

            userRegExp = document.getElementById('userRegExp'),

            userModifier = document.getElementsByName('userModifier'),

            matchingBtn = document.getElementById('matchingBtn'),

            matchingResult = document.getElementById('matchingResult'),

            userReplaceText = document.getElementById('userReplaceText'),

            replaceBtn = document.getElementById('replaceBtn'),

            replaceResult = document.getElementById('replaceResult');

        var pattern;



        var modifier = '';

        for (var i = 0; i < userModifier.length; i++) {

            userModifier[i].onclick = function() {

                modifier = ''; //清空重新计算，不然会累积

                for (var j = 0; j < userModifier.length; j++) {

                    if (userModifier[j].checked) {

                        modifier += userModifier[j].value;

                    }

                }

            }

        }

        //点击正则匹配按钮

        function check(tex, ale) {
            console.log(tex)

            if (!tex.value) {

                alert(ale)

                tex.focus();

                return;

            }

        }

        // matchingBtn.onclick = function() {


        // }

        matchingBtn.onclick = function() {
            // check(userText, '请输入待匹配的文本！')；
            check(userText, '请输入待匹配的文本！');

            // check(userRegExp, '请输入正则表达式！')；
            check(userRegExp, '请输入正则表达式！');

            //   if(!userText.value){

            //     alert('请输入待匹配的文本！');

            //     userText.focus();

            //     return;

            //   }

            //   if(!userRegExp.value){

            //     alert('请输入正则表达式！');

            //     userRegExp.focus();

            //     return;

            //   }

            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 = function() {

            // check(userText, '请输入待匹配的文本！')；
            check(userText, '请输入待匹配的文本！');

            // check(userRegExp, '请输入正则表达式！')；
            check(userRegExp, '请输入正则表达式！');

            check(userReplaceText, '请输入要替换成的文本！')

        }

        replaceBtn.onclick = function() {

            //   if(!userText.value){

            //     alert('请输入待匹配的文本！');

            //     userText.focus();

            //     return;

            //   }

            //   if(!userRegExp.value){

            //     alert('请输入正则表达式！');

            //     userRegExp.focus();

            //     return;

            //   }

            //   if(!userReplaceText.value){

            //     alert('请输入要替换成的文本！');

            //     userRegExp.focus();

            //     return;

            //   }

            pattern = new RegExp('(' + userRegExp.value + ')', modifier);

            replaceResult.innerHTML = userText.value.replace(pattern, '<span style="color:red">' + userReplaceText.value + '</span>');

        }
    </script>

</body>

</html>

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

Elisa呀

提问者

2020-02-20

不对，是我刷新错页面了，弹不出来TAT，

请问这个要怎么简化呢？还请老师帮忙看下

0

0 学习 · 14456 问题

查看课程

相似问题

老师您看看，为什么我JS部分实现不了

回答 2

课程里老师说的简化，尝试了一下，没成功，老师 ，该怎么写

回答 2

老师帮我看看代码行不行？咋个优化呀？

回答 2

老师，我的问题是本节的4-8编程练习。

回答 2

老师帮忙看下代码

回答 2

打开慕课网App查看更多内容