Javascript not recognizing space in string as a character

Question

I am making a typewriter effect from an array of strings, some of which have spaces in them. In strings with spaces, the cursor pauses on the last letter of each word and then skips to the first letter of the next word, instead of advancing with the space. The character counter, however, advances as expected on the spaces.

How can I fix this? I assume I need to do something with

&nbsp;

but I've tried everything I can think of.

The cursor is just a right border on a blank 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>

Take a look at CSS white-space.

forrestmid
– forrestmid

2017-03-18 16:00:03 +00:00
Commented Mar 18, 2017 at 16:00 — forrestmid
– forrestmid, Commented Mar 18, 2017 at 16:00

XerXeX · Accepted Answer · 2017-03-18 16:01:33Z

1

Try this

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 = "&nbsp;";}
    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; 
        }
    }
}

answered Mar 18, 2017 at 16:01

XerXeX

7904 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XerXeX Over a year ago

Great! The problem is not with javascript but with HTML. HTML does not print trailing spaces.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Slowing down the interval, I was able to see your issue and the problem what you were describing, as I understand it.

The issue is with outputting a space as you guessed, but it's only a perceptive issue. Because it's a space, our eyes don't notice much a change, so it appears as though the cursor is hanging. In reality, the sequence is: output character, pause, output space, pause, output next character.

For this there are two simple solutions:

1. Change White-space Setting

If you want your cursor to move on a space, simply add one line to your #magic CSS: 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. When Space, Output Again

If you do not care about the cursor moving with the space and only want to remove the pause, one method is to check the outputted character and if it's a space character, just call the function again to output the next character:

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>

undertrox · Accepted Answer · 2017-03-18 17:06:17Z

1

You need to check if the char is a space, if so, you have to add &nbsp instead of the space

function updateText(){
    var char = words[word_counter][character_counter++];
    if (char == " "){
        char = "&nbsp;";
    }
    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; 
        }
    }
}

answered Mar 18, 2017 at 17:06

undertrox

113 bronze badges

Comments

holi-java · Accepted Answer · 2017-03-18 16:07:54Z

are you doing something like this?

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>

Collectives™ on Stack Overflow

Javascript not recognizing space in string as a character

4 Answers 4

1 Comment

1. Change White-space Setting

2. When Space, Output Again

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1. Change White-space Setting

2. When Space, Output Again

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related