Textarea Count Lines, Count hyphenated Lines using regular expression

348

April 30, 2017, at 02:39 AM

I have been trying to figure out the issue with using regular expressions to ignore lines starting with double hyphens and count the single lines as separate and double hyphenated lines counted as separately and display outside the text area.

I have tried and got success with counting the each line but ignoring hyphens and counting I have no idea on how can I do that using regular expressions.

On another side, I want to append the code inside of a span Item buts it's removing the text of item element.

Here is my code and sample Image.

$(document).ready(function(){ 
     
    var items = $('#items'); 
    var groups = $('#groups'); 
     
    $('#ingredients_list').keydown(function(e) { 
        newLines = $(this).val().split("\n").length; 
        items.text(newLines); 
    }); 
});

.ingredients__section { 
  padding: 20px; 
  width: 100%; 
  box-sizing: border-box; 
} 
 
.ingredients__section textarea { 
  width: 100%; 
} 
 
.ingredients__section h2 { 
  color:#0433a7; 
  margin-bottom: 20px; 
} 
 
.ingredients__header { 
  display: table; 
  width: 100%; 
  table-layout:fixed; 
} 
.ingredients__title { display: table-cell; } 
.ingredients__countinfo { display: table-cell; text-align:right; } 
 
.item-count, 
.group-count { padding: 5px 15px; background-color:#e4ebef; margin-left: 5px; font-size: 14px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="ingredients__section"> 
<div class="ingredients__header"> 
<div class="ingredients__title"><h2>INGREDIENTS</h2></div> 
<div class="ingredients__countinfo"> 
  <span class="group-count" id="groups">Groups:</span> 
  <span class="item-count" id="items">Items:</span> 
</div> 
</div> 
<form> 
    <textarea id="ingredients_list" rows="15"></textarea><br /> 
</form> 
 
</div>

Answer 1

Initialize counters

var groupsCount = 0;
var itemsCount = 0;

Get array of entered text

var arrayOfItems = $(this).val().split("\n");

Run for all elements in array and check first two symbols. If it is -- then groupsCount++ else itemsCount++

for (var i=0; i<arrayOfItems.length; i++) {
  if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') {
    groupsCount += 1;
    itemsCount -= 1;
    groups.text("Groups: " + groupsCount);
  } else {
    itemsCount += 1;
    items.text("Items: " + itemsCount);
  }
}

$(document).ready(function(){ 
     
    var items = $('#items'); 
    var groups = $('#groups'); 
     
    $('#ingredients_list').keypress(function(e) { 
        var groupsCount = 0; 
        var itemsCount = 0; 
        var arrayOfItems = $(this).val().split("\n"); 
        console.log(arrayOfItems); 
        for (var i=0; i<arrayOfItems.length; i++) { 
          if (arrayOfItems[i][0] === '-' && arrayOfItems[i][1] === '-') { 
            groupsCount += 1; 
            groups.text("Groups: " + groupsCount); 
          } else { 
            itemsCount += 1; 
            items.text("Items: " + itemsCount); 
          } 
        } 
    }); 
});

.ingredients__section { 
  padding: 20px; 
  width: 100%; 
  box-sizing: border-box; 
} 
 
.ingredients__section textarea { 
  width: 100%; 
} 
 
.ingredients__section h2 { 
  color:#0433a7; 
  margin-bottom: 20px; 
} 
 
.ingredients__header { 
  display: table; 
  width: 100%; 
  table-layout:fixed; 
} 
.ingredients__title { display: table-cell; } 
.ingredients__countinfo { display: table-cell; text-align:right; } 
 
.item-count, 
.group-count { padding: 5px 15px; background-color:#e4ebef; margin-left: 5px; font-size: 14px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="ingredients__section"> 
<div class="ingredients__header"> 
<div class="ingredients__title"><h2>INGREDIENTS</h2></div> 
<div class="ingredients__countinfo"> 
  <span class="group-count" id="groups">Groups:</span> 
  <span class="item-count" id="items">Items:</span> 
</div> 
</div> 
<form> 
    <textarea id="ingredients_list" rows="15"></textarea><br /> 
</form> 
 
</div>