【JavaScript】指定した区切り文字で文字列を分割できるsplitメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで指定した区切り文字で文字列を分割できるsplitメソッドについて

splitメソッドとは
サンプルプログラム

と、丁寧に解説していきます。

1 前提条件：実行環境について
2 splitメソッドとは
3 splitメソッドを解説するプログラムの概要
- 3.1 HTMLサンプルプログラム
- 3.2 JavaScriptサンプルプログラム
4 実行結果
5 まとめ：splitメソッドを使ってみよう！

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

splitメソッドとは

splitメソッドとは、文字列を指定した区切り文字で分割して配列を作成して返すメソッドです。
splitメソッドは以下のように使います。

【分割したい文字列】.split(【区切り文字】, 【分割する数】)

1	【分割したい文字列】.split(【区切り文字】, 【分割する数】)

splitメソッドの引数は第一引数、第二引数ともに任意です。

第二引数について注意点が2点あります。
1点目は、文字列を分割して格納する最大の要素数であるということです。
指定した数に要素数が達した場合、それ以降の文字列は配列に格納されません。
2点目は、「0」を指定した場合、分割そのものがされない点です。
第二引数を指定する場合は、ご注意ください。

splitメソッドのサンプルは以下になります。

var sample = 'テスト/ほげほげ/テスト'
var result = sample.split('/', 2);

1 2	var sample = 'テスト/ほげほげ/テスト' var result = sample.split('/', 2);

上記のサンプルだとresultには

0:テスト
1:ほげほげ

1 2	0:テスト 1:ほげほげ

という配列が返されます。

では、次の章で実際に使ってみます。

splitメソッドを解説するプログラムの概要

splitメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

JavaScriptで

最大分割回数を指定しないで分割
最大分割回数を指定して分割

のパターンで結果をHTMLに表示させます。

フォルダ構成は以下のようになっています。
splitメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>splitサンプル</title>
    </head>
    <body>
        <h1>分割する文字列</h1>
        <div id="splitStr"></div>

        <h1>最大分割回数を指定しないで分割</h1>
        <div id="divSplitArray"></div>

        <h1>最大分割回数を指定して分割</h1>
        <div id="divSplitArraySpecify"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>splitサンプル</title>

</head>

<body>

<h1>分割する文字列</h1>

<h1>最大分割回数を指定しないで分割</h1>

<h1>最大分割回数を指定して分割</h1>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

var splitStr = 'リンゴ/オレンジ/さくらんぼ/ナシ/モモ';
var divSplitStr = document.getElementById('splitStr');
divSplitStr.innerHTML = splitStr;

// 最大分割回数を指定しないで分割
var splitArray = splitStr.split('/');
var divSplitArray = document.getElementById('divSplitArray');
divSplitArray.innerHTML = displayResult(splitArray);

// 最大分割回数を指定して分割
var splitArraySpecify = splitStr.split('/', 2);
var divSplitArraySpecify = document.getElementById('divSplitArraySpecify');
divSplitArraySpecify.innerHTML = displayResult(splitArraySpecify);

// 実行結果の分を作成
function displayResult(array)
{
    var result = '';
    for (let i = 0; i < array.length; i++) {
    result +=     i + '番目：' + array[i] + '<br >';
    }
    return result;
}

var splitStr = 'リンゴ/オレンジ/さくらんぼ/ナシ/モモ';

var divSplitStr = document.getElementById('splitStr');

divSplitStr.innerHTML = splitStr;

// 最大分割回数を指定しないで分割

var splitArray = splitStr.split('/');

var divSplitArray = document.getElementById('divSplitArray');

divSplitArray.innerHTML = displayResult(splitArray);

// 最大分割回数を指定して分割

var splitArraySpecify = splitStr.split('/', 2);

var divSplitArraySpecify = document.getElementById('divSplitArraySpecify');

divSplitArraySpecify.innerHTML = displayResult(splitArraySpecify);

// 実行結果の分を作成

function displayResult(array)

{

var result = '';

for (let i = 0; i < array.length; i++) {

result += i + '番目：' + array[i] + '<br >';

}

return result;

}

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。
splitメソッドの実行確認

splitメソッドで指定した区切り文字で分割でき、最大分割回数を指定したときのみ分割を制限できていることが確認できました。

まとめ：splitメソッドを使ってみよう！

以上がJavaScriptのsplitメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