Identify line counts and hyphenated lines in a text box with the help of regular expressions

Question

Identify line counts and hyphenated lines in a text box with the help of regular expressions

I have been struggling to find a solution to the problem of excluding lines starting with double hyphens when using regular expressions. I need to count single lines separately and double hyphenated lines separately, and display them outside the text area.

While I have managed to count each line successfully, I am unsure about how to ignore the hyphens in order to achieve an accurate count using regular expressions.

Additionally, I am facing difficulties in appending the code inside a span item as it seems to remove the text of the item element.

Below is my code snippet along with a sample image: https://i.sstatic.net/2QJQB.jpg

$(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>

javascript jquery html css

Answer 1

Answer №1

Start counting

let groupCounter = 0;
let itemCounter = 0;

Fetch the input text array

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

Iterate through all elements in the array and check the first two symbols. If it is --, then increment groupCounter; otherwise, increment itemCounter

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

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

.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 2

Start counting

let groupCounter = 0;
let itemCounter = 0;

Fetch the input text array

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

Iterate through all elements in the array and check the first two symbols. If it is --, then increment groupCounter; otherwise, increment itemCounter

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

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

.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 3

Answer №2

While your code works well overall, there is a small issue that I have noticed. If you input a word with double hyphens -- or without them, it increments both the groupItems and listItems by +1. This may not be the desired behavior. When starting a group name with --, the count should go up for groups instead of items.

$(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);
      } if (arrayOfItems[i][0] === '.'){ // You can modify this condition to suit your needs, such as looking for numbers, letters, or expressions that start with a certain character.
        itemsCount += 1;
        items.text("Items: " + itemsCount);
      }
    }
});
});

Answer 4

While your code works well overall, there is a small issue that I have noticed. If you input a word with double hyphens -- or without them, it increments both the groupItems and listItems by +1. This may not be the desired behavior. When starting a group name with --, the count should go up for groups instead of items.

$(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);
      } if (arrayOfItems[i][0] === '.'){ // You can modify this condition to suit your needs, such as looking for numbers, letters, or expressions that start with a certain character.
        itemsCount += 1;
        items.text("Items: " + itemsCount);
      }
    }
});
});

Identify line counts and hyphenated lines in a text box with the help of regular expressions

Answer №1

Answer №2

Similar questions

Establishing a website tailored specifically to each city's needs and interests, such as city1.example.com and city2

The page may experience some issues in Firefox, but it functions properly in Chrome

Display a featherlightbox popup when the page loads

establish connections within dynamic data table entries

Enlarging the modal overlay

unable to connect a value with the radio button

Passing an object in an ajax call to a function: a comprehensive guide

Implementing AngularJS to include an HTML page as a widget

Tips for creating a line break in extendscript for Adobe Indesign

Numerous applications of a singular shop within a single webpage

Could it be a problem with collision detection or an issue in my

"Why does the React useState array start off empty when the app loads, but then gets filled when I make edits to the code

Resize a div within another div using overflow scroll and centering techniques

Encountering issues with pipes and ngModel functionality in Angular causing errors

Place the element at the bottom of the row above

If the span id includes PHP data that contains a certain phrase

Unable to locate the requested document using the provided query string parameter

The mat-table's data source is failing to refresh and display the latest

Creating an expandable search box that overflows other content: A step-by-step guide

Vuetify: the item-text attribute causing issues with v-combobox