【JavaScript入門】splitメソッドで文字列を分割する！正規表現の使い方も合わせて解説

JavaScriptで文字列を扱う際に、ひと繋がりの文章を特定の箇所で分割して扱いたい場面が発生することがあります。
文字列の操作を行うためのメソッドにはいくつか種類がありますが、その中で文字列の分割に使用できるのが、「split」 メソッドです。

今回は、JavaScriptの splitメソッドを使用する方法について、詳しく解説していきたいと思います。
その他のメソッドと組み合わせて使用したり、正規表現を使用してより複雑な条件に対応するといったようなメソッドの応用方法についても合わせて紹介していきますので、ぜひ参考にしてみてください。

JavaScriptのsplitメソッドとは？

splitメソッドは、文字列を分割する際に使用するメソッドです。
引数に指定した任意の文字列を区切り文字として、対象の文字列を複数の要素に分割することができます。

例えば、以下の日付表示を生年月日ごとにそれぞれ分割したい場合、スラッシュ(/) を区切り文字とすることで、文字列を３つの値に分割することができます。

例:
・2020/01/01
　→「2020」 「01」 「01」 の３つに分割

文字列でデータを取得した際に、値同士がカンマで区切って表現されるCSVデータなど、特定の書式にしたがって形成されている文字列をデータごとに分割したい場合などに活用することができます。

splitメソッドの使い方

さっそく、splitメソッドの使い方について見ていきましょう。

まずは、基本的な使い方から説明していきます。

基本構文

splitメソッドを使用する際の基本構文は、以下のように記述します。

【基本構文】

str.split(区切り文字, 最大要素数);

戻り値は、分割後の各文字列を要素に持つ配列です。

メソッドの第1引数には、文字列を分割する際の基準となる区切り文字を指定します。
引数の指定は、文字列だけでなく正規表現を使用して行うことも可能です。

第２引数には、戻り値として返される配列の最大要素数を任意で指定することができます。
分割後の要素数が指定値を超える場合は、０番目から最大値までの要素のみが格納され、それ以降の文字列は切り捨てられます。

文字列を分割して配列に格納する

基本構文が確認できたところで、実際の動きをサンプルコードで見てみましょう。

【サンプルコード】

const sampleStr = "apple,peach,orange";
const result = sampleStr.split(",");

console.log(result);

【実行結果】

[ 'apple', 'peach', 'orange' ]

区切り文字に指定したカンマを基準として、文字列が分割されているのが分かりますね。
このように、分割後のそれぞれの文字列が要素の値として配列に格納され、メソッドの結果として返されます。
(区切り文字は値には含まれません)

区切り文字には、空文字なども指定することができます。

【サンプルコード】

const sampleStr = "Hello World!";
const result = sampleStr.split(" ");

console.log(result);

【実行結果】

[ 'Hello', 'World!' ]

文字列を改行ごとに分割する

例えば、入力フォームのテキストエリアから文字列を取得した際など、ケースによっては改行コードが中に含まれている場合があります。
splitメソッドでは、改行コードを区切り文字に指定することも可能です。

【サンプルコード】

const sampleStr = 
`山田太郎
田中次郎
加藤三郎`;

const result = sampleStr.split(/\r\n|\n|\r/);

console.log(result);

【実行結果】

[ '山田太郎', '田中次郎', '加藤三郎' ]

詳しい使い方については後ほど解説を行いますが、改行コードを指定する際は上記のように、正規表現を使用すると確実です。

環境ごとの違いにより、改行コードは 「\r」 「\n」 「\r\n」 と３つの種類があります。
これら全てを通常の文字列で一度に指定するのは不可能であるため、正規表現を使用して指定するとどの環境でも同一のコードで対応することができます。

文字列の分割回数の上限を指定する

splitメソッドの第２引数には、配列の最大要素数を指定できると先ほど解説しました。

ここまで紹介してきたサンプルコードはいずれも引数を省略したケースでしたが、最大要素数を指定した場合の挙動についても確認してみましょう。

【サンプルコード】

const sampleStr = "500円,1200円,1800円,900円,2000円";

// 最大要素数の指定なし
const result1 = sampleStr.split(",");

// 最大要素数の指定あり
const result2 = sampleStr.split(",", 3);

console.log(result1);
console.log(result2);

【実行結果】

