如何从 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,

我尝试用innerHTML和textContent替换innerText ，但是新行转义字符\\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

对某些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)
    }
}

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