JavaScript【 split 】 ～ 文字列の分割

String オブジェクトのsplit メソッドは、文字列を分割して、配列を作成するメソッドです。
今回は、文字列の分割について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. split メソッドとは

　
String オブジェクトのsplit メソッドは、指定したセパレーターで 文字列を部分文字列に分割し、配列として返すメソッドです。

split メソッドは、次のように使用します。

文字列.split( セパレーター, 分割数 );

セパレーターは、文字列の区切りとなるもので、文字列や正規表現等で指定します。
セパレーター自身は、値として配列の中に格納されません。

分割数は、split メソッドの返り値となる配列について、要素の数の上限値を指定します。
配列の要素数を制限しなくても良い場合は、指定する必要はありません。

split メソッドを使用して、文字列を分割してみます。

let score = "89/78/96/74/81";
let sr = "/";
let aryScore = score.split(sr);

文字列を分割して作られた配列を出力すると、次のように表示されます。

　
配列データとして分かりやすく表示するために、「 JSON.stringify(aryScore); 」でJSON文字列に変換して表示しています。
（JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。）

上の配列の各要素を出力すると次のように表示され、分割された値が格納されているのが確認できます。

▲目次へ戻る

2. 正規表現を指定して分割

　
split メソッドのセパレーターに、正規表現を指定することもできます。

正規表現を指定して、文字列を分割してみます。
　

数字で分割

let str = "1安藤2井上3上原4江川5緒方";
let aryStr = str.split(/[0-9]/);

「 /[0-9]/ 」として、数字で区切るように指定しています。

文字列を分割して作られた配列を出力すると、次のように表示されます。

　
配列データとして分かりやすく表示するために、「 JSON.stringify(aryStr); 」でJSON文字列に変換して表示しています。
（JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。）
　
　
split メソッドとは直接関係ありませんが、上のサンプルのように、空文字の要素ができた場合には、filter メソッドを使用して削除することができます。

let aryStr2 = aryStr.filter(function(e){return e !== "";});

split メソッドは、Arrayオブジェクトで用意されているメソッドで、定義されたコールバック関数を 配列の各要素に対して呼び出し、コールバック関数が true となる値の配列を返します。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

コールバック関数「 function(e){return e !== “”;} 」は、要素が空文字でなければ true となるため、空文字でない要素のみの配列が返ります。
　

空文字の要素を削除した結果、配列の中身は次のようになります。

　
　

複数の条件で分割

let str = "安藤,井上 上原;江川,緒方";
let aryStr = str.split(/,|;|\s/);

「 /,|;|\s/ 」として、カンマ（ , ）または セミコロン（ ; ）または 空白（ \s ）で区切るように指定しています。

複数の条件で文字列を分割した結果、次のような配列が作成されます。

　
配列データとして分かりやすく表示するために、「 JSON.stringify(aryStr); 」でJSON文字列に変換して表示しています。
（JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。）

▲目次へ戻る

3. 改行コードで分割

　
split メソッドを使用して、改行毎に分割することもできます。

改行コードを指定して、文字列を分割します。
次のテキストエリアに、改行を伴う文字列を入力して、分割ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {

    let ary = document.getElementById("txt").value.split(/\n/);

    document.getElementById("dat").value = JSON.stringify(ary);
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <textarea id="txt" rows="4" placeholder="改行を伴う文字列を入力して下さい">
        </textarea>
        <input type="button" value="分割" onClick="dispAry()">
　　
        <input type="text" id="dat" placeholder="分割後の配列がここに表示されます">
    </form>
</div>

「 /\n/ 」として、改行コード（ \n ）で区切るように指定しています。

配列データとして分かりやすく表示するために、「 JSON.stringify(ary); 」でJSON文字列に変換して表示しています。
（JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。）

▲目次へ戻る