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 — wav
– wav, Commented Aug 9, 2016 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
– Dylan Meeus, Commented Aug 9, 2016 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
– Sudharsan Selvaraj, Commented Aug 9, 2016 at 15:34

Dylan Meeus · Accepted Answer · 2016-08-09 15:34:46Z

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>

Fuzzzzel · Accepted Answer · 2016-08-09 15:37:22Z

2

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

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

answered Aug 9, 2016 at 15:37

Fuzzzzel

1,7833 gold badges24 silver badges40 bronze badges

1 Comment

Fuzzzzel Over a year ago

And you could try the split-join way as described here stackoverflow.com/questions/3794919/… and in the answer of @Dylan Meeus

10100111001 · Accepted Answer · 2016-08-09 16:02:53Z

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>

Collectives™ on Stack Overflow

Count chars without spaces with AngularJs

3 Answers 3

You only replace one space

Without regex

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

You only replace one space

Without regex

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related