[JavaScript] split 文字列を配列にする

JavaScriptのsplitメソッドで、文字列を配列にするサンプルです。

目次

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

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

分割したい文字列.split ([区切り文字 or 正規表現 [ , 数値] ] );
  • 1つ目の引数で文字列を区切り文字列の配列を返します。
  • 2つ目の引数の数値は、分割する数を指定します。省略可能です。
  • 文字列の末尾が空文字の時も要素として取得されます。(Javaはデフォルトでは削除されます)
  • Stringオブジェクトのメソッドです。
  • 以下はMDNのsplitメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

カンマで区切る

<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>

2行目は、年月日をスラッシュで区切っています。
3行目は、スラッシュで区切って配列にしています。(バックスラッシュ(円記号)+/)

改行で区切る

<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を意味します。

1文字ずつ配列にする

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

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

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

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

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

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

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

取得する要素数を指定

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

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

文字列の末尾が空文字の時

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

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

2行目は、末尾がカンマで終わっています。
結果は、5行目のように空文字も要素として取得します。

正規表現のパターン

パターン パターンの意味
ABD ABDという文字か。
[ABD] A or B or Dのどれか1文字が入っているか。
[^ABD] A と B と D以外の1文字が入っているか。
[A-D] A or B or C or Dのどれか1文字が入っているか。
A|B|D A or B or Dのどれか1文字が入っているか。
[a-zA-Z] 英字の小文字のaからzまたは大文字のAからZのどれか1文字が入っているか。
^A 先頭の文字はAか。
A$ 最後尾の文字はAか。
* *の直前の文字が0回以上の繰り返し。
+ +の直前の文字が1回以上の繰り返し。
? ?の直前の文字が0回または1回の繰り返し。
{n} n回続いている。
{n,} n回以上続いている。
 . 任意の一文字を表す。
¥s 比較する文字に、空白1文字がある。
¥S 比較する文字に、空白以外の1文字がある。
¥d 比較する文字に、数字1文字がある。 ([0-9]と同じ)
¥D 比較する文字に、数字以外の1文字がある。  ([^0-9]と同じ)
¥w 比較する文字に、小文字の英字 or 大文字の英字 or 数値 or アンダースコアの1文字がある。
[a-zA-Z0-9_]と同じ
¥W ¥wの否定。
[^¥w]と同じ

正規表現のオプション

オプション 説明
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

関連の記事

[JavaScript] replace 文字列を置換する
[JavaScript] match 正規表現で値を返す

△上に戻る