IE 缩进两个而不是一个

Question

我有一些实现打字机效果的 JS 代码。但是，如果在 google chrome 上一切正常，那么在 IE 中为什么会出现额外的缩进。

在 chrome 的控制台中，有 2 个缩进，即 3 个，为什么总是多一个，这是一个错误吗？

let textBox = document.querySelector('.index-title-main h1'),
    text    = textBox.innerText,
    newHTML = '';

for(i = 0; i < text.length; i++){
    newHTML += '<span>'+text[i]+'</span>';
}
textBox.innerHTML = newHTML;

let spans   = textBox.querySelectorAll('span'),
    count   = 0,
    timeout = 0;

function typing_text(){
    spans[count].classList.add('visible');
    if(spans[count].innerText == '\n' || spans[count].innerHTML == '\n'){
        timeout = Math.floor(Math.random() * Math.floor(1000));
        spans[count-1].classList.add('cursor');
    
    }else{
        timeout = 150;
    }

    if (count < text.length - 1){
        setTimeout(function() {
            Array.prototype.forEach.call(spans, function (e) {
                e.classList.remove('cursor'); 
             }); 
            count ++;
            typing_text();
        }, timeout);
    }
}

typing_text();

body{
 background-color: #000;
}
.index-title-main{
  color: #fff;
  font-size: 25px;
  height: 290px;
  white-space: pre-wrap;
}
/* Animation */
.index-title-main h1 span {
    visibility: hidden;
}
.index-title-main h1 span.visible {
    visibility: visible;
}
.index-title-main h1 span.cursor {
    background: #34DEB4;
    width: 2px;
    animation: blinking 0.5s step-start infinite;
}

<div class="index-title-main"><h1>Text 1 <br>Text 2, <br>Text 3</h1></div>

谷歌浏览器：

Internet Explorer 11：

Answer 1

我赞成 CBroe 的评论。它在 IE 中获取 \r\n 这会导致问题。如果将 \r\n 替换为 \n，则它可以在 IE 和 Chrome 中正常运行。

您可以使用以下方法将 \r\n 替换为 \n：

text = text.replace(/(?:\\[rn]|[\r\n]+)+/g, "\n");

在 IE 11 中的结果：