【JavaScript】改行の削除・置換・追加方法まとめ｜改行コードの違いと実務パターン

この記事で学べること

• 改行コード（
/
/
）の種類と違い
• replace() + 正規表現で改行を全て削除する方法
• split() + join() / replaceAll() による削除
• 改行をスペース・<br>タグ・カンマに置換する方法
• 
・テンプレートリテラル・join()で改行を追加する方法
• テキストエリアの改行を取得・表示する実践テクニック
• CSV分割・ログ処理・クリップボード正規化などの実務パターン
• CRLF未対応・JSON改行エスケープなどのよくあるミス

ポイント：Webブラウザ上のJavaScriptでは
（LF）が主流ですが、サーバーから受け取ったデータやファイルアップロードの内容には
（CRLF）が混在することがあります。そのため、すべての改行コードを考慮した正規表現で処理するのが安全です。

const text = "Hello
World
Foo
Bar";

// CRLF を含むか
console.log(text.includes("
")); // true

// LF を含むか
console.log(text.includes("
"));   // true

// CR を含むか
console.log(text.includes("
"));   // true

// 各改行コードの出現回数
const crlfCount = (text.match(/
/g) || []).length;
const lfCount = (text.match(/(?) || []).length;
const crCount = (text.match(/
(?!
)/g) || []).length;

console.log(`CRLF: ${crlfCount}, LF: ${lfCount}, CR: ${crCount}`);
// CRLF: 1, LF: 1, CR: 1

true
true
true
CRLF: 1, LF: 1, CR: 1

const text = "1行目
2行目
3行目
4行目";

// すべての改行コードを削除
const result = text.replace(/
?
|
/g, "");

console.log(result);
// "1行目2行目3行目4行目"

1行目2行目3行目4行目

ポイント：この正規表現はすべてのOS環境の改行コードに対応しています。/\n/g だけではWindowsの \r\n の \r が残ってしまうため、/\r?\n|\r/g を使うのがベストプラクティスです。

const text = "りんご
バナナ
みかん
ぶどう";

// 正規表現で分割 → 空文字で結合
const result = text.split(/
?
|
/).join("");

console.log(result);
// "りんごバナナみかんぶどう"

りんごバナナみかんぶどう

const text = "AAA
BBB
CCC";

// replaceAll() で LF を削除
const result = text.replaceAll("
", "");

console.log(result);
// "AAABBBCCC"

AAABBBCCC

注意：replaceAll() に文字列を渡した場合、その文字列に完全一致するものだけが置換対象になります。
（CRLF）を含む文字列を処理するには、先に replaceAll("
", "") → 次に replaceAll("
", "") → 最後に replaceAll("
", "") とチェーンする必要があります。

// replaceAll() + 正規表現（g フラグ必須）
const text = "A
B
C
D";
const result = text.replaceAll(/
?
|
/g, "");

console.log(result); // "ABCD"

const text = "JavaScript is
a versatile
language";

// 改行をスペースに置換
const result = text.replace(/
?
|
/g, " ");

console.log(result);
// "JavaScript is a versatile language"

JavaScript is a versatile language

// nl2br: 改行を <br> タグに変換
function nl2br(str) {
  return str.replace(/
?
|
/g, "<br>");
}

const text = "こんにちは
今日は良い天気ですね
また会いましょう";

console.log(nl2br(text));
// "こんにちは<br>今日は良い天気ですね<br>また会いましょう"

こんにちは<br>今日は良い天気ですね<br>また会いましょう

セキュリティ注意：ユーザー入力を innerHTML で表示する場合は、先にHTMLエスケープしてから nl2br() を適用しましょう。そうしないとXSS（クロスサイトスクリプティング）の脆弱性につながります。

// 安全な nl2br（HTMLエスケープ付き）
function safeNl2br(str) {
  return str
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/
?
|
/g, "<br>");
}

const userInput = "<script>alert(1)</script>
Hello";
document.getElementById("output").innerHTML = safeNl2br(userInput);
// &lt;script&gt;alert(1)&lt;/script&gt;<br>Hello

const text = "東京
大阪
名古屋
福岡";

// 改行をカンマに変換
const csv = text.split(/
?
|
/).join(",");

console.log(csv);
// "東京,大阪,名古屋,福岡"

東京,大阪,名古屋,福岡

const text = "東京

大阪

名古屋";

// 空行を除外してカンマ区切りに
const csv = text
  .split(/
?
|
/)
  .filter(line => line.trim() !== "")
  .join(",");

console.log(csv);
// "東京,大阪,名古屋"

// 文字列連結で改行を追加
const line1 = "Hello";
const line2 = "World";
const text = line1 + "
" + line2;

console.log(text);
// Hello
// World

Hello
World

const message = `1行目
2行目
3行目`;

console.log(message);
// 1行目
// 2行目
// 3行目

ポイント：テンプレートリテラル内の改行は \n（LF）として扱われます。変数展開（${}）も使えるので、動的な複数行テキストの生成に最適です。

const lines = [
  "名前: 田中太郎",
  "年齢: 30",
  "職業: エンジニア",
];

const text = lines.join("
");

console.log(text);
// 名前: 田中太郎
// 年齢: 30
// 職業: エンジニア

名前: 田中太郎
年齢: 30
職業: エンジニア

// n文字ごとに改行を挿入
function insertNewlineEvery(str, n) {
  return str.match(new RegExp(`.{1,${n}}`, "g")).join("
");
}

const text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

console.log(insertNewlineEvery(text, 10));
// ABCDEFGHIJ
// KLMNOPQRST
// UVWXYZ

ABCDEFGHIJ
KLMNOPQRST
UVWXYZ

<!-- HTML -->
<textarea id="myTextarea"></textarea>
<button onclick="processText()">処理</button>

<!-- JavaScript -->
<script>
function processText() {
  const textarea = document.getElementById("myTextarea");
  const text = textarea.value;

  // 行ごとに分割
  const lines = text.split("
");
  console.log("行数:", lines.length);
  console.log("各行:", lines);

  // 改行を削除して1行に
  const oneLine = text.replace(/
/g, "");
  console.log("1行:", oneLine);
}
</script>

補足：HTML仕様（WHATWG）では、textarea.value の改行は常に \n（LF）に正規化されると定められています。そのため、ブラウザ上のtextareaからの入力であれば /\n/g だけで十分です。

<div id="output" style="white-space: pre-line;"></div>

<script>
const text = "1行目
2行目
3行目";

// textContent を使えば HTMLエスケープ不要
document.getElementById("output").textContent = text;
</script>

const text = "1行目
2行目
3行目";

// 安全に変換（HTMLエスケープ + nl2br）
const safe = text
  .replace(/&/g, "&")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")
  .replace(/
/g, "<br>");

document.getElementById("output").innerHTML = safe;

const csvData = "名前,年齢,職業
田中,30,エンジニア
鈴木,25,デザイナー
佐藤,35,マネージャー";

// 行分割 → 各行をカンマ分割
const rows = csvData
  .split(/
?
|
/)
  .map(row => row.split(","));

// ヘッダーとデータに分離
const [header, ...data] = rows;

console.log("ヘッダー:", header);
console.log("データ:", data);

ヘッダー: ["名前", "年齢", "職業"]
データ: [
  ["田中", "30", "エンジニア"],
  ["鈴木", "25", "デザイナー"],
  ["佐藤", "35", "マネージャー"]
]

const logText = `[INFO] サーバー起動
[ERROR] DB接続失敗
[INFO] リトライ中
[ERROR] タイムアウト
[INFO] 復旧完了`;

// ERROR行だけ抽出
const errors = logText
  .split("
")
  .filter(line => line.includes("[ERROR]"));

console.log(errors);
// ["[ERROR] DB接続失敗", "[ERROR] タイムアウト"]

// エラー数をカウント
console.log(`エラー件数: ${errors.length}件`);
// "エラー件数: 2件"

["[ERROR] DB接続失敗", "[ERROR] タイムアウト"]
エラー件数: 2件

// 改行コードを LF に統一する関数
function normalizeNewlines(str) {
  return str.replace(/
/g, "
").replace(/
/g, "
");
}

// クリップボードイベントで使う例
document.addEventListener("paste", (e) => {
  e.preventDefault();
  const rawText = e.clipboardData.getData("text/plain");
  const normalized = normalizeNewlines(rawText);
  console.log(normalized);
});

ポイント：改行コードの正規化は、CRLF → LF の順で置換するのが重要です。先に \r だけ削除すると、CRLF が \n だけになるのは良いですが、\r\n → \n\n のように改行が2つに増えるバグにはなりません。ただし、順序を意識して書くのがベストプラクティスです。

// 改行数をカウント
function countNewlines(str) {
  const matches = str.match(/
?
|
/g);
  return matches ? matches.length : 0;
}

// 行数をカウント（改行数 + 1）
function countLines(str) {
  return str.split(/
?
|
/).length;
}

const text = "1行目
2行目
3行目
4行目";

console.log("改行数:", countNewlines(text)); // 3
console.log("行数:", countLines(text));    // 4

改行数: 3
行数: 4

const text = "Hello
World";

// NG: \n だけ削除 → \r が残る
const bad = text.replace(/
/g, "");
console.log(bad);             // "Hello\rWorld" ← \r が残っている！
console.log(bad.length);      // 11（\r の分が残る）

// OK: すべての改行コードに対応
const good = text.replace(/
?
|
/g, "");
console.log(good);            // "HelloWorld"
console.log(good.length);     // 10

Hello\rWorld
11
HelloWorld
10

const text = "Hello
World";

// console.log では改行される
console.log(text);
// Hello
// World

// JSON.stringify() ではエスケープされる
console.log(JSON.stringify(text));
// "Hello\nWorld" ← \n が文字列として表示される

// JSON.parse() で元に戻る
const parsed = JSON.parse(JSON.stringify(text));
console.log(parsed === text); // true

補足：APIにJSONで送信するデータに改行が含まれる場合は、JSON.stringify() が自動的にエスケープしてくれるため、手動で \n を \\n に変換する必要はありません。

const div = document.getElementById("output");
const text = "Hello
World";

// innerHTML: \n は空白として扱われる（改行されない）
div.innerHTML = text;
// 表示: "Hello World"（スペースに見える）

// textContent: \n はそのまま保持される
div.textContent = text;
// 表示: "Hello World"（改行されない、white-space:normalの場合）

// textContent + white-space:pre-line で改行が反映される
div.style.whiteSpace = "pre-line";
div.textContent = text;
// 表示: "Hello" と "World" が別の行に

const text = "A
B
C";

// NG: g フラグなし → 最初の \n だけ置換
console.log(text.replace(/
/, ""));
// "AB\nC" ← 2つ目の \n が残る

// OK: g フラグあり → すべて置換
console.log(text.replace(/
/g, ""));
// "ABC"

覚えておくべき3つのポイント

1. 改行コードは \n（LF）、\r（CR）、\r\n（CRLF）の3種類。正規表現 /\r?\n|\r/g ですべて対応できる
2. replace() に正規表現を使う場合はg フラグを必ず付ける（付けないと最初の1つしか置換されない）
3. ユーザー入力をHTMLに表示するときは textContent + white-space: pre-line が最も安全