THE HAM MEDIA BLOG

フォーム(form)のテキストエリア内の改行を<br />に変換するJavaScript(jQuery利用)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
javascript
jquery

改行を<br />に変換

ちょっとしたテクニックなのかもしれないですが、
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タグにすることが出来ました。

この記事へのコメント
自動改行には、
対応はしないのですか?
Posted by やん at 2009年01月29日
>やんさん
コメントありがとうございます。
自動改行に対応しないのかどうかとの質問ですが、
サービスによっては対応していると思います。
ここのコメントのフォームも対応しておりますし。

僕が今回のこのエントリーをあげたのは、
Ajaxとして、入れた文字を直接タグ着きで書き出す方法を自動化したかっただけなので、
それをJavaScriptでやるほうほうをポストしたまでです。

…なんて答えでいいのでしょうか(;´∀`)?
Posted by ハム at 2009年02月03日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/113278708
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。