THE HAM MEDIA BLOG

ちょっとしたテクニックなのかもしれないですが、
formのテキストエリアで改行つきの入力をしたときに、
改行を自動的にbrタグになる方法があったので、
メモとしてエントリーしておきます。

改行をbrにするスクリプト

改行をbrにするには正規表現を使う。
調べたところによると、ブラウザによって改行コードが違う可能性もあるので、
二つ指定しておくのがポイントのようだ。

改行は正規表現では「\r\n、\n、\r」らしいので、
これが含まれていたらbrタグに変換すればよい。

必要なスクリプトは下記の通りである。
尚、今回も指定しやすいようにjQueryを利用しています。

■スクリプト

$("textarea").change( function() {
	var txtVal = $(this).val();
	txtVal = txtVal.replace(/\r\n/g, "&lt;br /&gt;<br />");
	txtVal = txtVal.replace(/(\n|\r)/g, "&lt;br /&gt;<br />");
	$('#testpre').html('<p>'+ txtVal +'</p>');
});

今回のサンプルは、入力した内容をpタグで囲い、
文字として表示されせる改行のbrタグと、実際に改行させるbrタグの
二つを同時に指定されるようにしているスクリプトです。

置換には「.replace」を使えばOKと。

サンプルを作ってみた

では、実際にどのように動作するのか見てみましょう。

サンプルを作ってみたので、「なにか文字を入力」部分に
実際に何か文字を入れてみてください。
入力して、テキストエリアからフォーカスがなくなると
テキストエリア内が変わっていた時のみに、動作して、
「ここに入力文字がタグ付きで表示されます」の部分に
改行がbrになって表示されます。

■サンプル

これで、改行をbrタグにすることが出来ました。