Javascriptが文字列の文字列内の空白を認識しない

Question

文字列の配列からタイプライターエフェクトを作成しています。その中にはスペースが含まれています。スペースを含む文字列では、カーソルは各単語の最後の文字で一時停止し、スペースで前進するのではなく、次の単語の最初の文字にスキップします。しかし、キャラクターカウンターは、スペース上で予想どおり進んでいます。

どうすればこの問題を解決できますか？

  

私は何かをする必要があると思いますが、私は考えることができるすべてを試しました。

カーソルが空白のdivのちょうど右の境界である：

var words = ["fun", "exciting", "about not giving up", "being helpful", "being open"], 
 
    el = document.getElementById('magic'), 
 
    word_counter = 0, 
 
    character_counter = 0; 
 

 
function updateText() { 
 
    el.innerHTML = el.innerHTML + words[word_counter][character_counter++]; 
 
    if (character_counter == words[word_counter].length + 1) { 
 
    word_counter++; 
 
    character_counter = 0; 
 
    el.innerHTML = ''; 
 
    if (word_counter == words.length) { 
 
     word_counter = 0; 
 
    } 
 
    } 
 
} 
 

 
setInterval(updateText, 100);

#magic { 
 
    color: #777; 
 
    border-right: 1px solid #777; 
 
    padding-right: 7px; 
 
    display: inline; 
 
}

<div id="magic"></div>

Answer 1

この

var words = ["fun", "exciting", "about not giving up", "being helpful", "being open"], 
    el = document.getElementById('magic'), 
    word_counter = 0, 
    character_counter = 0; 

function updateText() 
{ 
    var nextChar = words[word_counter][character_counter++]; 
    if(nextChar == " ") {nextChar = " ";} 
    el.innerHTML = el.innerHTML+ nextChar; 
    if(character_counter == words[word_counter].length+1) 
    { 
     word_counter++;  
     character_counter = 0; 
     el.innerHTML = ''; 
     if(word_counter == words.length) { 
      word_counter = 0; 
     } 
    } 
} 

Answer 2

あなたはこのような何かをやっているお試しください！

var words = ["fun", "exciting", "about not giving up", "being helpful", "being open"], 
 
     el = document.getElementById('magic'), 
 
     word_counter = 0, 
 
     character_counter = 0; 
 

 
    function updateText() 
 
    { 
 
     el.innerHTML = el.innerHTML+words[word_counter][character_counter++]; 
 
     if(character_counter == words[word_counter].length) 
 
     { 
 
      word_counter=(word_counter+1)%words.length;  
 
      character_counter = 0; 
 
      
 
      el.innerHTML=!word_counter?'':el.innerHTML+ ' '; 
 
     } 
 
    } 
 
    
 
setInterval(updateText,100);

#magic{ 
 
    color: #777; 
 
    border-right: 1px solid #777; 
 
    padding-right: 7px; 
 
    display: inline; 
 
}

<div id="magic"></div>

Answer 3

間隔を遅く、私はそれを理解するように、私は、あなたが記述されたものを、あなたの問題と、問題を見ることができました。

問題は、推測したとおりにスペースを出力することですが、それは認識上の問題です。スペースなので、目にはあまり変化がないので、カーソルがぶら下がっているように見えます。実際には、シーケンスは：出力文字、一時停止、出力スペース、一時停止、次の文字を出力します。このため

2つの単純な解決策があります。

あなたのカーソルが、スペースに移動するだけで、あなたの#magic CSSに1行を追加したい場合は

の設定1.変更するホワイトスペース：white-space:pre-wrap;

var words = ["fun", "exciting", "about not giving up", "super-spaces…             …done","being helpful", "being open"], 
 
    el = document.getElementById('magic'), 
 
    word_counter = 0, 
 
    character_counter = 0; 
 

 
function updateText() { 
 
    
 
    var new_character = words[word_counter][character_counter++]; 
 
    el.innerHTML += new_character; 
 
    
 
    if (character_counter == words[word_counter].length + 1) { 
 
    word_counter++; 
 
    character_counter = 0; 
 
    el.innerHTML = ''; 
 
    if (word_counter == words.length) { 
 
     word_counter = 0; 
 
    } 
 
    } 
 
} 
 

 
setInterval(updateText, 100);

#magic { 
 
    color: #777; 
 
    border-right: 1px solid #777; 
 
    padding-right: 7px; 
 
    display: inline; 
 
    white-space:pre-wrap; 
 
}

<div id="magic"></div>

2.スペース、再び出力

カーソルがスペースを移動しているのを気にせず、一時停止だけを削除したい場合は、出力された文字をチェックし、スペース文字の場合は次の文字を出力するために関数を再度呼び出します。

var words = ["fun", "exciting", "about not giving up", "super-spaces…             …done", "being helpful", "being open"], 
 
    el = document.getElementById('magic'), 
 
    word_counter = 0, 
 
    character_counter = 0; 
 

 
function updateText() { 
 
    
 
    var new_character = words[word_counter][character_counter++]; 
 
    el.textContent += new_character; 
 
    
 
    if (character_counter == words[word_counter].length + 1) { 
 
    word_counter++; 
 
    character_counter = 0; 
 
    el.innerHTML = ''; 
 
    if (word_counter == words.length) { 
 
     word_counter = 0; 
 
    } 
 
    } 
 
    
 
    // Test for whitespace characters 
 
    if (/\s/.test(new_character)) { 
 
    updateText(); 
 
    return; 
 
    } 
 

 
} 
 

 
setInterval(updateText, 100);

#magic { 
 
    color: #777; 
 
    border-right: 1px solid #777; 
 
    padding-right: 7px; 
 
    display: inline; 
 
}

<div id="magic"></div>

Answer 4

、あなたが&nbsp代わりのスペース

function updateText(){ 
    var char = words[word_counter][character_counter++]; 
    if (char == " "){ 
     char = " "; 
    } 
    el.innerHTML += char; 
    if(character_counter == words[word_counter].length+1) 
    { 
     word_counter++;  
     character_counter = 0; 
     el.innerHTML = ''; 
     if(word_counter == words.length) { 
      word_counter = 0; 
     } 
    } 
} 

を追加する必要がありますので、場合は、charがスペースであるかどうかを確認する必要があります