J'ai besoin de compter les caractères d'un texte avec et sans espaces.

Ceci est mon attemp, mais comptez le texte sans seulement le premier espace.

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

3
WalterV 9 août 2016 à 18:28

3 réponses

Meilleure réponse

Vous ne remplacez qu'un seul espace

Sans regex

Le problème est qu'actuellement, vous ne remplacez qu'un seul espace au lieu de tous les espaces de la chaîne. Vous pouvez résoudre ce problème en divisant la chaîne par tous les espaces qui se trouvent dans la chaîne str.split(" ");, puis en les joignant. (coller à nouveau les mots sans l'espace) avec join.

Modifiez votre reliure pour le compteur sans espaces comme celui-ci {{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>
4
Dylan Meeus 9 août 2016 à 15:34

Vous pouvez également utiliser un filtre personnalisé angulaire pour ce faire.

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>
0
10100111001 9 août 2016 à 16:02

Vous pouvez aller avec une expression régulière pour obtenir également l'onglet, etc.

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

2
Fuzzzzel 9 août 2016 à 15:37