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

ブラウザごとに動作が異なる、通常タグと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, "rn");
var va = val.split("rn");
va.each(function(str,i){va[i]=str.unescapeHTML();});
val = va.join("rn");
//新しくtextarea要素を生成
var newElem = document.createElement("textarea");
newElem.value = val;
//要素の入れ替え
parrentElem.replaceChild(newElem, nowElem);

要するに、最近のモダンブラウザでは共通の挙動をするrnの改行コードに置き換えます。

また、prototype.jsのunescapeHTML()を複数行の文字列に対して行なうと、改行コードが削除されてしまいますので、いったん改行コードを基準に配列分解し、1行づつunescapeHTML()を実行して、最後にそれをぜんぶくっつけます。

めんどくさいですね。。