【JavaScript】split()で文字列を分割する方法｜正規表現・CSV解析・実務パターンまで完全解説

この記事で学べること

• split()メソッドの基本構文と引数の使い方
• 文字列で分割（カンマ、スペース、タブ、改行など）
• 正規表現で複数の区切り文字を同時に指定する方法
• 分割数の制限（第2引数 limit）
• 区切り文字を結果に残す方法（キャプチャグループ）
• 空文字列で分割して1文字ずつ配列化する方法
• CSV/TSVのパーステクニック
• split + map/filter/reduce の組み合わせ
• Array.join()で逆変換（配列→文字列）
• 実務パターン（URL解析・パス分割・クエリパラメータ解析）
• ブラウザ互換性とよくある落とし穴

str.split(separator, limit)

const str = "apple,banana,orange,grape";

// カンマで分割
const fruits = str.split(",");
console.log(fruits);
// ["apple", "banana", "orange", "grape"]

// separator を省略
console.log(str.split());
// ["apple,banana,orange,grape"]  ← 配列の要素が1つ

実行結果

["apple", "banana", "orange", "grape"]
["apple,banana,orange,grape"]

const csv = "東京,大阪,名古屋,福岡";
const cities = csv.split(",");
console.log(cities);
// ["東京", "大阪", "名古屋", "福岡"]

const sentence = "JavaScript is a powerful language";
const words = sentence.split(" ");
console.log(words);
// ["JavaScript", "is", "a", "powerful", "language"]

const text = "1行目\n2行目\n3行目";
const lines = text.split("\n");
console.log(lines);
// ["1行目", "2行目", "3行目"]

// Windows の改行コード（\r\n）にも対応
const winText = "行A\r\n行B\r\n行C";
console.log(winText.split("\r\n"));
// ["行A", "行B", "行C"]

const data = "item1 - item2 - item3";
const items = data.split(" - ");
console.log(items);
// ["item1", "item2", "item3"]

// 区切り文字は完全一致で検索される
const log = "2024-01-15::ERROR::ファイルが見つかりません";
console.log(log.split("::"));
// ["2024-01-15", "ERROR", "ファイルが見つかりません"]

実行結果

["item1", "item2", "item3"]
["2024-01-15", "ERROR", "ファイルが見つかりません"]

// カンマ、セミコロン、スペースのいずれかで分割
const mixed = "apple,banana;cherry orange";
const result = mixed.split(/[,; ]/);
console.log(result);
// ["apple", "banana", "cherry", "orange"]

実行結果

["apple", "banana", "cherry", "orange"]

// \s+ で連続する空白（スペース・タブ・改行）をまとめて分割
const messy = "apple   banana\tcherry\norange";
const clean = messy.split(/\s+/);
console.log(clean);
// ["apple", "banana", "cherry", "orange"]

// 先頭・末尾の空白がある場合は空文字列に注意
const padded = "  hello  world  ";
console.log(padded.split(/\s+/));
// ["", "hello", "world", ""]  ← 先頭・末尾に空文字列

// trim() で先頭・末尾の空白を除去してから分割
console.log(padded.trim().split(/\s+/));
// ["hello", "world"]

注意：先頭や末尾に区切り文字がある場合、空文字列 "" が配列に含まれます。trim() で事前に除去するか、filter(Boolean) で空要素を除外しましょう。

// Windows(\r\n)、Mac旧(\r)、Unix(\n) すべてに対応
const multiOS = "行1\r\n行2\n行3\r行4";
const lines = multiOS.split(/\r?\n|\r/);
console.log(lines);
// ["行1", "行2", "行3", "行4"]

ポイント：/\r?\n|\r/ は「\r\n（Windows）」「\n（Unix/Mac）」「\r（旧Mac）」のすべてにマッチします。外部ファイルやAPIレスポンスを行分割するときの定番パターンです。

const str = "a,b,c,d,e";

// 最大3つまで分割
console.log(str.split(",", 3));
// ["a", "b", "c"]  ← "d", "e" は無視

// limit = 1 → 最初の要素のみ
console.log(str.split(",", 1));
// ["a"]

// limit = 0 → 空配列
console.log(str.split(",", 0));
// []

実行結果

["a", "b", "c"]
["a"]
[]

// ログの先頭部分だけ取得（日時とレベルのみ）
const log = "2024-01-15 ERROR Connection refused: server timeout";
const [date, level] = log.split(" ", 2);
console.log(date);   // "2024-01-15"
console.log(level);  // "ERROR"

// key=value の分割（値に = が含まれる場合）
const pair = "message=Hello=World";
const [key, ...rest] = pair.split("=");
const value = rest.join("=");
console.log(key);    // "message"
console.log(value);  // "Hello=World"

ポイント：limit は「残りを1つにまとめる」のではなく「超過分を切り捨て」ます。残り全体を取得するには、上記のように分割構文 + rest パラメータ + join を組み合わせましょう。

const expr = "10+20-30*40";

