3

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/

5
  • I don't understand your question :/ Commented Aug 9, 2016 at 15:30
  • @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
    Commented Aug 9, 2016 at 15:32
  • 1
    Which is correct. It is 18 characters if you include the space. Oh but now I see, the 'no space' is wrong Commented Aug 9, 2016 at 15:32
  • @DylanMeeus exactly
    – WalterV
    Commented Aug 9, 2016 at 15:33
  • 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 Commented Aug 9, 2016 at 15:34

3 Answers 3

4

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>

0
2

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

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

1
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.