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

您需要检查char是否为空格，如果是，则必须添加&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; 
        }
    }
}

Answer 3

你正在做这样的事吗？

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 4

按照我的理解，减慢了间隔，我能够看到你的问题以及你所描述的问题。

问题在于输出一个你想到的空间，但它只是一个有洞察力的问题。因为它是一个空间，我们的眼睛不会注意到很多变化，所以看起来好像光标悬挂着。实际上，序列是：输出字符，暂停，输出空间，暂停，输出下一个字符。

为此，有两个简单的解决方案：

1。更改空白区设置

如果您希望光标在空格上移动，只需在#magic CSS中添加一行：white-space:pre-wrap;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2。空格时，再次输出

如果您不关心光标随空间移动而只想移除暂停，一种方法是检查输出的字符，如果是空格字符，只需再次调用该函数输出下一个字符字符：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;