Count chars without spaces with AngularJs

Question

I need to count chars of a text with and with out spaces.

This is my attemp, but count the text without only the first space.

<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/

@DylanMeeus "This is an example": 18 chars including spaces "This is an example": 14 chars excluding spaces But my script return 17 for the second condition — WalterV, Aug 09 '16 at 15:32
Which is correct. It is 18 characters if you include the space. Oh but now I see, the 'no space' is wrong — Dylan Meeus, Aug 09 '16 at 15:32
You need to use regular expression to replace all spaces from the string. try the below code ```wordcounter.replace(/\s/g, '').length``` will give you the length without spaces — Sudharsan Selvaraj, Aug 09 '16 at 15:34

score 4 · Accepted Answer · answered Aug 09 '16 at 15:34

You only replace one space

Without regex

The problem is that currently, you are only replacing one space instead of all the spaces in the string. One way you can solve this is by splitting the string by all spaces that are in the string str.split(" "); and then joining them together. (glueing the words together again without the space) with join.

Change your binding for the counter without spaces like this {{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>

score 2 · Answer 2 · answered Aug 09 '16 at 15:37

2

You could go with a regex to also get tab etc.

wordcounter.replace(/\s/g, "")

answered Aug 09 '16 at 15:37

Fuzzzzel

1,733
3
23
37

And you could try the split-join way as described here http://stackoverflow.com/questions/3794919/replace-all-spaces-in-a-string-with and in the answer of @Dylan Meeus – Fuzzzzel Aug 09 '16 at 15:39

score 0 · Answer 3 · answered Aug 09 '16 at 16:02

You can also use an Angular custom filter to accomplish this.

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>

Count chars without spaces with AngularJs

3 Answers3

You only replace one space

Without regex