// キャプチャグループなし → 区切り文字は消える
console.log(expr.split(/[+\-*]/));
// ["10", "20", "30", "40"]

// キャプチャグループあり → 区切り文字が残る
console.log(expr.split(/([+\-*])/));
// ["10", "+", "20", "-", "30", "*", "40"]

実行結果

["10", "20", "30", "40"]
["10", "+", "20", "-", "30", "*", "40"]

const text = "今日は晴れです。明日は雨かもしれません。傘を持っていきましょう。";

// 句点で分割（句点を残す）
const sentences = text.split(/(。)/).filter(Boolean);
console.log(sentences);
// ["今日は晴れです", "。", "明日は雨かもしれません", "。", "傘を持っていきましょう", "。"]

// 区切り文字を前の要素に結合する
const merged = text.split(/(。)/).reduce((acc, part, i) => {
  if (i % 2 === 0) acc.push(part);
  else acc[acc.length - 1] += part;
  return acc;
}, []).filter(Boolean);
console.log(merged);
// ["今日は晴れです。", "明日は雨かもしれません。", "傘を持っていきましょう。"]

const str = "Hello";
console.log(str.split(""));
// ["H", "e", "l", "l", "o"]

// 文字列を反転
const reversed = str.split("").reverse().join("");
console.log(reversed);
// "olleH"

実行結果

["H", "e", "l", "l", "o"]
"olleH"

注意：split("") はサロゲートペア（絵文字や一部の漢字）を正しく分割できません。Unicode対応が必要な場合は Array.from(str) または [...str]（スプレッド構文）を使いましょう。

const emoji = "Hello?";

// split("") → サロゲートペアが壊れる
console.log(emoji.split(""));
// ["H", "e", "l", "l", "o", "\ud83c", "\udf0d"]  ← 壊れる

// スプレッド構文 → 正しく分割
console.log([...emoji]);
// ["H", "e", "l", "l", "o", "?"]

// Array.from → 同じく正しく分割
console.log(Array.from(emoji));
// ["H", "e", "l", "l", "o", "?"]

const csvData = `名前,年齢,都市
田中太郎,30,東京
佐藤花子,25,大阪
鈴木一郎,35,名古屋`;

// 行で分割 → 各行をカンマで分割
const rows = csvData.split("\n");
const headers = rows[0].split(",");
const data = rows.slice(1).map(row => {
  const cols = row.split(",");
  return Object.fromEntries(
    headers.map((h, i) => [h, cols[i]])
  );
});

console.log(data);

実行結果

[
  { 名前: "田中太郎", 年齢: "30", 都市: "東京" },
  { 名前: "佐藤花子", 年齢: "25", 都市: "大阪" },
  { 名前: "鈴木一郎", 年齢: "35", 都市: "名古屋" }
]

const tsv = "ID\t商品名\t価格\n1\tりんご\t150\n2\tバナナ\t100\n3\tみかん\t80";

const [header, ...body] = tsv.split("\n");
const keys = header.split("\t");

const products = body.map(line => {
  const vals = line.split("\t");
  return Object.fromEntries(keys.map((k, i) => [k, vals[i]]));
});

console.log(products);

実行結果

[
  { ID: "1", 商品名: "りんご", 価格: "150" },
  { ID: "2", 商品名: "バナナ", 価格: "100" },
  { ID: "3", 商品名: "みかん", 価格: "80" }
]

注意：上記は簡易パーサーです。フィールド内にカンマや改行を含む正式なCSV（RFC 4180準拠）を扱うには、Papa Parse などの専用ライブラリを検討しましょう。

// カンマ区切りの数値文字列を数値配列に変換
const nums = "10,20,30,40,50";
const numbers = nums.split(",").map(Number);
console.log(numbers);
// [10, 20, 30, 40, 50]

// 各単語の先頭を大文字化（Title Case）
const title = "hello world from javascript";
const titleCase = title
  .split(" ")
  .map(w => w[0].toUpperCase() + w.slice(1))
  .join(" ");
console.log(titleCase);
// "Hello World From Javascript"

実行結果

[10, 20, 30, 40, 50]
"Hello World From Javascript"

// 空要素を除去
const messy = ",apple,,banana,,,orange,";
const clean = messy.split(",").filter(Boolean);
console.log(clean);
// ["apple", "banana", "orange"]

// タグの中から特定のプレフィックスを持つものだけ抽出
const tags = "js:react,css:tailwind,js:vue,py:django";
const jsTags = tags
  .split(",")
  .filter(t => t.startsWith("js:"))
  .map(t => t.replace("js:", ""));
console.log(jsTags);
// ["react", "vue"]

// カンマ区切りの数値の合計
const prices = "100,250,300,150";
const total = prices
  .split(",")
  .reduce((sum, p) => sum + Number(p), 0);
console.log(total);
// 800

// 単語の出現回数をカウント
const text = "apple banana apple cherry banana apple";
const count = text.split(" ").reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});
console.log(count);
// { apple: 3, banana: 2, cherry: 1 }

実行結果

