Jquery textareaの入力値（改行）をhtmlで出力したい

Question

事前に登録された値を下記のコードで出力しているとして

編集側

<textarea data-block_id="#block_text1" class="blocktext_edit">
	{$text|nl2br}<!--多分関係ないと思いますがsmartyを使ってます。-->
</textarea>

表示側

<div id="view">
	<span id="block_text1">
		{$text|nl2br}
	</span>
</div>

テキストアリアの入力値をリアルタイムに表示側<span id="block1">に出力したいと思って下記のソースを書きました。

// ブロックテキスト書き換え
$(".blocktext_edit").focus(function(){
//try1	--------------------------------------
	$(this).keyup(function () {
		var change_text = $(this).val();
		var target_block = $(this).attr('data-block_id');
		$(target_block).html(change_text );
	});
    //結果 文字は反映されるんですが<span id="block1">に元々あった<br />が消える
// end try1-----------------------------------	
// try2---------------------------------------	
	$(this).keyup(function () {
		var change_text = $(this).val();
		var txt = change_text.replace(/\r\n/g, '<br />');   //'\n'を'<br />'に変えてみる
		txt = txt.replace(/\r/g, '<br />');           //'\n'を'<br />'に変えてみる
		var target_block = $(this).attr('data-block_id');
		$(target_block).html(txt);
	});
    //結果 try１と同じ...
// end try2-----------------------------------	

}).blur(function(){
  //ここでは関係ないので割愛
}

これどうやったら改行もそのままに<span id="block1">へ反映させられますか？

宜しくお願いしますm(_ _;)m

Comments

[ikedas]

stackoverflowの質問 http://stackoverflow.com/questions/6203470 は見ましたか。jquery textarea keyupで検索したらでますけど。

Answer 1

とりあえず下記で動きますが、$( target_block ).html( txt ); にするとHTML文字列が入力したまま入ります。< > など必要なものを実体参照に置き換えるか、許可するHTMLを厳密に設計されたほうが良いと思います。

var txt = change_text.replace( /\r?\n/g, '<br />' );
```**動くサンプル：**[https://jsfiddle.net/50g31wcq/](https://jsfiddle.net/50g31wcq/)

Comments

[退会済みユーザー]

kei344様

うまく動きました..
出力部分を
$(target_block).html(change_text.replace( /\r?\n/g, '<br />' ));
としてみました。

いつもありがとうございます。