タイプライターのように表示

タイプライターのように一文字ずつ表示したいためこちらを参考にして実装しました。しかし、文の関係上改行タグを入れたいのですが、<br>と直接表示されてしまう問題が発生しました。どなたか解決方法をご教授ください。

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2<script>
3$(function() {
4    var $allMsg = $('.split');
5    var $wordList = $('.split').html().split("");
6    $('.split').html("");
7    $.each($wordList, function(idx, elem) {
8        var newEL = $("<span/>").text(elem).css({ opacity: 0 });
9        newEL.appendTo($allMsg);
10        newEL.delay(idx * 70);
11        newEL.animate({ opacity: 1 }, 1100);
12    });
13});
14</script>
15〜この間に</head>や<img>など〜
16<span class="split">あいうえお<br>かきくけこ</span>

ご覧の通りjQueryの3.2.1はすでに入っていますが、bxsliderを実装している関係もあって3.2.1を利用したいです。そのような条件下でサイトを検索したところ↑がヒットした次第です。

行動規範の内容に同意します

回答1件

ベストアンサー

二番目のscriptタグの中身を次のように変更するのではどうでしょうか。
$allMsgの中身をバラバラにする前に一度<br>で分割するようにしました。

js
1$(function() {
2    var $allMsg = $('.split');
3    var $lineList = $allMsg.html().split('<br>');
4    var $wordList = $lineList[0].split('');
5    for (var i = 1, len = $lineList.length; i < len; i++) {
6        $wordList.push('<br>');
7        Array.prototype.push.apply($wordList, $lineList[i].split(''));
8    }
9    $('.split').html("");
10    $.each($wordList, function(idx, elem) {
11        var newEL = $("<span/>").html(elem).css({ opacity: 0 });
12        newEL.appendTo($allMsg);
13        newEL.delay(idx * 70);
14        newEL.animate({ opacity: 1 }, 1100);
15    });
16});