Create an array of X number of words from javascript String

Question

Hello Stack community,

I am trying to acheive a simple javascript function to first count the total number of words from a given string value.

After this, I wan't to store X number of words into an array to be able to loop with additionnal html elements arround it.

For exemple, I have this 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.

Here is the code I am actually working on. (I just took the required part).

// Var for Word max
    var wordsMaxFirstPage = 40;
    var wordsMaxOthersPages = 50;

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

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

    // Creat Array of the comment splits by 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 build 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 place where things get complicated to understand for me is where I build the array. Yes I know, I use substring Method and this method actually works with caracters.

My question is simple. Is there any way to build the array with a regex function or am I juste missing something very simple?

can you provide jsfiddle?

Grundy
– Grundy

2015-08-31 18:44:57 +00:00
Commented Aug 31, 2015 at 18:44 — Grundy
– Grundy, Commented Aug 31, 2015 at 18:44
Here is the jsfiddle : jsfiddle.net/gbb2ae4g/4

Patrice Poliquin
– Patrice Poliquin

2015-08-31 19:01:07 +00:00
Commented Aug 31, 2015 at 19:01 — Patrice Poliquin
– Patrice Poliquin, Commented Aug 31, 2015 at 19:01

Lukasz M · Accepted Answer · 2015-09-01 20:15:16Z

2

Actually You are already creating the array, but not saving it ;).

The split() function in Javascript splits the given string and creates an array with the resulting pieces.

I would suggest replacing this line:

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

With these two:

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

Please let me know if this solves Your issue.

UPDATE

My first suggestion would reault in giving You a single word in each of the chunks elements, which is not a solution in Your case.

The issue with the original code You posted is that thie loop building the array doesn't take each of the words' lengths into consideration.

You can build the array like this:

// split the text into separate words
var words = defaultField.text().split(' ');

//read total number of words
var totalWordsCount = words.length;
//maximum number of words per page allowed, set to 10 as example
var wordsCountPerPage = 10;
var chunks = [];

// in each iteration "i" points to the first word in the new page, so it's 0, 11, 21 etc.
for (var i = 0; i < totalWordsCount; i+=wordsCountPerPage) {
    //'slice()' function gets words for the current line, then they're concatenated with 'join()'
    //'Math.min()' function is used to make sure that appropriate number of words are taken for the last page
    chunks.push(words.slice(i, Math.min(i+wordsCountPerPage, totalWordsCount)).join(' '));
}

I've updated the jsFiddle and it seems to work as expected. Please let me know if this solves Your issue.

UPDATE II

In the comments You also asked to detect end of the last sentence before words limit per page is reached in order ot display full sentences on page whenever possible. This jsFiddle is updated to work this way: http://jsfiddle.net/gbb2ae4g/17/ . The idea is to find expected end of page in a way similar to the previous version and then search for the last word ending with a dot and adjust number of words on page accordingly. This code assumes that dot is always followed by a space character unless it's the last character in the text.

I've also updated the code given as the previous answer (first UPDATE), because it performed end of page check incorrectly.

edited Sep 1, 2015 at 20:15

answered Aug 31, 2015 at 18:49

Lukasz M

5,7532 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Patrice Poliquin Over a year ago

Actually, if I use your answer, I get to save my chunks array but It gives me one line per word in my array. In my code, I want 40 words per line in the array.

Patrice Poliquin Over a year ago

If you go see my latest jsFiddle, you will see that I do save the array, but it makes one word per line.

Lukasz M Over a year ago

I've updated the answer with a link to updated jsFiddle.

Patrice Poliquin Over a year ago

I see that you are on a pretty good way to manage to solve this problem Lukasz M. I pushed the test somehow a little futher test with bigger values. Exemple : a 1000 words String cuted in 200 words blocks. In this current update http://jsfiddle.net/gbb2ae4g/16/, you see that the last instance of the Array gets the 200 words. The orthers seems to cut right after the first .

Lukasz M Over a year ago

I forgot to break the loop after the first dot is found, so it continued until only one sentence left in a chunk. Here's the corrected version: jsfiddle.net/gbb2ae4g/17.

|

Nati323 · Accepted Answer · 2015-08-31 18:50:24Z

0

If I understand you right, what you want is to cut number of words from a string

If it is, So read about the split method at MDN SPLIT METHOD.

As you can see there, the split method have a limit parameter, so the next code will work:

var x = "bla bla bla bla bla";
var splits = x.split(" ",3);

Then splits will be an array that contain the values bla,bla,bla

answered Aug 31, 2015 at 18:50

Nati323

961 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Create an array of X number of words from javascript String

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related