Estou com uma tremenda dificuldade, fiz uma pequena frescura para quando entrar no site o texto mostre igual quando digita sozinho com keyframe.

Dúvida:
Como posso pular linha no meu texto sem que o keyframe também leia, por exemplo "<br>", ou seja o texto sairia assim: "meu texto 'br>meu texto |" tudo junto e com o tag br.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

      });
    }
    const titulo = document.querySelector('.titulo-principal');
    typeWrite(titulo);

<!-- language: lang-css -->

    .titulo-principal{
    }
    .titulo-principal:after{
     content: '|';
     margin-left: 5px;
     opacity: 1;
     animation: pisca .7s infinite;
    }

    @keyframes pisca{
        0%, 100%{
            opacity: 1;
        }
        50%{
            opacity: 0;
        }
    }


<!-- language: lang-html -->

    <p class="titulo-principal">Meu texto br> Meu Texto</p>







<!-- end snippet -->