JavaScript split 文字列を配列にする(正規表現)

概要	splitとは(文字列を分割して配列にする)
区切り文字	カンマで区切る
	半角スペースで区切る
	タブで区切る
	スラッシュで区切る
	改行で区切る
	ドットで区切る
	空文字で区切る(1文字ずつ配列にする)
	末尾が区切り文字の時、最後は要素になる?
正規表現	正規表現で区切り文字をORで指定
	正規表現のオプション
	リテラル記法とコンストラクタ
2つ目の引数	取得する要素数を指定

splitとは(文字列を分割して配列にする)

分割したい文字列.split ([区切り文字 or 正規表現 [ , 数値] ] );

splitは、文字列を分割して配列を返します。
1つ目の引数は、区切り文字の場合は、文字列を区切り文字で区切ります。
正規表現の場合は、文字列を正規表現で区切ります。
2つ目の引数の数値は、分割する数を指定します。省略可能です。
文字列の末尾が空文字の時も要素として取得されます。(Javaはデフォルトでは削除されます)
Stringオブジェクトのメソッドです。

カンマで区切る

<script>
	const str1 = "赤,黄,青";
	const c1 = str1.split(",");
	
	for (let i = 0; i < c1.length; i++) {
		console.log(c1[i]); // 赤 黄 青が出力される
	}
	console.log(c1); //["赤", "黄", "青"]
</script>

3行目は、文字列をカンマ区切りで配列にしています。

半角スペースで区切る

<script>
	const str1 = "赤 黄 青";
	const c1 = str1.split(/\s/);
	
	for (let i = 0; i < c1.length; i++) {
		console.log(c1[i]); // 赤 黄 青が出力される
	}
	console.log(c1); //["赤", "黄", "青"]
</script>

3行目は、文字列を半角スペースで区切って配列にしています。(バックスラッシュ(円記号)＋S)

タブで区切る

<script>
	const str1 = "赤	黄	青";
	const c1 = str1.split(/\t/);
	
	for (let i = 0; i < c1.length; i++) {
		console.log(c1[i]); // 赤 黄 青が出力される
	}
	console.log(c1); //["赤", "黄", "青"]
</script>

3行目は、文字列をタブで区切って配列にしています。(バックスラッシュ(円記号)＋t)

スラッシュで区切る

<script>
  const str1 = "2020/05/21";
  const c1 = str1.split("/");

  for (let i = 0; i < c1.length; i++) {
    console.log(c1[i]); // 2020 05 21
  }
  console.log(c1); //["2020", "05", "21"]
</script>

区切り文字は、文字としてのスラッシュを指定します。

改行で区切る

<script>
  const str1 = "赤と黄\r\n青と緑";
  const c1 = str1.split(/\r\n|\n/);

  for (let i = 0; i < c1.length; i++) {
    console.log(c1[i]); // 赤と黄 青と緑が出力される
  }
  console.log(c1); //["赤と黄", "青と緑"]
</script>

\r\nは復帰改行(CRLF)、\nは改行(LF)です。パイプ(|)は正規表現でorを意味します。

ドットで区切る

<script>
  const str1 = "test.txt";
  const c1 = str1.split(".");

  for (let i = 0; i < c1.length; i++) {
    console.log(c1[i]); // test txtが出力される
  }
  console.log(c1); //["test", "txt"]
</script>

区切り文字は、文字としてのドットを指定します。

空文字で区切る(1文字ずつ配列にする)

<script>
  const str1 = "あいうえお";
  const c1 = str1.split("");

  console.log(c1); //["あ", "い", "う", "え", "お"]
</script>

splitメソッドの引数が空文字の場合、1文字ずつの配列になります。

末尾が区切り文字の時、最後は要素になる?

<script>
  const str1 = "a,b,c,,";
  const c1 = str1.split(",");

  console.log(c1); //["a", "b", "c", "", ""]
</script>

2行目は、末尾がカンマで終わっています。
splitの引数にカンマ(",")を指定した場合、空文字も要素として取得します。
5行目は、aとbとcと空文字2つ("")が表示されています。

正規表現で区切り文字をORで指定

<script>
	const str1 = "あ,い:う,え";
	const c1 = str1.split(/[,:]/);

	console.log(c1); // ["あ", "い", "う", "え"]
</script>

3行目の[,:]は、カンマ(,)またはコロン(:)という正規表現です。

正規表現の一覧表

正規表現のオプション

オプション	説明
g	マッチしたものをすべて返す(Global search.) →splitメソッドの場合、このオプションがなくても全て返します
i	大文字と小文字の区別をしない(Case-insensitive search.)
m	複数行をマッチする

リテラル記法とコンストラクタ

  const c1 = str1.split(/,/); // リテラル記法
  const c1 = str1.split(","); // コンストラクタ

1行目のsplitの引数は、リテラル記法です。正規表現が変化しない場合はこちらを使用します。
2行目のsplitの引数は、コンストラクタです。実行時にコンパイルします。動的に変わる時に使用します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor

取得する要素数を指定

<script>
	const str1 = "あ,い,う,え";
	const c1 = str1.split(",",2);
	
	console.log(c1); // ["あ", "い"]
</script>

3行目は、2つ目の引数が2なので戻りの配列の要素数は2つです。