5

Estou fazendo uma animação em JavaScript para que o texto tenha o efeito de estar sendo digitado. Estou usando uma única tag <p> para o texto, e gostaria que quebrasse a linha nas tags <br>, mas elas estão sendo adicionadas como texto no HTML.

Segue código abaixo + Link do Codepen

Link: https://codepen.io/Sr-RIcci/pen/ExWdbBX

function typeWriter(elemento) {
  const textoArray = elemento.innerHTML.split('');
  elemento.innerHTML = "";
  textoArray.forEach((letra, i) => {
    setTimeout(() => elemento.innerHTML += letra, 75 * i);
  });
}

const titulo = document.querySelector('p');
typeWriter(titulo);
p::after {
  content: "|";
  margin-left: 5px;
  opacity: 1;
  animation: pisca 0.7s infinite;
}

@keyframes pisca {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
<p>Olá mundo <br> Olá Universo <br> Olá Vida </p>

1
  • Dennis, editei a minha resposta com um exemplo sem regex e sem split.
    – Syzoth
    Commented 11/06/2021 às 23:51

2 Respostas 2

6

Isso ocorre porque o split() divide o <br> também, o que você pode fazer é o uso de uma expressão regular, então ao invés de split() vocë pode usar String.prototype.match, veja como a array fica depois:

console.log("a b c d <br> foo bar <br> asd".match(/<\w+?>|./g))

A primeira parte da expressão é para pegar as tags <\w+?> e o . depois do pipe (|) é para pegar qualquer outro caractere (até espaços.

No entanto você poderia também fazer um for() bem elaborado para unir os caracteres quando for uma tag, navegando caractere por caractere, e nem precisa de split, exemplo (veja os comentários dentro do código):

const elemento = document.querySelector("p");
const texto = elemento.innerHTML;

let hasOpenTag = false;
let tmpTag;

//Limpa o campo
elemento.innerHTML = '';

for (let i = 0, j = texto.length; i < j; i++) {
    let letra = texto[i];

    /*
      Se o caractere for "<" então executa o continue;
      para que o setTimeout não seja executado e armazenará
      os próximos caracteres até encontrar o ">"
    */
    if (letra === '<') {
      tmpTag = letra;
      hasOpenTag = true;
      continue;
    }
    
    /*
      Se encontrar o ">" e antes dele teve um "<"
      então junta a tag toda na variável tmpTag e irá
      adicionar ao setTimeout
    */
    if (hasOpenTag && letra === '>') {
        letra = tmpTag + letra;
        hasOpenTag = false;
    }

    /*
      Se a variavel hasOpenTag for true irá armazenar
      todos próximos caracteres para formar a tag, até
      encontrar o ">" (da if anterior)
      adicionar ao setTimeout
    */
    if (hasOpenTag) {
       tmpTag += letra;
       continue;
    }

    setTimeout(() => elemento.innerHTML += letra, 75 * i);
}
p::after {
  content: "|";
  margin-left: 5px;
  opacity: 1;
  animation: pisca 0.7s infinite;
}

@keyframes pisca {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
<p>Olá mundo <br> Olá Universo <br> Olá Vida</p>

5

Onde usa a propriedade Element.innerHTML use a propriedade Node.innerText que representa o conteúdo textual "renderizado" de um nó e seus descendentes isso significa que as quebras de linha são convertidas e compreendidas como \n.

function typeWriter(elemento) {
  const textoArray = elemento.innerText.split('');
  elemento.innerText = "";
  textoArray.forEach((letra, i) => {
    setTimeout(() => elemento.innerText += letra, 75 * i);
  });
}

const titulo = document.querySelector('p');
typeWriter(titulo);
p::after {
  content: "|";
  margin-left: 5px;
  opacity: 1;
  animation: pisca 0.7s infinite;
}

@keyframes pisca {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
<p>Olá mundo <br> Olá Universo <br> Olá Vida </p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .