Question

我需要计算带有空格的文本的字符。

这是我的尝试，但只计算文本而不仅仅是第一个空格。

<div style="max-width:80%; margin: 10px auto">
<section class="row" ng-app="">
    <div class="col-lg-8">
        <div class="panel panel-default">
            <div class="panel-heading">Paste your text for <b>words count</b></div>
            <div class="panel-body">
                <textarea class="form-control" rows="10" ng-model="wordcounter"></textarea>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="panel panel-default">
            <div class="panel-heading">Words and characters</div>
            <ul class="list-group">
                <li class="list-group-item">Characters (with space)<span class="badge">{{wordcounter.length}}</span></li>
                <li class="list-group-item">Characters (no space)<span class="badge">{{wordcounter.replace(" ","").length}}</span></li>
            </ul>
        </div>

    </div>
</section>

https://jsfiddle.net/a4Lahp6v/

Answer 1

您只能替换一个空格

没有正则表达式

问题是，目前，您只是替换一个空格而不是字符串中的所有空格。解决此问题的一种方法是将字符串拆分为字符串str.split(" ");中的所有空格，然后将它们连接在一起。（使用join将这些单词粘贴在一起，没有空格。

更改计数器的绑定，不包含{{wordcounter.split(" ").join("").length}}

之类的空格

 <div style="max-width:80%; margin: 10px auto">
    <section class="row" ng-app="">
<div class="col-lg-8">
    <div class="panel panel-default">
        <div class="panel-heading">Paste your text for <b>words count</b></div>
        <div class="panel-body">
            <textarea class="form-control" rows="10" ng-model="wordcounter"></textarea>
        </div>
    </div>
</div>
<div class="col-lg-4">
    <div class="panel panel-default">
        <div class="panel-heading">Words and characters</div>
        <ul class="list-group">
            <li class="list-group-item">Characters (with space)<span class="badge">{{wordcounter.length}}</span></li>
            <li class="list-group-item">Characters (no space)<span class="badge">{{wordcounter.split(" ").join("").length}}</span></li>
        </ul>
    </div>

</div>

Answer 2

你可以使用正则表达式获取标签等。

wordcounter.replace（/ \ s / g，＆＃34;＆＃34;）

Answer 3

您还可以使用Angular自定义过滤器来完成此操作。

angular.module("app", ["core"]);

angular.module("core", []);

angular.module("core").filter('count', function() {
  return function(input, incSpace) {
    input = input || "";
    return incSpace ? input.length : input.replace(/\s/g, '').length;
  };
});

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<body ng-app="app">
  <div style="max-width:80%; margin: 10px auto">
    <section class="row" ng-app="">
      <div class="col-lg-8">
        <div class="panel panel-default">
          <div class="panel-heading">Paste your text for <b>words count</b>
          </div>
          <div class="panel-body">
            <textarea class="form-control" rows="10" ng-model="wordcounter"></textarea>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="panel panel-default">
          <div class="panel-heading">Words and characters</div>
          <ul class="list-group">
            <li class="list-group-item">Characters (with space)<span class="badge">{{wordcounter | count:true}}</span>
            </li>
            <li class="list-group-item">Characters (no space)<span class="badge">{{wordcounter | count:false}}</span>
            </li>
          </ul>
        </div>

      </div>
    </section>
  </div>

</body>

使用AngularJs计算没有空格的字符

3 个答案:

您只能替换一个空格

没有正则表达式