[ '500円', '1200円', '1800円', '900円', '2000円' ]
[ '500円', '1200円', '1800円' ]

このように、最大要素数の指定の有無によって、戻り値の配列に含まれる要素の数を調整することができます。

ただし、格納される要素の位置を指定することはできないため、注意が必要です。

区切り文字を指定しない場合

既に解説した通り、splitメソッドは指定した区切り文字を基準に文字列を分割するメソッドですが、引数に何も指定せずに使用した場合はどうなるのでしょうか？

以下のサンプルコードで試してみましょう。

【サンプルコード】

const sampleStr = "This is sampleCode";
const result = sampleStr.split();

console.log(result);

【実行結果】

[ 'This is sampleCode' ]

引数に null や undefined が渡される、もしくは指定そのものをしていないなどの理由で、引数なしでメソッドを利用した場合でも、上記のようにエラーが発生することはありません。
引数そのものが空の場合は、対象の文字列は分割されずにそのまま配列の要素として格納されます。

このケースでは TypeErrorが発生することがないため、例外処理を行いたい場合は null確認などで対応するようにしましょう。

【サンプルコード】

const sampleStr = "This is sampleCode";
const separateStr = null;

if (separateStr !== null){
    const result = sampleStr.split(separateStr);
} else {
    console.log("区切り文字の指定がありません。");
}

【実行結果】

区切り文字の指定がありません。

splitメソッドを応用する

splitメソッドの基本的な使い方については上述した通りとなりますので、ここからはメソッドの応用方法を紹介していきたいと思います。

joinメソッドと組み合わせて文字列を再結合する

１つ目は、joinメソッドと組み合わせて文字列の置換を行う応用方法です。
この応用方法は、ES2021で replaceAllメソッドが追加されるまで、対象の文字列全てを置換する手段としてよく活用されていた方法の１つでもあります。

現在となっては、基本的に replaceAllメソッドでほとんどのケースが対応可能ではありますが、一部の古いブラウザに対応する場合など、replaceAllメソッドを使用せずに文字列の置換を行いたい際に、この方法を活用することができます。

以下のサンプルコードで、実際の使い方を見てみましょう。

【サンプルコード】

const sampleStr = "2020-01-01";
const result = sampleStr.split("-").join("/");

console.log(result);

【実行結果】

2020/01/01

処理の順番として、splitメソッドで一旦文字列を分割した後、joinメソッドの引数に置換したい文字を指定して再度連結します。
これにより、指定した文字列を別の文字列に置換することができます。

また、文字列の置換を応用して、文字列内にある空白を削除したりなどもできます。

以下のサンプルコードを見てみましょう。

【サンプルコード】

const samlpeStr = "apple orange banana";
const result = samlpeStr.split(" ").join(",")

console.log(result);

【実行結果】

apple,orange,banana

文字列内にあった空白も無事に置換することができましたね。

ただし、splitメソッドでは半角や全角などはそれぞれ別の文字として判定される他、上記の指定方法では空白文字が連続した場合に要素の数が不必要に増えてしまうため、実際にはこのように簡単にはいかないケースが多々あります。

【サンプルコード】

const samlpeStr = "apple　orange  banana";

const result = samlpeStr.split(" ").join(",")
// 結果: apple　orange,,banana
// 半角の指定に対して全角が混じっている、空白が連続しているなどの理由で上手くいかない

空白文字に対応したい場合は、後ほど解説する正規表現を使用して指定するようにしましょう。

【サンプルコード】

const result = samlpeStr.split(/\s+/).join(",")
// 結果: apple,orange,banana

foreachメソッドと組み合わせて繰り返し処理をする

splitメソッドで配列として値を取得することで、foreachメソッドを使用したループ処理が可能となります。
分割した値に対して変更を加えたりする場合に、効率よく処理できるようになります。

【サンプルコード】

const sampleStr = "1990,2000,2003,2015,2022";

sampleStr.split(",").forEach(value => {
    console.log(value + "年")
});

【実行結果】

1990年
2000年
2003年
2015年
2022年

この方法を応用して、文字列の内容を変更したりすることも可能です。

【サンプルコード】

const sampleStr = "1990,2000,2003,2015,2022";

const yearArray = sampleStr.split(",");

yearArray.forEach((value, index, array) => {
    array[index] = value + "年";
});

