javascript - 如何检测纯JS中的换行符

Question

我有一些这样的代码可以实现打字机效果。作者以这样一种方式实现了它，即在每个空间它都会暂停并出现一个垂直光标。在我的情况下，这个选项不合适，我想让这个暂停不是在每个空格上，而是在每个换行符上。我尝试使用\n而不是' '在条件下使用，但没有任何效果。你能帮我吗？

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].classList.add('cursor');
    }else{
        timeout = 150;
    }

    if (count < text.length - 1){
        setTimeout(function() {
            spans[count].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>

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 == ' ' || spans[count].innerHTML == '  '){
        timeout = Math.floor(Math.random() * Math.floor(1000));
        spans[count].classList.add('cursor');
    }else{
        timeout = 150;
    }

    if (count < text.length - 1){
        setTimeout(function() {
            spans[count].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>

标签： javascript

Answer 1

timeout当你遇到一个角色时尝试设置随机数\n实际上是有效的。显然不起作用的是设置cursor课程。您实际上是在尝试将其应用于换行符本身，而不是句子后的空格。\n毕竟，是带有 . 的识别字符spans[count]。

我已更新您的 js，将其修改为spans[count-1].

我还添加了一个迭代，确保cursor从每个字母中删除类，而不会使光标出现在不需要的情况下。

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() {

            //IE compatibleArray prototype method to iterate through NodeList:
            Array.prototype.forEach.call(spans, function (e) {
                e.classList.remove('cursor'); 
             }); 

            //Otherwise plain loop:
            //for (var e = 0; e < spans.length; e++)
            //    spans[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>