800
{ apple: 3, banana: 2, cherry: 1 }

const original = "apple,banana,orange";

// split で分割 → join で復元
const arr = original.split(",");
console.log(arr.join(","));   // "apple,banana,orange"
console.log(arr.join(" | ")); // "apple | banana | orange"
console.log(arr.join(""));    // "applebananaorange"

// 引数なし → カンマで結合
console.log(arr.join());     // "apple,banana,orange"

実行結果

"apple,banana,orange"
"apple | banana | orange"
"applebananaorange"
"apple,banana,orange"

// ケバブケース → キャメルケース
function kebabToCamel(str) {
  return str.split("-").map((word, i) =>
    i === 0 ? word : word[0].toUpperCase() + word.slice(1)
  ).join("");
}

// スネークケース → ケバブケース
function snakeToKebab(str) {
  return str.split("_").join("-");
}

console.log(kebabToCamel("background-color"));
// "backgroundColor"

console.log(snakeToKebab("user_first_name"));
// "user-first-name"

実行結果

"backgroundColor"
"user-first-name"

const url = "https://example.com/blog/2024/javascript-split";

// URLオブジェクトで安全にパス取得 → split で分割
const pathname = new URL(url).pathname;
const segments = pathname.split("/").filter(Boolean);
console.log(segments);
// ["blog", "2024", "javascript-split"]

// 各セグメントを取得
const [section, year, slug] = segments;
console.log(section);  // "blog"
console.log(year);     // "2024"
console.log(slug);     // "javascript-split"

// split で手動解析（仕組みの理解用）
const query = "page=2&category=js&sort=date&order=desc";

const params = query.split("&").reduce((obj, pair) => {
  const [key, ...rest] = pair.split("=");
  obj[key] = rest.join("=");  // 値に = が含まれる場合に対応
  return obj;
}, {});

console.log(params);
// { page: "2", category: "js", sort: "date", order: "desc" }

実行結果

{ page: "2", category: "js", sort: "date", order: "desc" }

ポイント：実務では new URLSearchParams(query) を使うのがベストプラクティスです。splitによる手動パースは仕組みの理解や、URLSearchParams が使えない環境で役立ちます。

const url = "https://example.com/search?q=JavaScript+split&page=3";
const searchParams = new URL(url).searchParams;

console.log(searchParams.get("q"));     // "JavaScript split"
console.log(searchParams.get("page"));  // "3"

// 全パラメータをオブジェクトに変換
const allParams = Object.fromEntries(searchParams);
console.log(allParams);
// { q: "JavaScript split", page: "3" }

const filePath = "/home/user/documents/report.pdf";

// ディレクトリとファイル名を分離
const parts = filePath.split("/");
const fileName = parts.pop();        // "report.pdf"
const dirPath = parts.join("/");    // "/home/user/documents"

// ファイル名と拡張子を分離
const [name, ext] = fileName.split(".");
console.log(name);  // "report"
console.log(ext);   // "pdf"

// 拡張子が複数のドットを含む場合（例: archive.tar.gz）
const complex = "archive.tar.gz";
const dotParts = complex.split(".");
const baseName = dotParts[0];              // "archive"
const fullExt = dotParts.slice(1).join("."); // "tar.gz"
console.log(baseName, fullExt);

実行結果

"report"
"pdf"
"archive" "tar.gz"

const email = "user@example.com";
const [localPart, domain] = email.split("@");

console.log(localPart);  // "user"
console.log(domain);     // "example.com"

// ドメインからTLDを取得
const domainParts = domain.split(".");
const tld = domainParts[domainParts.length - 1];
console.log(tld);  // "com"

// 落とし穴1: 空文字列の分割
const empty = "";
console.log(empty.split(","));        // [""]  ← 空配列ではない!
console.log(empty.split(",").length); // 1    ← 0 ではない!

// 安全なパターン: 空文字列チェック
function safeSplit(str, sep) {
  if (!str) return [];
  return str.split(sep).filter(Boolean);
}

console.log(safeSplit("", ","));           // []
console.log(safeSplit("a,,b,,c", ","));   // ["a", "b", "c"]
console.log(safeSplit("a,b,c", ","));     // ["a", "b", "c"]

ポイント：split()自体はすべてのブラウザで問題なく使えます。ただし、IE では正規表現のキャプチャグループが結果に含まれない挙動があるため、IE 対応が必要な場合は注意が必要です。

この記事のまとめ

• split(separator, limit) で文字列を配列に分割できる
• 区切り文字には文字列と正規表現の両方が使える
• /[,;\s]/ のように複数の区切り文字を同時に指定可能
• 第2引数 limit で分割数を制限できる
• キャプチャグループ () を使うと区切り文字を結果に残せる
• split("") で1文字ずつ分割（サロゲートペアには [...str] を使う）
• split + map/filter/reduce の組み合わせで高度な文字列処理が可能
• join() で逆変換（配列→文字列）ができる
• URL解析・パス分割・クエリ解析など実務で幅広く活用できる