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

我想用JavaScript逐字打印我的文本。通过将jQuery转换为纯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);

我尝试用

innerHTML

和

textContent

替换

innerText

，但是新行转义字符

\n

不起作用，而是在转到新行时打印一个简单的空格

输出：

Hellothislineisprintingletterbyletter
hellothislinetooisprintingletterbyletter,

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

---

请帮我解决这个问题。

您可以将

标记与
文本内容
和
空白：预包装
：


let showText=函数（目标、消息、索引、间隔）{
if（索引<消息长度）{
document.querySelector（target.textContent++=message[index++]；
setTimeout（函数（）{
showText（目标、消息、索引、间隔）；
}，间隔）；
}
}
showText（“#msg”，“您好，这行正在逐字打印\n您好，这行也在逐字打印，”，0，20）
code{
空白：预包装
}
与CertainPerformance建议的方法不同的一种方法是对文本进行切片


let showText=函数（目标、消息、索引、间隔）{
if（索引<消息长度）{
document.querySelector（target）.textContent=message.slice（0，索引）；
setTimeout（函数（）{
showText（目标、消息、索引+1、间隔）；
}，间隔）；
}
}
showText（“#msg”，“您好，这行正在逐字打印\n您好，这行也在逐字打印，”，0，20）
div{
空白：预包装；
}
也许你应该试试这种循环，一个字母一个字母地打印出来

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

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

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