タグの中の文字だけ抽出してテキストをフェードインさせたい

Question

テキストを一文字ずつ表示させたくテキストを1文字ずつフェードインさせる方法を参考に以下のコードをjQuery を使い書きました。
フェードインはできたのですが、その際spanなど指定した範囲すべてが表示されてしまい、うまく文字だけが表示できません。
cssで下記のテキストを3行になるように改行しているのですが、この改行をなくさずにうまくフェードインを表示させたいです。

発生している問題

テキストのフェードインがうまく表示されない

####該当のソースコード

<div class="contents">
    <p id="title">
      <span class="text">テキスト1</span>
      <span class="text">テキスト2</span>
      <span class="text text3">テキスト3</span>
    </p>


<script>
$(function() {
    var $allMsg = $('#title');
    var $wordList = $('#title').html().split("");
    $('#title').html("");
    $.each($wordList, function(idx, elem) {
        var newEL = $("<span/>").text(elem).css({ opacity: 0 });
        newEL.appendTo($allMsg);
        newEL.delay(idx * 70);
        newEL.animate({ opacity: 1 }, 1100);
    });
});
</script>
</div>

.text::before {
	content: "\A" ;
	white-space: pre ;
}

上記のjQueryの部分を以下のように書き換えました。
####変更したコード

<script>
$(function() {
    var allMsg = $('#title');
    var lineList = allMsg.html().split('');
    var wordList = $('#title').html().split('');
    var repmsg ='<span class="text">';
    var strMsg = String(allMsg.html()).replace(repmsg,"");
    console.log(strMsg);
    $('#title').html("");
    $.each(wordList, function(idx, elem) {
        var newEL = $("<span>").text(elem).css({ opacity: 0 });
        newEL.appendTo(allMsg);
        newEL.delay(idx * 70);
        newEL.animate({ opacity: 1 }, 1100);
    });
});
</script>

変数の前の$はわかりにくいと感じ消しました。
allMsgを取得後Stringにしてreplaceを使えば指定した部分だけ消すことができると考え、実際にしてみてコンソールに出力してみたのですが、コンソール上でテキスト1の前のspanタグが置換されているだけで実際の表示は変更前と変わりありません。

改行を保ったままspan内のテキストだけをフェードインさせるにはどのようにすればいいか教えていただきたいです。
よろしくお願いします。

Comments

[yambejp]

「テ、キ、ス、ト、1、テ、キ、ス、ト、2、テ、キ、ス、ト、3」
という順番で表示するのですか？
「テ（３つ）、キ（３つ）、ス（３つ）、ト（３つ）、1・2・３」
と縦方向一緒にして表示するのですか？

[yambejp]

書き換えた方、#comceptにあたるHTMLがありません
#titleでよいのですか？

[yys949]

テキスト1
テキスト2
テキスト3
というような感じで表示させたいと考えております。

idの変更を書いていなかったためわかりにくくなってしまっておりました。
idはtitleに戻しました。

[yambejp]

すでに回答はしてあります。
挙動が想定とちがうようならご指摘ください

Answer 1

<style>
.text::before {
    content: "\A" ;
    white-space: pre ;
}
</style>
<script>
$(function() {
  $('.text').each(function(){
    var spans=[];
    $.each($(this).text().split(''),function(){
      spans.push($('<span>').css({opacity:0}).text($(this).get(0)));
    });
    $(this).empty().append(spans);
  });
  var speed1=70;
  var speed2=1100;
  $('.text span').each(function(x){
    $(this).delay(x*speed1).animate({opacity:1},speed2);
  });
  
});
</script>
<div class="contents">
    <p id="title">
      <span class="text">テキスト1</span>
      <span class="text">テキスト2</span>
      <span class="text text3">テキスト3</span>
    </p>
</div>

Comments

[yys949]

想像していた動きを作ることができました。

誠にありがとうございました。