Form a collection of X amount of words using a string in JavaScript

Question

Form a collection of X amount of words using a string in JavaScript

Hello amazing Stack community,

I am currently striving to create a straightforward JavaScript function that can accurately count the total number of words from a given string value.

Furthermore, I aim to store a specific number, X, of words into an array in order to loop through them with additional HTML elements surrounding each word.

For example, let's consider the following string:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat sollicitudin lacus, nec pulvinar quam scelerisque at. Phasellus ut tellus scelerisque, fringilla ligula a, commodo odio. Aenean mattis eros sed purus iaculis, at pellentesque ligula luctus. Pellentesque luctus augue ut quam consequat rhoncus. In at dolor sed ipsum ullamcorper fermentum. Pellentesque porta convallis nisl vitae cursus. Maecenas luctus libero sit amet efficitur consequat. Suspendisse nec luctus dolor. Fusce sit amet scelerisque erat. Aenean ac tristique nisl. Etiam in est purus. In magna nunc, viverra nec ante quis, aliquam venenatis sem.

Below is the snippet of code I am currently working on:

// Variables for Maximum Words
    var wordsMaxFirstPage = 40;
    var wordsMaxOthersPages = 50;

    // Default field (Example String)
    var defaultField = $(this).find('.c_6937 .textarea .value');

    // Count the number of words in this form
    var countLengthOfCommentPage = defaultField.text().split(' ').length;

    // Create an array of comments split by the maximum words per page
    var chunks = [];
    for (var i = 0, charsLength = countLengthOfCommentPage; i < charsLength; i += wordsMaxFirstPage) {
        chunks.push(defaultField.html().substring(i, i + wordsMaxOthersPages));
    }

    // Execute array to generate the new HTML
    for (var key in chunks) {
        if (chunks.hasOwnProperty(key)) {
            $(this).find('.c_6937').append('<div class="value line_'+key+'" style="font-size: 20px; margin: 0px; line-height: 26px; font-family: Times, serif; font-weight: normal;">' + chunks[key] + '</div>');

            console.log(key + " -> " + chunks[key]);
        }
    }

    // Debug
    console.log(countLengthOfCommentPage);

The part that confuses me is when I am constructing the array. I am aware that I am using the substring method which operates with characters.

So, here's my question – is there a simpler way to build the array using a regex function or am I overlooking a straightforward solution?

javascript arrays regex

Answer 1

Answer №1

It appears that you are already creating an array, but not saving it properly ;).

Using the `split()` function in Javascript allows you to split a given string and create an array with the resulting pieces.

Here is a better way to handle the array creation:

var chunks = defaultField.text().split(' ');
var countLengthOfCommentPage = chunks.length;

If you are facing any issues, please let me know if this solution works for you.

UPDATE

Upon further inspection, it seems that my initial suggestion would result in having only one word in each element of the `chunks` array, which is not suitable for your situation.

The problem with your original code lies in the loop not taking into account the lengths of each word in the array.

Here is an updated approach to building the array:

var words = defaultField.text().split(' ');
var totalWordsCount = words.length;
var wordsCountPerPage = 10;
var chunks = [];

for (var i = 0; i < totalWordsCount; i+=wordsCountPerPage) {
    chunks.push(words.slice(i, Math.min(i+wordsCountPerPage, totalWordsCount)).join(' '));
}

I have made adjustments in the code and tested it in the jsFiddle provided. Please let me know if this resolves the issue.

UPDATE II

In response to your request in the comments, I have updated the code in the jsFiddle to detect the end of the last sentence before reaching the word limit per page in order to display full sentences whenever possible. You can check out the updated version here: http://jsfiddle.net/gbb2ae4g/17/. The code now considers the presence of a period and adjusts the number of words on the page accordingly.

I have also corrected the end of page check in the previous version of the code. Thank you for bringing that to my attention.

Answer 2

It appears that you are already creating an array, but not saving it properly ;).

Using the `split()` function in Javascript allows you to split a given string and create an array with the resulting pieces.

Here is a better way to handle the array creation:

var chunks = defaultField.text().split(' ');
var countLengthOfCommentPage = chunks.length;

If you are facing any issues, please let me know if this solution works for you.

UPDATE

Upon further inspection, it seems that my initial suggestion would result in having only one word in each element of the `chunks` array, which is not suitable for your situation.

The problem with your original code lies in the loop not taking into account the lengths of each word in the array.

Here is an updated approach to building the array:

var words = defaultField.text().split(' ');
var totalWordsCount = words.length;
var wordsCountPerPage = 10;
var chunks = [];

for (var i = 0; i < totalWordsCount; i+=wordsCountPerPage) {
    chunks.push(words.slice(i, Math.min(i+wordsCountPerPage, totalWordsCount)).join(' '));
}

I have made adjustments in the code and tested it in the jsFiddle provided. Please let me know if this resolves the issue.

UPDATE II

In response to your request in the comments, I have updated the code in the jsFiddle to detect the end of the last sentence before reaching the word limit per page in order to display full sentences whenever possible. You can check out the updated version here: http://jsfiddle.net/gbb2ae4g/17/. The code now considers the presence of a period and adjusts the number of words on the page accordingly.

I have also corrected the end of page check in the previous version of the code. Thank you for bringing that to my attention.

Answer 3

Answer №2

To summarize your request, you are looking to reduce the number of words in a given string

If this is the case, I recommend exploring the split method on the following link: MDN SPLIT METHOD.

By utilizing the limit parameter within the split method as demonstrated in the code snippet below:

var sampleString = "foo foo foo foo foo";
var wordArray = sampleString.split(" ", 3);

The resulting wordArray will store the values foo,foo,foo

Answer 4

To summarize your request, you are looking to reduce the number of words in a given string

If this is the case, I recommend exploring the split method on the following link: MDN SPLIT METHOD.

By utilizing the limit parameter within the split method as demonstrated in the code snippet below:

var sampleString = "foo foo foo foo foo";
var wordArray = sampleString.split(" ", 3);

The resulting wordArray will store the values foo,foo,foo

Form a collection of X amount of words using a string in JavaScript

Answer №1

Answer №2

Similar questions

"Switching a div's visibility when a link is clicked

Converting an Angular1 App into a VueJs app: A step-by-step guide

issue with data binding in ons-dialog

"Embed" three.js within SmartMS

Begin with the constant element within the array initialization

Exploring the capabilities of data processing in Node.js

What is the best way to find information in a multi-page table?

Even with React.memo(), functional components continue to trigger re-renders

Establish a connection to a regular socket by utilizing WebSocket technology

Mistakenly appearing at the top of the window instead of the bottom of the window

There is an array present with data filled in, but unfortunately, I am unable to retrieve specific elements

Don't forget to keep track of when the user has closed

Tips for surviving a server restart while using sequelize with a postgres database and handling migrations

What is the process of updating values in an object that is part of an array?

jQuery - delete a single word that is case-sensitive

Error: The function "execute" has not been declared

Can you explain the purpose of App.hiddenDivs in jQuery code snippet provided?

Issue with the dynamic updating of props

Issue with triggering ReactJS onClick function accurately

Honing in on JavaScript Media Queries within React