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; 
        }
    }
}