【JavaScript】split()を使って文字列を分割し配列に格納するには

split()メソッドの使い方の記事です。

指定した文字で分割して、配列で返してくれるとても便利な子です。

split()メソッドの構文

構文は次のとおりです。

str.split([separator [,limit]])

strは分割前の文字列全体です。

separatorは区切り文字。

カンマやハイフンなど、直接文字列を指定できます。

正規表現も指定でき、改行や数字などでも分割できます。

limitは配列にする要素数の上限、省略可能です。

指定した場合、limitを超える部分は切り捨てられ、配列に格納されません。

戻り値は配列が返ってきます。

区切り文字で分割した文字が要素一つひとつに入ります。

リテラルで文字列を分割する

例えば、CSVのデータを配列に入れたかったら、カンマ「,」で分割ですよね。

str = "cafemocha,soylatte,espresso";
list_array = str.split(",");

図で書くと、こんなイメージです。

正規表現で文字列を分割する

正規表現を使った分割も出来ます。

例えば次のように、cafemocha、soylatte、espressoが改行された文字列があったとします。

cafemocha

soylatte

espresso

改行は「\n」で行われているので、次のように書けます。

str = "cafemocha\nsoylatte\nespresso";
list_array = str.split(/\n/);

数字で分割したい場合。

何かの料理の作り方です。

str = "１．鍋にお湯５００ｍｌをよく沸騰させ、麺を入れて３分間ゆでてください。２．あらかじめ粉末スープを器に入れておきます。３．麺がほぐれたら、鍋からお湯だけを先に入れ、粉末スープとよく混ぜて溶かします。４．麺を入れて、最後に秘伝のタレを加え、よく混ぜれば出来上がりです。熱いので気を付けてお召し上がりください。";
list_array = str.split(/[０-９]．/);

各要素に次のように文字列が入っていきます。

console.log(list_array[0]); //
console.log(list_array[1]); //鍋にお湯５００ｍｌをよく沸騰させ、麺を入れて３分間ゆでてください。
console.log(list_array[2]); //あらかじめ粉末スープを器に入れておきます。

「[０-９]」とすると、うっかり「５００」のところでも分割されそうになります。

「[０-９]．」のようなちょっとした工夫があると良いでしょう。

区切り文字も配列に入れる

区切り文字をカッコ()でくくると、区切り文字も１つの要素として配列に入ります。

先ほどの数字で分割した例を使います。

str = "１．鍋にお湯５００ｍｌをよく沸騰させ、麺を入れて３分間ゆでてください。２．あらかじめ粉末スープを器に入れておきます。３．麺がほぐれたら、鍋からお湯だけを先に入れ、粉末スープとよく混ぜて溶かします。４．麺を入れて、最後に秘伝のタレを加え、よく混ぜれば出来上がりです。熱いので気を付けてお召し上がりください。";
list_array = str.split(/([０-９]．)/);

これで配列の中身はどうなるか。

各要素に次のように区切り文字もそれぞれ入っていきます。

console.log(list_array[0]); //
console.log(list_array[1]); //１．
console.log(list_array[2]); //鍋にお湯５００ｍｌをよく沸騰させ、麺を入れて３分間ゆでてください。
console.log(list_array[3]); //２．
console.log(list_array[4]); //あらかじめ粉末スープを器に入れておきます。

まとめ：str.split(区切り文字, [上限]) で分割できる

splitは便利ですね。

リテラルでも正規表現でも、上手く文字列を分割してくれます。

この記事ではJavaScriptのsplitメソッドについて書きましたが、PythonにもVBにもC#などにも、splitがあります。

どれも似たような動きをするので、いったん１つの言語で覚えてしまえば後々役に立つはずです。