Question

我想使用JavaScript逐字母打印文本。我尝试通过将以下答案https://stackoverflow.com/a/7265613/7920589转换为纯javascript来实现jQuery。

     let showText = function (target, message, index, interval) {
            if (index < message.length) {
                document.querySelector(target).innerText += message[index++];

                setTimeout(function () { showText(target, message, index, interval); }, interval);
            }
            }
     showText("#msg", "Hello this line is printing letter by letter\n hello this line too is printing letter by letter,", 0, 200);

我尝试了这段代码，但是尽管它逐个字母地打印消息，但它完全忽略了消息中的空格。

输出：

Hellothislineisprintingletterbyletter
hellothislinetooisprintingletterbyletter,

我尝试用innerText和innerHTML替换textContent，但是新的换行符\n不起作用，而是打印一个简单的空格，而不是换一个新的线。

输出：

Hello this line is printing letter by letter hello this line too is printing letter by letter,

请帮助我。

Answer 1

您可以将<code>标记与textContent和white-space: pre-wrap结合使用：

let showText = function(target, message, index, interval) {
  if (index < message.length) {
    document.querySelector(target).textContent += message[index++];

    setTimeout(function() {
      showText(target, message, index, interval);
    }, interval);
  }
}
showText("#msg", "Hello this line is printing letter by letter\n hello this line too is printing letter by letter,", 0, 20);

code {
  white-space: pre-wrap
}

<code id="msg"></code>

Answer 2

SecretPerformance提出的一种替代方法是对文本进行切片。

let showText = function(target, message, index, interval) {
  if (index < message.length) {
    document.querySelector(target).textContent = message.slice(0, index);

    setTimeout(function() {
      showText(target, message, index + 1, interval);
    }, interval);
  }
}
showText("#msg", "Hello this line is printing letter by letter\n hello this line too is printing letter by letter,", 0, 20);

div {
    white-space: pre-wrap;
}

<div id="msg"></div>

Answer 3

也许您应该尝试这种循环以逐个字母打印

<input type="text" id="input1">
<button onclick="his()">click</button>

和js

function his() {
    let input = document.getElementById("input1").value
    for (let index of input) {
        console.log(index)
    }
}

我只是发现了这种类型的循环，它的语法有点短。也许这可以帮助

如何从JavaScript逐字母打印多行文本？

3 个答案: