javascript - 如何通过 Javascript 在屏幕上显示前 20 个词然后显示下 20 个词？

Question

我在单个标签中有一个字符串，如下例所示，我想在屏幕上显示前 20-25 个单词，然后是下一个，依此类推。当显示 20 个单词时，必须隐藏其余文本。

<p>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.</p>

所以我想要的结果是第一个显示

Lorem ipsum dolor sit amet,

然后

conectetur adipiscing elit

.......

tincidunt augue interdum.

当它结束时，它会再次从第一句开始，依此类推。

Answer 1

很简单:

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>

我建议使用更智能的算法来获取单词(按空格分隔可能并不总是合适的)