textarea内の改行をbr要素に置き換える、jQueryを使ったJavaScriptのコード

textarea要素に入力されたテキストに含まれる改行をbr要素に置き換える処理を、jQueryを使ってJavaScriptで書いてみました。

要件は:

1. 改行('\n'、'\r'、'\r\n')をbr要素(<br/>)に置き換える。
2. '<'や'&'などの特殊な文字は実体参照('&lt;'や'&amp;')に置き換える。

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がフォーカスを失うと、入力されたテキストが下に反映されるはず。

改行は<br />要素に置き換えられる。 <span style="color: red;">タグを書いても、要素には置き換わらない。</span>

ここ↓に、textarea要素で取得した文字列を加工した文字列を表示:

ここに、textarea要素で取得した文字列を加工した文字列を表示。

チェックポイントはこんなところかと思います:

• 先頭や末尾に改行がある場合。
• 改行が複数続いている場合。
• テキスト中にタグなど特殊文字が含まれている場合。

…というか、この記事書きにくい。リッチテキスト←→HTMLとモードを切り替えるたびに、TypePadが改行とかを置き換えてしまうので。