【JavaScript】split の使い方｜文字列を配列に変換・区切り文字・正規表現・limit・join との組み合わせまで解説

const array = str.split(separator, limit);
// separator: 区切り文字（文字列 or 正規表現）。省略すると元の文字列1つの配列
// limit:     結果の配列の最大要素数（省略可）
// 戻り値:    分割された文字列の配列

console.log("a,b,c".split(","));     // ["a", "b", "c"]
console.log("Hello World".split(" ")); // ["Hello", "World"]
console.log("abc".split(""));          // ["a", "b", "c"]（1文字ずつ）
console.log("abc".split());            // ["abc"]（分割されない）

// 区切り文字は1文字でなくてもよい
console.log("aXXbXXc".split("XX")); // ["a", "b", "c"]

// 改行コード \r\n（Windows）
console.log("line1\r\nline2\r\nline3".split("\r\n"));
// ["line1", "line2", "line3"]

// 連続スペースがあっても正しく分割
console.log("apple  banana   cherry".split(/\s+/));
// ["apple", "banana", "cherry"]

// カンマ、セミコロン、スペースのいずれかで分割
console.log("a,b;c d".split(/[,;\s]/));
// ["a", "b", "c", "d"]

// \r\n / \n / \r のいずれでも分割
console.log("line1\r\nline2\nline3\rline4".split(/\r?\n|\r/));
// ["line1", "line2", "line3", "line4"]

// キャプチャなし: 区切り文字は除去される
console.log("a1b2c3d".split(/\d/));
// ["a", "b", "c", "d"]

// キャプチャあり: 区切り文字も配列に含まれる
console.log("a1b2c3d".split(/(\d)/));
// ["a", "1", "b", "2", "c", "3", "d"]

const csv = "apple,banana,cherry,date,elderberry";

// 最大3要素まで
console.log(csv.split(",", 3)); // ["apple", "banana", "cherry"]

// limit=1 → 分割しない（先頭だけ）
console.log(csv.split(",", 1)); // ["apple"]

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

const str = "Hello?";

// split(""): サロゲートペアが壊れる
console.log(str.split("").length); // 7（?が2要素に分割）

// スプレッド構文: サロゲートペア対応
console.log([...str].length); // 6（正しい）

// Array.from: 同様に対応
console.log(Array.from(str).length); // 6

// split + join で全置換
const str = "2026-03-31";
console.log(str.split("-").join("/")); // "2026/03/31"

function toTitleCase(str) {
  return str
    .split(" ")
    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
}

console.log(toTitleCase("hello world")); // "Hello World"

function reverse(str) {
  return [...str].reverse().join("");
}

console.log(reverse("Hello")); // "olleH"
console.log(reverse("abc?")); // "?cba"（スプレッド構文で絵文字対応）

console.log("a,,b,,c".split(","));
// ["a", "", "b", "", "c"]（空要素が含まれる）

// filter(Boolean) で空要素を除去
console.log("a,,b,,c".split(",").filter(Boolean));
// ["a", "b", "c"]

// 先頭・末尾の区切り文字も同様
console.log(",a,b,c,".split(",").filter(Boolean));
// ["a", "b", "c"]

function csvRowToObject(headers, row) {
  const values = row.split(",");
  const obj = {};
  headers.forEach((key, i) => {
    obj[key] = values[i];
  });
  return obj;
}

const headers = ["name", "age", "city"];
const row = "田中,30,東京";

console.log(csvRowToObject(headers, row));
// { name: "田中", age: "30", city: "東京" }

function parseQuery(queryString) {
  return queryString
    .replace(/^\?/, "")  // 先頭の ? を除去
    .split("&")
    .reduce((obj, pair) => {
      const [key, value] = pair.split("=");
      obj[decodeURIComponent(key)] = decodeURIComponent(value || "");
      return obj;
    }, {});
}

console.log(parseQuery("?q=javascript&lang=ja&page=2"));
// { q: "javascript", lang: "ja", page: "2" }

const input = "JavaScript, TypeScript, React, Node.js";

// カンマ+スペースで分割 → 前後の空白を除去
const tags = input.split(",").map(tag => tag.trim());
console.log(tags);
// ["JavaScript", "TypeScript", "React", "Node.js"]

const path = "/home/user/documents/report.pdf";
const parts = path.split("/").filter(Boolean);

console.log(parts);
// ["home", "user", "documents", "report.pdf"]

const filename = parts[parts.length - 1];
const [name, ext] = filename.split(".");
console.log(name); // "report"
console.log(ext);  // "pdf"