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>