コンテンツ内の改行タグ（BRタグ）をtextarea内の改行コードに置き換える方法

presented by 役に立つかもしれないBlog

ブラウザごとに動作が異なる、通常タグとtextareaやpreなどの、文字列をそのまま表示するタグの間での改行の扱いと、タグのエスケープについてです。

Ajaxによる非同期通信で画面の編集が楽になった昨今、通常タグをクリックひとつで入力フォームに変える技も利用する場は多いのではないかと思います。

今回は、ライブラリとして一般的なprototype.jsを各所に使わせてもらいます。

/*
nowElemはどこの要素でもいいです。
ここでは仮に、内部に改行<br>要素を含む<p>要素の参照としましょう。
*/

var nowElem = $("myContents");
var parentElem = nowElem.parrentNode;

var val = nowElem.innerHTML;
val = val.replace(/<br>|<BR>/g, "\r\n");
var va = val.split("\r\n");
va.each(function(str,i){va[i]=str.unescapeHTML();});
val = va.join("\r\n");

//新しくtextarea要素を生成
var newElem = document.createElement("textarea");
newElem.value = val;

//要素の入れ替え
parrentElem.replaceChild(newElem, nowElem);

要するに、最近のモダンブラウザでは共通の挙動をする\r\nの改行コードに置き換えます。
また、prototype.jsのunescapeHTML()を複数行の文字列に対して行なうと、改行コードが削除されてしまいますので、いったん改行コードを基準に配列分解し、1行づつunescapeHTML()を実行して、最後にそれをぜんぶくっつけます。　めんどくさいですね。。

　 　 このエントリーをはてなブックマークに追加

このページに関連のある記事はこちら