JS машинка анимация пишет <br>буквально

Question

Я «сделал» пишущую машинку (чистую) JS анимация:

<script>
var i = 0;
var txt = "Hello, <br>this is the rest of the text blablabla";
var speed = 50;

function typeWriter() {
if (scrolling) {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
  }
 }

Мне нужно несколько строк, но функция пишет
буквально. Что мне делать?

Answer 1

Проблема в том, что вы добавляете HTML code char за char, но вы должны добавлять HTML тегов целиком. В противном случае браузер видит только символ < и исправляет его на <. Вы можете либо добавить все символы к >, когда приблизитесь к открытию <, но более простым решением будет заменить <br> одним символом новой строки \n и заменить его на <br> во время «печати»:

var i = 0;
var txt = "Hello, \nthis is the rest of the text blablabla";
var speed = 50;
var scrolling = true;

function typeWriter() {
if (scrolling) {
  if (i < txt.length) {
    var char = txt.charAt(i);
    document.getElementById("demo").innerHTML += char == '\n' ? '<br>' : char;
    i++;
    setTimeout(typeWriter, speed);
  }
  }
 }
 
 typeWriter();

<div id="demo"></div>

Answer 2

Вам нужен символ новой строки, а не <br/> как текст, чтобы браузер не кодировал текст. Лучше всего использовать \n для генерации разрывов строк.

Если вы редактируете <div> или <span>, вам понадобится правило white-space: pre;. Для текстовых полей это правило CSS не требуется.

Демо: https://codepen.io/adelriosantiago/pen/abNoROY