文章/答案/技术大牛

发布

社区首页 >问答首页 >JS -如何删除除字符串中间使用substr()函数生成的所有空白空间？

问JS -如何删除除字符串中间使用substr()函数生成的所有空白空间？
EN

Stack Overflow用户

提问于 2018-02-21 13:25:12

回答 1查看 77关注 0票数 1

我正在创建一个JS / JQuery计算器，其中有一个#info元素，它显示用户输入了什么，或者像“Windows10Calculator”中的计算序列是什么，在这里：

我已经尝试过很多事情，我会在下面列出，但它们没有奏效。

让我向你展示一下它应该是什么样的：

用户刚刚按了"Sqrt“按钮。#info元素也发生了相应的变化。通过使用“检查元素”，我们可以看到，#info元素从两边都有一个空格：" √(0) "。

让我们再按一次按钮，看看我们得到了什么。现在，#info元素具有更多的空白空间：" √( √(0) )"。一个从左边，一个在第一个√(之后，一个在√(0)之后，直到我们到达)为止。此行为是由substr()函数引起的。然而，应该是每个边 √(0)字符串的一个空格。没有其他的空白空间。substr()函数复制我的白空间，这是错误的。因此，在上面的" √( √(0) )"示例中，它应该是"√( √(0) )"，通过再次按"Sqrt“按钮，我们应该得到#info作为"√(√( √(0) ))"的结果。

let firstResult, firstResultWithSign;

$("#sqrt").on("click", function() {
  if (typeof firstResult === "undefined") {
    firstResult = $("#result h3").text();
  }

  if (typeof firstResultWithSign === 'undefined') {
    firstResultWithSign = ' \u221A(' + firstResult + ') ';
  }

  $("#result h3").text(Math.sqrt($("#result h3").text()));

  if (
    $("#info")
    .text()
    .lastIndexOf("\u221A") > -1
  ) {
    /**************************************************************************************/
    $('#info').text($('#info').text().substr(0, $('#info').text().lastIndexOf(firstResultWithSign) + 3) + firstResultWithSign + $('#info').text().substr($('#info').text().indexOf(')') + 1) + ')');
    /**************************************************************************************/
  } else {
    $("#info").html(firstResultWithSign);
  }
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url("https://images8.alphacoders.com/702/702959.jpg");
  background-attachment: fixed;
  background-size: cover;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

.text-center {
  text-align: center;
}

#result {
  background-color: #eee;
  min-height: 150px;
  max-height: 200px;
  position: relative;
}

#result h3 {
  font-size: 40px;
  margin: 0;
  position: absolute;
  bottom: 15px;
  right: 15px;
  -webkit-user-select: text;
  user-select: text;
}

.history {
  text-align: right;
  padding: 17px 17px 10px;
  display: inline-block;
  float: right;
}

.history:hover {
  background-color: #ddd;
}

#main-panel {
  background-color: #eee;
}

#title {
  float: left;
  padding: 17px;
}

#info {
  position: absolute;
  right: 15px;
  top: 55px;
  color: #616161;
  font-size: 15px;
}

.column {
  float: left;
  width: calc(25% - 5px);
  background-color: #ddd;
  height: 40px;
  margin: 0 4px 4px 0;
  line-height: 40px;
}

#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight,
#nine,
#zero {
  background-color: #fff;
  font-weight: bold;
}

#divide:hover,
#times:hover,
#minus:hover,
#plus:hover,
#equals:hover {
  background-color: #01579b !important;
  color: #fff;
}

#divide:active,
#times:active,
#minus:active,
#plus:active,
#equals:active {
  background-color: #005395 !important;
  color: #fff;
}

.material-icons {
  font-size: 22px;
}

.column:first-child {
  margin-left: 4px;
}

.column:hover {
  background-color: #bcbcbc !important;
}

.column:active {
  background-color: #aeaeae !important;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.fa-erase-left:before {
  content: "⌫";
}

.three-dots {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-x-auto {
  overflow-x: auto;
}

:focus {
  outline: 0;
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

a {
  text-decoration: none;
  color: #fff;
  position: relative;
  cursor: pointer;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.calculator-container {
  width: 45%;
  min-width: 200px;
  margin: 2.5rem auto 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<div class="calculator-container text-center">
  <div id="result">
    <div id="title">Calculator</div>
    <div class="history" title="History"><i class="material-icons">&#xE889;</i></div>
    <div id="info"></div>
    <h3 data-auto-generated="true" data-true-zero="true">0</h3>
  </div>
  <div id="main-panel">
    <div class="row">
      <div id="percentage" class="column">%</div>
      <div id="sqrt" class="column">&#x0221A;</div>
      <div id="exponentiation-by-two" class="column">x<sup>2</sup></div>
      <div id="one-divide-by-x" class="column"><sup>1</sup>/x</div>
    </div>
    <div class="row">
      <div id="ce" class="column">CE</div>
      <div id="c" class="column">C</div>
      <div id="erase-left" class="column">
        <div class="fa-erase-left"></div>
      </div>
      <div id="divide" class="column">&divide;</div>
    </div>
    <div class="row">
      <div id="seven" class="column">7</div>
      <div id="eight" class="column">8</div>
      <div id="nine" class="column">9</div>
      <div id="times" class="column">&#215;</div>
    </div>
    <div class="row">
      <div id="four" class="column">4</div>
      <div id="five" class="column">5</div>
      <div id="six" class="column">6</div>
      <div id="minus" class="column">&#8722;</div>
    </div>
    <div class="row">
      <div id="one" class="column">1</div>
      <div id="two" class="column">2</div>
      <div id="three" class="column">3</div>
      <div id="plus" class="column">&#43;</div>
    </div>
    <div class="row">
      <div id="plus-minus" class="column">&#177;</div>
      <div id="zero" class="column">0</div>
      <div id="comma" class="column">,</div>
      <div id="equals" class="column">&#61;</div>
    </div>
  </div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

JsFiddle：https://jsfiddle.net/xob6Luhh/.

什么不管用？

使用replace()，因为这样substr()就不会复制任何空白。
使用indexOf(firstResultWithSign)。
使用' ' + firstResultWithSignNoSpace + ' '，这将使substr()复制空白空间。

我已经尝试了近10种方法，然而，它们非常类似于1-3。

有什么想法吗？)谢谢。

jquery

html

css

substr

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-21 14:12:35

您可以通过以下声明实现这一目标：

$('#info').text(
    $('#info').text().replace(firstResultWithSign, firstResultWithSign.substr(1,2) 
                                                 + firstResultWithSign + ')')
);

有其他几种方法可以获得相同的结果，这取决于您希望它的动态程度。例如：

$('#info').text(
    $('#info').text().replace(firstResultWithSign, 
                              firstResultWithSign.replace(/\s*([^(]*).*/, '$1($&)'))
);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48907147

复制

相似问题

问JS -如何删除除字符串中间使用substr()函数生成的所有空白空间？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS -如何删除除字符串中间使用substr()函数生成的所有空白空间？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS -如何删除除字符串中间使用substr()函数生成的所有空白空间？
EN