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>
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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
I want this to work with slidetoggle, but can't get it working:
I am new to jquery, and I was looking at thecss() function
This is my first post so excuse me for any mistakes