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>

Rent Charter Buses Company
READ ALSO
Ajax, PHP and Smarty - spam bot defense mechanism

Ajax, PHP and Smarty - spam bot defense mechanism

I am trying to build an anti spam bot mechanism in a form, using a jQuery UI slider along with a honey pot input fieldBut up to this point we are still receiving spam messages

333
Store JS toggle in localStorage with animation

Store JS toggle in localStorage with animation

I want this to work with slidetoggle, but can't get it working:

380
Do jquery styles change after the css class changes?

Do jquery styles change after the css class changes?

I am new to jquery, and I was looking at thecss() function

368
Disable Dates within given ranges in jquery datepickers from PHP and Mysql

Disable Dates within given ranges in jquery datepickers from PHP and Mysql

This is my first post so excuse me for any mistakes

294