Making a new line in js string

Question

I want to make a new line between Editing and Become. I tried \n but it didn't work Any clue?

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";

function typeWriter(){
    if(i < text.length){
        document.getElementById("text").innerHTML += text.charAt(i);
        i++;
        setTimeout(typeWriter, 50);
    }
}
typeWriter();

Does this answer your question? [How do I create a new line in Javascript?](https://stackoverflow.com/questions/5758161/how-do-i-create-a-new-line-in-javascript) — WOUNDEDStevenJones, Jun 02 '20 at 15:34
Yes, `\n` is one possible way, but I can't see any `\n` in your code. Also, remember that HTML doesn't render line feeds, in case that's what you're asking. — Álvaro González, Jun 02 '20 at 15:37

score 0 · Accepted Answer · answered Jun 02 '20 at 15:54

Add a line break to your string with \n. In your code check to see if a line break is the character, if it is, replace it with <br/>

var i = 0;
var text = "Animation - Web Development- Video Editing\nBecome a member & More.";

function typeWriter() {
  var ch = text.charAt(i)
  if (ch === '\n') {
    ch = '<br/>'
  }
  document.getElementById("text").innerHTML += ch
  i++;
  i < text.length && setTimeout(typeWriter, 50);
}
typeWriter();

<div id="text"></div>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Because HTML doesn't render line feeds, you need to add a condition in your function or adapt your HTML code.

Solution #1

Update your Javascript function, add a special case in your first if statement:

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";

function typeWriter(){
  if(i < text.length){
    if(text.charAt(i) === "\n") 
      document.getElementById("text").innerHTML += "<br/>";
    document.getElementById("text").innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, 50);
  }
}
typeWriter();

In that case, HTML will render <br/> tag by adding a new line. Don't forget to add the \n in your text variable.

Solution #2:

Use <pre> HTML tag, not recommended but content will be rendered too, without changing your Javascript function.

<pre id="text"></pre>

Elharony · Answer 3 · 2020-06-02T16:23:02.483

I believe /n isn't a good practice here, if you're receiving those data from a 3rd-party API for example, you won't be able to get /n in the text. So, your best bet is checking for the exact word you're looking for, and add break line after it.

Solution Explanation

The wordCheck boolean value is set to true by default, so our condition below keep running, until we found the word Editing in the printed text. In that case, we add a line break, set false value to wordCheck to prevent adding line breaks later.

I cached the element txtElement for better code readability.

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";
var wordCheck = true;

function typeWriter(){
  var txtElement = document.getElementById("text");
  
  if(i < text.length){
    txtElement.innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, 50);

    // Here's we detect if the value reached the word "Editing", if so, we do break line
    var currentVal = txtElement.innerHTML;
    if(wordCheck && currentVal.indexOf('Editing') >= 1) {
      txtElement.innerHTML += "<br>";
      wordCheck = false;
    }
  }
}
typeWriter();

<p id="text"></p>

Making a new line in js string

3 Answers3

Solution #1

Solution #2:

Solution Explanation