jQueryで書き出されたHTMLに改行を機能させたい

Question

jquery break/animate warping text paragraph example ＜参照元＞

こちらを参考に同様のアニメーションが機能したページを作りたいのですが、

<p id="weirdtext">テスト<br>文章</p>このように、あるいは\nなどで 文章に改行を効かせる事は可能なのでしょうか？ jsに関する知識がまだ至らず、打ち間違いなどがないようコードはほぼそのままで使っております。

$(document).ready(function(){
	setup();
});

function setup(){
	var $passage = $('#weirdtext');
	//get the inner HTML of the #weirdtext paragraph
	var rawtxt = $passage.html();
	
	//Get the length of the string for use in loop
	var len = rawtxt.length;
	
	//empty string used to store final text that includes spans
	var newtext = '';

	//For each character inside #weirdtext string (this is why we got length)
	for(var i = 0; i < len; i ++){
		
		//get a random num between 1 and 5
		var rng = Math.floor(Math.random() * 5) + 1;
		
		//get the i-th character from the string
		var currentchar = rawtxt.charAt(i);
		if(currentchar == ' '){
			//if it's a space, add an empty .space span
			var newchar = '<span class="space"></span>';
		}
		else{
			//otherwise, wrap it with a span, and give it class effectN, where N is a random int as before
			var newchar = '<span class="effect' + rng + '">' + currentchar + '</span>';
		}
		//add this new "char" (actually it's a char with spans wrapping it) to the empty string
		newtext = newtext + newchar;
	}
	
	//最終行② replace #weirdtext paragraphs inner HTML with the newly created string
	$passage.html(newtext);

//個人で追加してみたもの①
var str = $passage.html(newtext).val();
$('#weirdtext').html(str.replace(/\r?\n/g, '<br>'));

}

最終的に$passage.htmlというものに書き出されているから<br>や\nが反応せず、そのまま文字列として出てしまっているのかと思い、改行を置換するというものを調べてやってはみたのですが、
入れるところが悪いのか、理解が至っていないからか、無効でした。

現状

最初の一文の下に追加することで<br>を改行として認識してくれました。
正しこの場合は適用したかったフォントが伸び縮みするという効果を打ち消してしまうようでした。
一度自己解決したと記事を上げさせて頂いたのですが、
コメントしてくださった方法含め、「効果を持続したまま改行を適用する」には
まだ至っていない為、もう少し考えてみようと思います。

var $passage = $('#weirdtext');
//追加したもの    
$( '#weirdtext' ).html( $('<p>').text( text ).html().replace( '。', '。<br>' ) );

こうしたらいいというものが他ありましたら是非教えて頂ければ幸いです。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[krswakt]

コメントありがとうございます。参照元にあるものをそのまま使っている為、
理解に至っていないものを記載することは余計なお手間を増やしてしまうのではと考えておりました。
後、追記させて頂きます。

Answer 1

$passage.html(newtext.replace( /。</span>/g, '。</span><br>' ));

Comments

[krswakt]

コメント有難うございます。こちらは最終行を書き換えるという認識で間違いなかったでしょうか？
個人で追加したものは覗き、最終行の $passage.html(newtext);を書いて頂いたものに書き換えてみました。
<p>タグ内での改行に変化はありませんでした…。

.replaceで改行を認識させる方法ではいくつか上手くいくのですが、どうやら
newtext部分に変更が加えられるとアニメーションが動作しなくなるようです。

kei344様のテスト環境では、頂いた内容の上でアニメーションが機能したという事でしょうか？
であれば自分の環境の問題も考えねばと思案しております…。

[kei344]

https://jsfiddle.net/mc4qj91e/

[krswakt]

わかりやすいよう貼り出してくださってありがとうございます…！！
修正している最中に大事な部分を消していた事が反映されない原因でした。
最初の指摘から解決まで、本当にありがとうございます…！！
だからこうなるのか…と勉強になりました。評価が１しかつけられず残念です。

求めていたものに対する最適解だった為、こちらをベストアンサーとさせて頂きます…！

[krswakt]

こちらの回答によって途中の<span＞などがどう動いているかも理解が至りました…！
応用が出来るようになり助かっております。重ねてありがとうございます！

Answer 2

以下でよいのでは。

var str = newtext.replace(/\r?\n/g, '<br>');
$passage.html(str);

ただし、newtextの中に、¥rないし、¥nが入ってることが前提です。

Comments

[krswakt]

回答有難うございます。ちなみにこちらはどこに入れるのが正しかったのでしょうか…？
個人的に入れた個所①を差し替え、または最後の一文②と入れ替えてみたのですが、
うまく動作しませんでした。理解が足りず申し訳ありません。

[miyabi_pudding]

> ただし、newtextの中に、¥rないし、¥nが入ってることが前提です。

ってことです。
自己解決のように、¥rないし、¥nが入ってなければ、当然動作しませんよ。

[krswakt]

言葉が足りず申し訳ありません。
<p>内の文章に、¥rと¥nは入れて試してみたのですが
うまく動作しませんでした。ご助力有難うございます。

[miyabi_pudding]

まんま¥r、¥nを入れてもダメですよ。
（HTML上では、&yen;rとかとして認識されてしまう）
これは、不可視文字、の中でも、改行コードと言って、
テキストでまんま打ってもだめなものです。
コード上の本当の"改行コード"である必要があります。
（キーボードでEnter or returnキーを打った時に入るモノホンの文字コードということ）
このコメントでも、改行をしたら、改行自体は見えないのに、改行が入るでしょう？
これは、不可視の¥rないし¥nが入っているからです。
（textarea要素は、改行コードが改行として反映される仕様になってます）
それを、投稿後は、改行コードを、<br>に変換してるんです。
ちなみにタブもありまして、¥tがそれです。
JavaScript（ソースコード）上は、これら不可視文字を取得することができるんです。

[krswakt]

なるほど…！そういうことだったのですね。
丁寧にありがとうございます！！勉強になりました…！

Answer 3

最初の一文の下に追加することで<br>を改行として認識してくれました…！
回答いただいている方に更に質問をしてはおりますが、解決したとして投稿させて頂きます…！

var $passage = $('#weirdtext');

//追加したもの    
$( '#weirdtext' ).html( $('<p>').text( text ).html().replace( '。', '。<br>' ) );

Comments

[krswakt]

<p id="weirdtext">
テスト<br>文章
改行コードをいれない改行
テスト文章。
</p>
このように打った際、以下のように出るようになりました。

テスト
文章
改行コードをいれない改行
テスト文章。

[krswakt]

更新が正しく反映されていなかったので補足追加です。
自己解決した…と思っておりましたが、改行が効く代わりに
文字の伸び縮みする作用が消えてしまっておりました。
何度も訂正して申し訳ありません。もう少し悩んでみようと思います。