テキストエリアの入力やファイルの内容を「1行ずつ」処理したいとき、文字列を改行で分割します。ただし改行コードは環境によって \n(Unix/Mac)・\r\n(Windows)・\r(旧Mac)と異なるため、どれにも対応した分割が安全です。
この記事の結論:環境を問わず確実に分割するなら
str.split(/\r\n|\r|\n/) を使います。入力が \n だけと分かっているなら str.split("\n") でも構いません。split(“\n”) で分割する(\n のみ)
もっとも基本的な方法です。改行文字 \n を区切りに指定します。
split(“\n”)
const text = "apple\nbanana\norange\ngrape";
const lines = text.split("\n");
console.log(lines); // ["apple", "banana", "orange", "grape"]
Windowsの改行(
\r\n)に注意:split("\n") だけだと \r\n のテキストでは各行の末尾に \r が残ります。例:"a\r\nb".split("\n") は ["a\r", "b"] になります。出所が不明なテキストは次の正規表現で分割するのが安全です。正規表現でクロスプラットフォーム対応する(推奨)
/\r\n|\r|\n/ なら \r\n(Windows)・\n(Unix)・\r(旧Mac)のすべての改行で分割できます。
split(/\r\n|\r|\n/)
// \r\n・\r・\n が混在していても正しく分割 const text = "apple\r\nbanana\rorange\ngrape"; const lines = text.split(/\r\n|\r|\n/); console.log(lines); // ["apple", "banana", "orange", "grape"]
/\r?\n/ という書き方もよく見ますが、これは \r\n と \n には対応するものの単独の \r(旧Mac)は分割しません。完全に対応するなら /\r\n|\r|\n/ を使ってください。空行を除去する・各行をトリムする
末尾に改行があると配列の末尾に空文字 "" が残ります。空行を除いたり、各行の前後空白を取り除くには map と filter を組み合わせます。
空行除去とトリム
const text = "apple\n\n banana \norange\n";
// そのまま分割すると空要素や前後空白が残る
console.log(text.split("\n"));
// ["apple", "", " banana ", "orange", ""]
// 各行をトリムして空行を除去
const lines = text.split(/\r\n|\r|\n/)
.map(line => line.trim())
.filter(Boolean); // 空文字を除去
console.log(lines); // ["apple", "banana", "orange"]
実用例:textarea の入力を行ごとに処理する
テキストエリアの改行はブラウザ・OSで \n か \r\n になるため、正規表現で分割すると安全です。
行ごとの処理と行番号付与
const input = document.getElementById("memo").value;
// 空行を除いて行配列にする
const lines = input
.split(/\r\n|\r|\n/)
.filter(line => line.trim() !== "");
// 行番号を付けて出力
lines.forEach((line, i) => {
console.log(`${i + 1}: ${line}`);
});
console.log(`全 ${lines.length} 行`);
方法の比較
| 方法 | 対応する改行 | 用途 |
|---|---|---|
split("\n") |
\n のみ |
改行が \n と確定しているとき |
split(/\r?\n/) |
\r\n / \n |
Windows改行にも対応(単独\rは不可) |
split(/\r\n|\r|\n/) |
すべて | 全環境対応(推奨) |
よくある質問(FAQ)
Q改行で分割する一番確実な方法は?
A
str.split(/\r\n|\r|\n/) です。Windows(\r\n)・Unix/Mac(\n)・旧Mac(\r)のすべての改行コードに対応できます。Qsplit(“\n”) で \r\n のテキストを分割するとどうなりますか?
A各行の末尾に
\r が残ります。例えば "a\r\nb".split("\n") は ["a\r", "b"] になります。後続処理で不具合になりやすいので、出所が不明なテキストは /\r\n|\r|\n/ で分割してください。Q分割した配列の末尾に空文字が入るのはなぜ?
Aテキストの末尾に改行があると、その後ろの「空の行」も1要素として分割されるためです。
.filter(Boolean) や .filter(line => line.trim() !== "") で空行を除去できます。Qtextareaの改行コードは何ですか?
AブラウザやOSによって
\n または \r\n になります。どちらで来るか前提を置かず、/\r\n|\r|\n/ で分割するのが安全です。まとめ
JavaScriptで文字列を改行ごとに分割する方法のポイントを整理します。
- 確実なのは
str.split(/\r\n|\r|\n/)(全プラットフォームの改行に対応) split("\n")は\n限定。\r\nだと各行末に\rが残る/\r?\n/は単独\r(旧Mac)に非対応- 末尾改行で空要素が残る →
.filter(Boolean)や.trim()で整える - textareaの入力は改行コードが環境依存なので正規表現で分割するのが安全
関連として、split() で文字列を分割する完全ガイド・句読点ごとに分割する方法・改行をすべて削除する方法もあわせて確認すると、改行・分割まわりに強くなれます。
