JavaScript: split()を使って、テキストを改行で分割する

JavaScriptでtextarea等に入力されたテキストを、 改行で分割して配列に格納したい場合があります。

その場合は split() 関数を使うことで簡単に改行単位で分割できます。 テキストを改行で分割するには次のようなコードになります。

let str = '改行で分割する\nテキスト内容';

// 配列に分割
let arr = str.split(/\r\n|\n/);

for (let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

split() の引数の部分「/\r\n|\n/」は正規表現で、 この場合は「\r\n、\n」のいずれかという意味です。

このように記述することで複数の改行コードのパターン（\r\n、\n）に対応することができます。

テキストエリアの内容を、改行区切りで配列に格納する

テキストエリア要素の複数行文字列を改行区切りで配列に格納する方法は以下の通りです:

  1. テキストエリアの値を取得します。
  2. split() メソッドを使用して、改行で文字列を分割します。

以下のコードで実現できます:

// テキストエリアの要素を取得
const textarea = document.getElementById('your-textarea-id');

// テキストエリアの値を取得し、改行で分割して配列に格納
const lines = textarea.value.split(/\r\n|\n/);

このコードでは、split(/\r\n|\n/) を使用しています。 これは改行コードの違い（Windows: \r\n, Unix/Mac: \n）に対応するための正規表現です。

注意点:

  • 空の行も配列の要素として含まれます。
  • 最後の行に改行がある場合、空の要素が配列の最後に追加されます.

実際の使用例:

function processTextarea() {
  const textarea = document.getElementById('my-textarea');
  const lines = textarea.value.split(/\r\n|\n/);

  console.log(lines); // 配列の内容を確認

  // 以下、配列を使った処理を記述
  lines.forEach((line, index) => {
    console.log(`Line ${index + 1}: ${line}`);
  });
}

上のコードでは、forEach()を使ってインデックスと要素内容を取得しています。

JavaScript入門