How to display first 20 words on screen then next 20 words through Javascript?

Pretty easy:

const sentence = document.getElementById("sentence");
const words = sentence.innerText.split(" ");

let sentences = [];

words.forEach((word, index) => {
  if ((index + 1) % 20 == 0) sentences.push("\0")
  sentences.push(word)
})

sentences = sentences.join(" ").split(" \0 ")

let index = 0;

sentence.innerText = sentences[index];
index++;

setInterval(() => {
  if (!sentences[index]) index = 0;
  sentence.innerText = sentences[index];
  index++;
}, 1000) // change to whatever you like

<p id="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas integer eget aliquet nibh praesent. Rhoncus aenean vel elit scelerisque. Proin sed libero enim sed. Cum sociis natoque
  penatibus et. Accumsan sit amet nulla facilisi morbi tempus. Habitasse platea dictumst quisque sagittis purus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. In massa tempor nec feugiat nisl pretium. Sollicitudin tempor id eu nisl nunc mi
  ipsum faucibus. Platea dictumst vestibulum rhoncus est. Magna ac placerat vestibulum lectus. Ultrices neque ornare aenean euismod elementum. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Accumsan tortor posuere ac ut consequat. Commodo
  nulla facilisi nullam vehicula. Ut morbi tincidunt augue interdum.</p>

I suggest using a smarter algorithm to get the words (splitting by spaces might not always be appropriate)

Steps:

1. Take the entire string and split it into an array by [SPACE]

2. Divide the array into smaller arrays containing no more than 20 elements each

3. Cycle through those smaller arrays and, each time:

   3.1 join the elements of the smaller array into a single [SPACE]-separated string

   3.2 display that string on screen

   3.3 remove that string from the screen

MDN is a good javascript reference which will help you build all of these steps.

TLDR;

1. Split the sentences into an array of words
2. Extract sub array(20 words)
3. Join the extracted array

Logical Process

Assuming the following HTML,

<p id="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas integer eget aliquet nibh praesent. Rhoncus aenean vel elit scelerisque. Proin sed libero enim sed. Cum sociis natoque penatibus et. Accumsan sit amet nulla facilisi morbi tempus. Habitasse platea dictumst quisque sagittis purus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. In massa tempor nec feugiat nisl pretium. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Platea dictumst vestibulum rhoncus est. Magna ac placerat vestibulum lectus. Ultrices neque ornare aenean euismod elementum. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Accumsan tortor posuere ac ut consequat. Commodo nulla facilisi nullam vehicula. Ut morbi tincidunt augue interdum.</p>

var sentence = document.getElementById("sentence");
var words = sentence.split(" "); // split by a space(words seperator)

var firstTwentyWords = words.slice(0, 20); // create a sub-array of 20 words
var firstTwentyWordsJoined = firstTwentyWords.join(" ");

var nextTwentyWords = words.slice(20, 40); // create a sub-array of 20 words
var nextTwentyWordsJoined = firstTwentyWords.join(" ");

console.log(firstTwentyWordsJoined, nextTwentyWordsJoined); // handle the joined words in your own way.

Split the string by space into an array, loop through the array and append the first 20/25 words as needed

if (i > 0 && i % 25 == 0)
    break line "br"