javascript - 如何从 JavaScript 中逐个字母打印多行文本？

Question

我想使用 JavaScript 一个字母一个字母地打印我的文本。我尝试了以下答案https://stackoverflow.com/a/7265613/7920589，它在 jQuery 中，通过将其转换为纯 JavaScript。

     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,

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

输出：

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

请帮我解决一下这个。

Answer 1

您可以将<code>标签与textContentand结合使用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

对CertainPerformance 提出的替代方案是对文本进行切片。

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)
    }
}

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