const resultStr = yearArray.join(",");

console.log(resultStr);

【実行結果】

1990年,2000年,2003年,2015年,2022年

foreachは他のケースでもよく使用されるメソッドなので、合わせて覚えておくといいでしょう。

区切り文字の指定に正規表現パターンを使用する

これまでのサンプルコードのように、決まった文字列を区切り文字として指定するのではなく、特定の書式パターンを基準にしたい場合は、正規表現を活用しましょう。

正規表現とは、メタ文字と呼ばれる記号と文字を組み合わせて、文字列をパターン表現する記法のことを言います。
これにより、複数の文字列を同時に区切り文字として指定したり、「3桁の数字」 や 「連続する２文字以上の英字」 といったような柔軟な指定が可能となります。

正規表現でよく使用されるメタ文字の一部を、抜粋して紹介します。

この他にもいくつかのメタ文字が用意されており、これらと英数字を組み合わせてパターンの指定を行います。

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleStr = "This032is29sampleCode";
const result = sampleStr.split(/\d+/);

console.log(result);

【実行結果】

[ 'This', 'is', 'sampleCode' ]

正規表現を使用する際は、スラッシュ(/) でメタ文字を囲って記述します。

上記のサンプルコードでは、１つ以上が連続して並ぶ数字を区切り文字のパターンとして指定しています。
対象の文字列の中では 「032」 と 「29」 がこれに該当するため、それぞれの位置で文字列が分割され、配列の要素として格納されています。

また、複数の条件をパイプ(|) で区切って記述することにより、 「⚪︎⚪︎ もしくは ⚪︎⚪︎」 といったような、条件式における論理和 (or) に似た指定をすることも可能です。

【サンプルコード】

const sampleStr = "This032is29sampleCode";
const result1 = sampleStr.split(/\d{3}|\d{2}/);

// 条件の記述順で結果が異なる場合がある
const result2 = sampleStr.split(/\d{2}|\d{3}/);

console.log(result1);
console.log(result2);

【実行結果】

[ 'This', 'is', 'sampleCode' ]
[ 'This', '2is', 'sampleCode' ]

文字列がパターンに一致するかの判定は、左から記述した順に行われます。
そのため、上記の結果からも分かるように、記述する順番によっては分割する位置が変化する場合があります。

条件を複数指定する場合は、記述順に注意が必要です。

splitメソッドを使う際の注意点

最後に、splitメソッドを使用する際の注意点についても解説したいと思います。

分割対象の文字列が null / undefined の場合

splitメソッドで区切り文字の指定がない (もしくは null や undefined) 場合、エラーは発生せずに、元の文字列がそのまま配列の要素として返されることは既に解説しました。

では、分割対象として指定した変数が null や undefined だった場合はどうなるのでしょうか？

以下のサンプルコードで動作を確認してみましょう。

【サンプルコード】

let strNull = null;
const resultNull = strNull.split(",");

console.log(resultNull);

【実行結果】

TypeError: Cannot read properties of null (reading 'split')

区切り文字の時とは異なり、文字列が nullの場合にはエラーが発生します。
Undefinedの場合も同様です。

【サンプルコード】

let strUndefined;
const resultUndefined = strUndefined.split(",");

console.log(resultUndefined);

【実行結果】

TypeError: Cannot read properties of undefined (reading 'split')

エラーが発生すれば当然処理は止まってしまうため、区切り文字の時と同様に、null確認を行うなどして対策をしておく必要があります。

if文を使用して条件分岐させるのも方法の１つですが、この場合は TypeErrorが発生するので、try…catch文で例外処理を行うことができます。

【サンプルコード】

let strUndefined;

try{
    strUndefined.split()
}catch(e){
    console.log(e.message);
}

【実行結果】

Cannot read properties of undefined (reading 'split')

処理内容などに合わせて、適した方を活用するようにしましょう。

まとめ

いかがでしたか？
今回は、JavaScriptで splitメソッドを使用する方法について解説しました。

今回の記事でもいくつか紹介したように、文字列の操作を行うメソッドは、splitメソッドを含めて様々に存在します。
メソッド同士を上手く使い分けたり、組み合わせたりすることにより、複雑な処理にも柔軟に対応できるようになります。

ぜひ、今回の記事も参考にしながら、自在に使いこなせるようになるまでチャレンジしてみてください。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。