Javascript 计算器删除按钮删除类似输入的第一个实例_Javascript_Jquery

Javascript 计算器删除按钮删除类似输入的第一个实例

javascript jquery

Javascript 计算器删除按钮删除类似输入的第一个实例,javascript,jquery,Javascript,Jquery,我正在学习JavaScript（jQuery），所以我正在研究一个科学计算器。当我输入以下内容时，删除按钮工作正常：；sin（cos）（tan.）但是当我重复类似的输入时，比如说sin（cos）（tan）（sin），它会删除sin的第一次出现。我想要的是删除每个输入的最后一次出现（相似或不相似）。我也不想一次删除一个字母/字符 jQuery代码是我所得到的最接近我想要的代码。我也非常感谢关于最佳实践的任何建议，因为我是一个初学者 <html> <head> &

我正在学习JavaScript（jQuery），所以我正在研究一个科学计算器。当我输入以下内容时，删除按钮工作正常：；sin（cos）（tan.）但是当我重复类似的输入时，比如说sin（cos）（tan）（sin），它会删除sin的第一次出现。我想要的是删除每个输入的最后一次出现（相似或不相似）。我也不想一次删除一个字母/字符

jQuery代码是我所得到的最接近我想要的代码。我也非常感谢关于最佳实践的任何建议，因为我是一个初学者

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    
    <style type="text/css" media="all">
      {
        border: solid 1px black;
      }
      .calculator-body{
        font-family: 'Titillium Web', sans-serif;
        border: solid 2px #555;
        border-radius: 2%;
        background-color: #eee;
        padding: 2%;
      }
      .screen{
        height: 150px;
        border: solid 1px #555;
        border-radius: 2%;
        background-color: #fff;
      }
      #input-area{
        font-family: Courier, Monospace;
        height: 50%;
        overflow: auto;
      }
      #input-field{
        border: 0px;
        width: 100%;
        font-size: 2.2em;
        line-height: 2em;
        font-weight: bold;
        text-indent: 5px;
        overflow: auto;
        z-index: 99;
      }
      #result{
        overflow: auto;
        font-family: 'Montserrat', sans-serif;
        font-size: 2.5em;
        font-weight: 600;
        height: 50%;
        text-align: right;
        text-indent: 30px;
        padding-right: 10px;
        padding-top: 15px;
      }
      table{
        /*width: inherit;*/
        margin-top: 3%;
        height: 30vh;
      }
      td{
        width: 60px;
        opacity: .8;
        text-align: center;
        font-size: 1.8em;
        font-weight: 500;
        line-height: 2.6em;
      }
      i{
        font-size: .8em;
      }
      td:active{
          border-radius: 5%;
          background-color: #ddd;
          opacity: 1;
        }
      @media all and (max-width: 720px){
        .calculator-body{
          border-radius: 0;
        }
        td:active{
          border-radius: 50%;
          background-color: #ddd;
          opacity: 1;
        }
        html > .col-12{
          padding: 0;
        }
      }
      table tr:nth-child(4), tr:nth-child(5){
        border-bottom: solid 1px #ddd;
      }
      table tr:last-child{
        border-top: solid 1px #ddd;
      }
      table tr:nth-child(4) td:nth-child(3), tr:nth-child(5) td:nth-child(3), tr:nth-child(6) td:nth-child(3), tr:nth-child(7) td:nth-child(3){
        border-right: solid 1px #ddd;
      }
      #cls{
        border-radius: 5%;
      }
      #equal{
        background-color: #006dff;
        color: #fff;
        border-radius: 5%;
        font-size: 2.2em;
        opacity: 1;
        transition: all .1s ease;
      }
      #equal:active{
        font-size: 2.5em;
        opacity: .5;
      }
      .operators{
        color: #006dff;
      }
      .outlaw{
        background-color: #bbb;
        border-radius: 5%;
      }
    </style>
  
    <title></title>
    <script type="text/javascript" charset="utf-8">
      $("document").ready(function (){
        $("#del").click(function (){
          var x = $("#input-field").val();
          var x_len = $("#input-field").val().length;
          var sin_lindex = x.lastIndexOf("sin");
          var cos_lindex = x.lastIndexOf("cos");
          var tan_lindex = x.lastIndexOf("tan");
          
          if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
            var value = x.replace("sin(", "");
            $("#input-field").val(value)
          }
          else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
            var value = x.replace("cos(", "");
            $("#input-field").val(value)
          }
          else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
            var value = x.replace("tan(", "");
            $("#input-field").val(value)
          }
        });
        $(".param").on("click", function (){
          if($("#inv").hasClass("outlaw")){
            document.getElementById("input-field").value += $(this).text().slice(0, -2) + "\u2212" + "\u00b9" + "(";
            document.getElementById("input-field2").value += "Math.a" + $(this).text().slice(0, -2) + "(";
          }
          else{
            document.getElementById("input-field").value += $(this).text() + "(";
            document.getElementById("input-field2").value += "Math." + $(this).text() + "((Math.PI/180)*";
          }
        });
      });
    </script>
  </head>
