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

Question

我正在创建一个 JS / JQuery 计算器并且有一个 #info 元素，它向用户显示他们输入的内容，或者 [=85= 中的计算顺序是什么]，这里：

我已经尝试了很多我将在下面列出的方法，但它们没有用。

让我告诉你它应该是什么样子：

用户刚刚按下了"Sqrt"按钮。 #info 元素已相应更改。通过使用 "Inspect element"，我们可以看到，#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 非常相似。

有什么想法吗？ :) 谢谢。

Answer 1

你可以用这个语句来实现：

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

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

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

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

JS - How to remove all whitespaces except in the middle of the string, that is generated using substr() function?

html

javascript

css

jquery

substr