jqueryでの1文字ずつのアニメーションについて

Question

ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています
splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが
brタグなども1文字ずつ格納されてしまうためbrタグは1文字で格納されないようにしたいのですが方法がわかりません
欲を言えばbrタグのみではなくhtmlタグは1文字で配列に格納されずにしたいです。
また、foreachで回してspanを取り付ける方法ではなくて
htmlにspanを書く方法だと簡単に実装できるかと思うのですが毎回1文字ずつspanで囲むのが大変になるので、できればしたくありません。
初めて投稿するため勝手がわかりませんが、今現在このような感じです。
どなたかいいやり方ご教授いただけると助かります。

<p class="text_animate">te<br>st</p>

.text_animate{
	span{
		transition: 1s;
	opacity: 0;
	&.text_animate_on{
		transition: 1s;
		opacity: 1;
		
	}
	}
	&.text_animate_rotate span{
		transform: rotate(-45deg);
		display: inline-block;
		&.text_animate_rotate_on{
			transform: rotate(0deg);
		}
	}
	&.text_animate_size span{
		font-size: 22px;
		&.text_animate_size_on{
			font-size: 10px;
		}
	}
}

$(function(){
	var text=$(".text_animate").html();
	/*var html_tags = /</?[^>]+>/;
	var text_split=text.split(html_tags);*/
	var text_split=text.split("");
	$(".text_animate").html("");
	function animate(){
			text_split.forEach(function(val){
		/*console.log(val);*/
		
		
		 $(".text_animate").append("<span>"+val+"</span>");
		
	});
	
	}
	animate();
	$(window).load(function(){
		$(".text_animate span").each(function(index){
		$(this).css({transitionDelay:index * 0.6 +"s"}).addClass("text_animate_on");
	});
	});
});

Comments

[m.ts10806]

コードは長すぎて文字数オーバーするなど特別な事情がない限り、外部サービスではなく質問内にコードブロックで囲い提示してください。（ほかにもマークダウン機能が使えるので読みやすくしていただけると）https://teratail.com/help

Answer 1

子要素を一つひとつ取り出して処理すると上手くいきますよ。

$(function(){
    var html = "";
    $(".text_animate")
        .contents()
        .each(function () {
            if (
                this.nodeType === Node.ELEMENT_NODE
                && this.tagName === "BR"
            ) {
                html += "<br>";
            } else if (this.nodeType === Node.TEXT_NODE) {
                this.textContent.split("")
                    .forEach(function (value) {
                        html += "<span>" + value + "</span>";
                    });
            }
        });
    $(".text_animate").html(html);
    setTimeout(function () {
        $(".text_animate span").each(function (index) {
            $(this)
                .css({
                    transitionDelay: index * 0.6 + "s"
                })
                .addClass("text_animate_on");
        });
    }, 10);
});

Answer 2

JavaScriptコードにおいて、テキストノードのみにanimate()の処理を施すことで達成できると思われます。
サンプルコード(CodePen)

以下、解説です。

<p class="text_animate">te<br>st</p>

この<p>タグが成す要素(Element)の下には3つの子ノード(Node)が含まれています。(HTML要素はノードの一種です。)

• テキストノード"te"
• <br>要素
• テキストノード"st"

$(".text_animate").children()を呼び出すと子要素(br要素1つのみ)を得ることができますが、$(".text_animate").contents()を呼び出すと子ノード(ノード3つ)を得ることができます。

この方法で書いたコードが以下のとおりです。(前述のサンプルコードと同じ内容)

$(function () {
  // 子ノード3つそれぞれに対して処理
  $(".text_animate").contents().each(function (_, node) {
    // 子ノードを一旦DOMツリーから除去
    // 変数`node`はjQueryオブジェクトではないので`node.remove();`とは書けません。
    node.parentNode.removeChild(node);

    // ノードの種類によって条件分岐
    switch (node.nodeType) {
      // テキストノードなら質問文にある処理を適用
      case Node.TEXT_NODE:
        // テキストノードの文字列を取得
        var text_split = node.textContent.split("");

        function animate() {
          text_split.forEach(function (val) {
            $(".text_animate").append("<span>" + val + "</span>");
          });
        }
        animate();
        break;
      // テキストノード以外(HTML要素)ならappendし直す
      default:
        $(".text_animate").append(node);
    }
  });

  // 以下、変更点なし
  $(window).load(function () {
    $(".text_animate span").each(function (index) {
      $(this).css({
        transitionDelay: index * 0.6 + "s"
      }).addClass("text_animate_on");
    });
  });
});

Comments

[teta]

丁寧な解説ありがとうございます
ベストアンサーに選ばせていただきました。

Answer 3

var text=$(".text_animate").text()

でどうでしょうか。
あ、これだとbr自体なくなっちゃうからダメなんですね。失礼しました。