<body>
  <div class="col-12 col-sm-8 col-md-6 calculator-body">
      <div class="screen">
      <div id="input-area"><input name="input-field" id="input-field" value="" />
      </div>
      <div id="result">
          
      </div>
      </div>
      <table class="calculator-keys col-12">
        <tr>
          <td id="inv" class="operators mode">INV</td>
          <td id="deg" class="operators mode">DEG</td>
          <td id="sin" class="operators param">sin</td>
          <td id="cos" class="operators param">cos</td>
          <td id="tan" class="operators param">tan</td>
        </tr>
        <tr>
          <td class="num">7</td>
          <td class="num">8</td>
          <td class="num">9</td>
          <td id="del" class="operators">del</td>
          <td id="cls" class="operators" colspan="2">Cls</td>
        </tr>
      </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

</body>
</html>


{
边框：实心1px黑色；
}
.计算器主体{
字体系列：“titilliumweb”，无衬线；
边框：实心2px#555；
边界半径：2%；
背景色：#eee；
填充：2%；
}
.屏幕{
高度：150像素；
边框：实心1px#555；
边界半径：2%；
背景色：#fff；
}
#输入区{
字体系列：Courier、Monospace；
身高：50%；
溢出：自动；
}
#输入字段{
边界：0px；
宽度：100%；
字体大小：2.2米；
线高：2米；
字体大小：粗体；
文本缩进：5px；
溢出：自动；
z指数：99；
}
#结果{
溢出：自动；
字体系列：“蒙特塞拉特”，无衬线；
字号：2.5em；
字号：600；
身高：50%；
文本对齐：右对齐；
文本缩进：30px；
右边填充：10px；
填充顶部：15px；
}
桌子{
/*宽度：继承*/
利润率最高：3%；
高度：30vh；
}
运输署{
宽度：60px；
不透明度：.8；
文本对齐：居中；
字号：1.8em；
字号：500；
线高：2.6em；
}
我{
字体大小：.8em；
}
td：主动{
边界半径：5%；
背景色：#ddd；
不透明度：1；
}
@介质和全部（最大宽度：720px）{
.计算器主体{
边界半径：0；
}
td：主动{
边界半径：50%；
背景色：#ddd；
不透明度：1；
}
html>.col-12{
填充：0；
}
}
表tr:n个孩子（4），tr:n个孩子（5）{
边框底部：实心1px#ddd；
}
表tr：最后一个孩子{
边框顶部：实心1px#ddd；
}
表tr:n个孩子（4）td:n个孩子（3），tr:n个孩子（5）td:n个孩子（3），tr:n个孩子（6）td:n个孩子（3），tr:n个孩子（7）td:n个孩子（3）{
右边框：实心1px#ddd；
}
#cls{
边界半径：5%；
}
#相等的{
背景色：#006dff；
颜色：#fff；
边界半径：5%；
字体大小：2.2米；
不透明度：1；
过渡：全部1秒轻松；
}
#相等：活动{
字号：2.5em；
不透明度：.5；
}
.操作员{
颜色：#006dff；
}
.歹徒{
背景色：#bbb；
边界半径：5%；
}
$（“文档”）.ready（函数（）{
$（“#del”）。单击（函数（）{
var x=$（“#输入字段”）.val（）；
var x#len=$（“#输入字段”）.val（）.length；
var sin_lindex=x.lastIndexOf（“sin”）；
var cos_lindex=x.lastIndexOf（“cos”）；
var tan_lindex=x.lastIndexOf（“tan”）；
如果（sin_lindex>cos_lindex&&sin_lindex>tan_lindex）{
var值=x.replace（“sin（“，”）；
$（“#输入字段”）.val（值）
}
否则如果（sin_lindextan_lindex）{
var值=x.replace（“cos（“，”）；
$（“#输入字段”）.val（值）
}
否则如果（tan_lindex>cos_lindex和sin_lindex

您的代码“它删除了第一次出现的”的原因是您正在使用带有字符串模式的replace（）方法
replace（）方法返回一个新字符串，其中包含
由替换项替换的模式。该模式可以是字符串或字符串
RegExp，替换可以是要调用的字符串或函数
对于每个匹配项。如果模式是字符串，则只显示第一个匹配项
被替换。

因此，您应该使用正则表达式（Regex）来识别术语的最后一次出现。
为此，考虑在这个答案中详细解释的解释：

然后用replace regex替换所有replace用法，它应该可以工作。
代码“它删除了第一次出现的”的原因是使用了带有字符串模式的replace（）方法
replace（）方法返回一个新字符串，其中包含
由替换项替换的模式。该模式可以是字符串或字符串
RegExp，替换可以是要调用的字符串或函数
对于每个匹配项。如果模式是字符串，则只显示第一个匹配项
比
$("#del").click(function (){
              var x = $("#input-field").val();
              var sin_lindex = x.lastIndexOf("sin");
              var cos_lindex = x.lastIndexOf("cos");
              var tan_lindex = x.lastIndexOf("tan");
              
              if (sin_lindex > cos_lindex && sin_lindex > tan_lindex){
                var value = x.replace(/sin\($/g, "");
                $("#input-field").val(value);
              }
              else if (sin_lindex < cos_lindex && cos_lindex > tan_lindex){
                var value = x.replace(/cos\($/g, "");
                $("#input-field").val(value);
              }
              else if (tan_lindex > cos_lindex && sin_lindex < tan_lindex){
                var value = x.replace(/tan\($/g, "");
                $("#input-field").val(value);
              }
            });