textarea要素に入力されたテキストに含まれる改行をbr要素に置き換える処理を、jQueryを使ってJavaScriptで書いてみました。
要件は:
- 改行('\n'、'\r'、'\r\n')をbr要素(<br/>)に置き換える。
- '<'や'&'などの特殊な文字は実体参照('<'や'&')に置き換える。
1番目の要件は、入力されたテキストをHTMLとして解釈するのが前提でしょう。すると、そこには2番目の要件も、暗に含まれているはず。
この2つの要件を両立させるポイントは:
- 改行を含むテキストを、改行を区切りにして分割して、テキストの配列を生成する。
- document.createTextNode()メソッドは、指定したテキストからテキストノードを生成する。このとき、テキスト中の特殊な文字を実体参照に置き換える。
- jQueryの.append()メソッドは、テキストノードでも追加してくれる。
といったところかと。
そこで、スクリプトはこんな感じ:
// 変数textareaがtextarea要素のjQueryオブジェクト。
// 変数targetがtextarea内の要素を設定する要素のjQueryオブジェクト。
txtarea.change(function() {
var txt = txtarea.val(); // textareaの値
target.contents().remove();
// まず改行らしき文字を\nに統一。\r、\r\n → \n
txt = txt.replace(/\r\n/g, '\n');
txt = txt.replace(/\r/g, '\n');
// 改行を区切りにして入力されたテキストを分割して配列に保存する。
var lines = txt.split('\n');
// 配列中の各テキストからテキストノードを生成して、<br />を挟みながら、元の要素に追加する。
for (var i = 0; i < lines.length; i++) {
if (0 < i) {
target.append('<br />');
};
target.append(document.createTextNode(lines[i])); // ここで特殊な文字は実体参照に置き換わる。
};
});
試してみます。
この↓textareaにテキストを入力します。このtextareaがフォーカスを失うと、入力されたテキストが下に反映されるはず。
ここ↓に、textarea要素で取得した文字列を加工した文字列を表示:
ここに、textarea要素で取得した文字列を加工した文字列を表示。
チェックポイントはこんなところかと思います:
- 先頭や末尾に改行がある場合。
- 改行が複数続いている場合。
- テキスト中にタグなど特殊文字が含まれている場合。
…というか、この記事書きにくい。リッチテキスト←→HTMLとモードを切り替えるたびに、TypePadが改行とかを置き換えてしまうので。
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
新しいタスクを登録した直後。
件名を「調査」、所要時間を「3時間」に設定した。
優先度を「★」に設定。
このようにして、5件登録したところ。
例えば:
