【Javascript】文字列を指定の条件で分割して配列にする方法～split関数 正規表現～

任意の文字列を配列に変換するSplit関数の使用方法について紹介していきます。

実際の開発でもよく利用されるので丸暗記はしなくても問題ありませんがこのような方法があるということだけはざっくりと覚えておきましょう。

文字列を配列に分割するSplit関数

Split関数とは指定した条件で文字列を分割して配列に変換する便利な関数です。

書式

const 作成したい配列名 = 分割したい文字列を格納した変数.split(文字列を区切る条件);

配列に変換する変数とSplit関数はドットでつなげて記述します。

変換したら新たに配列を宣言してそちらに代入しましょう。

例えば、文字列を格納した変数dogsを犬種名毎に配列に変換したいとした場合の記述は下記のようになります。

const dogs = "ボルゾイとアフガンハウンドとグレーハウンド";

console.log(dogs);
//出力結果 ボルゾイとアフガンハウンドとグレーハウンド 

const dogs2 = dogs.split("と");
	
console.log(dogs2);
//出力結果 ["ボルゾイ", "アフガンハウンド", "グレーハウンド"]

上記では3種類の犬種名が格納されている変数dogsを配列dogs2に変換しています。

変数dogsをドットでsplit関数と結合してカッコ内に指定したい区切り文字を記述しています。

今回指定している区切り文字は”と”です。

変換する際には新たな配列として宣言して代入する必要があるためdogs2を宣言して代入しています。

区切り文字を指定して文字列を配列に変換

区切り文字を指定して任意の文字列を配列に変換する方法について紹介していきます。

カンマ(,)で区切る

単語をカンマで区切っている文字列が格納されている変数dogsを配列dogs2に変換して出力します。

const dogs = "シーズー,ダックスフンド,パグ";

console.log(dogs);
//出力結果 "シーズー,ダックスフンド,パグ"

const dogs2 = dogs.split(",");
	
console.log(dogs2);
//出力結果 ["赤", "黄", "青"]

6行目で、文字列をカンマ区切りで分割して配列に変換しています。

スラッシュ(/)で区切る

const today = "2022/08/09";

console.log(today); 
//出力結果　2022/08/09 

const today2 = today.split("/");

console.log(today2); 
//出力結果 ["2022", "08", "09"]

2行目で、文字列をスラッシュ(/)区切りで分割して配列に変換しています。

ドットで区切る

単語をドットで区切っている文字列が格納されている変数dogsを配列dogs2に変換して出力します。

const dogs = "ボーダーコリー.マルチーズ.ミニチュアピンシャー";

console.log(dogs); 
//出力結果　"ボーダーコリー.マルチーズ.ミニチュアピンシャー"

const dogs2 = dogs.split(".");

console.log(dogs2); 
//出力結果　["ボーダーコリー", "マルチーズ", "ミニチュアピンシャー"]

6行目で、文字列をドット区切りで分割して配列に変換しています。

正規表現を指定して文字列を配列に変換

正規表現を指定して任意の文字列を配列に変換する方法について紹介していきます。

半角スペースで区切る

単語を半角スペースで区切っている文字列が格納されている変数dogsを配列dogs2に変換して出力します。

const dogs = "チワワ コーギー プードル";

console.log(dogs);
//出力結果 "チワワ コーギー プードル"

const dogs2 = dogs.split(/\s/);
	
console.log(dogs2);
//出力結果 ["チワワ", "コーギー", "プードル"]

6行目で、文字列を半角スペース区切りで分割して配列に変換しています。

split()内に記述している半角スペースの指定方法はバックスラッシュで円記号 + s を囲って指定ます。

ちなみにですが、split(” “)のように半角スペースを(“”)ダブルクォーテーションで囲って記述することはできないので注意しましょう。

タブで区切る

単語をタブで区切っている文字列が格納されている変数dogsを配列dogs2に変換して出力します。

const dogs = "パピヨン	シェルティ	ジャックラッセルテリア";

console.log(dogs);
//出力結果 "パピヨン	シェルティ	ジャックラッセルテリア"

const dogs2 = dogs.split(/\t/);
	
console.log(dogs2);
//出力結果 ["パピヨン", "シェルティ", "ジャックラッセルテリア"]

6行目で、文字列をタブ区切りで分割して配列に変換しています。

split()内に記述しているタブの指定方法はバックスラッシュで円記号 + t を囲って指定ます。

前述した半角スペースの場合と同じく、split(” “)のようにタブを(“”)ダブルクォーテーションで囲って記述することはできないので注意しましょう

区切り文字をORで複数指定する(A もしくは Bで区切る)

正規表現を利用して複数の区切り文字を指定する方法について紹介します。

const dogs = "シュナウザー,ペキニーズ.シャーペイ,マスティフ";

console.log(dogs);
//出力結果　シュナウザー,ペキニーズ.シャーペイ,マスティフ 

const dogs2 = dogs.split(/[,.]/);

console.log(dogs2);
 //出力結果 ["シュナウザー", "ペキニーズ", "シャーペイ", "マスティフ"]

6行目の[,.]は、カンマ(,)またはドット(.)がある箇所で文字列を区切るという正規表現です。[]大括弧の中に複数の区切り文字を指定することができます。

2つだけではなく下記のように3つ以上の指定も行うことができます。

const dogs = "シュナウザー,ペキニーズ.シャーペイ/マスティフ";

console.log(dogs);
//出力結果　シュナウザー,ペキニーズ.シャーペイ/マスティフ 

const dogs2 = dogs.split(/[,./]/);  //区切り文字としてカンマ(,)またはドット(.)またはスラッシュ(/)を指定

console.log(dogs2);
 //出力結果 ["シュナウザー", "ペキニーズ", "シャーペイ", "マスティフ"]

特殊な条件を利用した配列への変換

ちょっと特殊な配列への変換方法をご紹介していきます。使う頻度はあまり多くないものもありますがこんな指定方法もあると頭の片隅にでも入れておいてください。

1文字ずつ配列にする

1~5までの連番を文字列として格納している変数numを配列に変換します。

const num = "12345";

console.log(num);
//出力結果 12345 

const num2 = num.split("");

console.log(num2);
//出力結果  ["1", "2", "3", "4", "5"]

splitメソッドの引数が空文字(ダブルクォーテーションのみ)の場合、1文字ずつの配列になります。

取得する要素数を指定

カンマ(,)区切りで4つの日本犬の名称を持つ変数dogsを定義しています。その配列から任意の要素数を指定して配列dogs2に変換します。

const dogs = "秋田犬,柴犬,土佐犬,紀州犬";

console.log(dogs);
//出力結果　秋田犬,柴犬,土佐犬,紀州犬 

const dogs2 = dogs.split(",",3);
	
console.log(dogs2); 
//出力結果 ["秋田犬", "柴犬", "土佐犬"]

6行目は、第二引数(2つ目の引数のこと)が3なので作成される変数dogs2の要素数は3つです。

最終的な出力結果の通り、紀州犬を除く3種類の日本犬の名前を持つ配列が作成されたことがわかります。

末尾が指定した区切り文字の時の挙動について

Split関数で配列に変換したい文字列の末尾が区切り文字として使用したい条件と一致している場合の動作について紹介していきます。

const dogs = "スピッツ,チャウチャウ,チン,,";

console.log(dogs);
//出力結果 スピッツ,チャウチャウ,チン,, 

const dogs2 = dogs.split(",");

console.log(dogs2); 
//出力結果 ["スピッツ", "チャウチャウ", "チン", "", ""]

1行目で変数dogsに格納している文字列は末尾がカンマ(,)で終わっています。
splitの引数に区切り文字としてカンマ(“,”)を指定した場合、空文字も要素として認識され取得します。

そのためsplit関数を利用した文字列の変換後に作成される配列dogs2は”スピッツ,チャウチャウ,チン”の3つの犬種名と空文字の要素を2つを合わせた5つの要素を持っています。