JavaScriptのsplitで文字列を分割する方法

    • このページをはてなブックマークに追加

    公開日:2018年10月12日 最終更新日:2019年09月26日

    JavaScriptのsplit()メソッドは指定の「区切り文字」で文字列を分割する事のできるメソッドです。分割された文字は、配列で取得できます。
    本コラムでは、split()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. split()メソッド

    1.1. split()メソッドの基本書式

    ●split()メソッド

    stringObj.split([delimiter], [limit]])

    ▲ページトップへ戻る

    1.2. パラメーター

    [delimiter]:

    (省略可能)文字列を区切る為の「区切り文字(delimiter)」を指定します。delimiterには、1文字以上の文字や記号、正規表現を指定する事ができます。delimiter(区切り文字)を指定しない場合は、元の文字列は分割されません。

    [limit]:

    (省略可能)分割結果の上限数を指定を指定します。

    ▲ページトップへ戻る

    1.3. 戻り値

    区切り文字(delimiter)で分割された文字の配列を返します。

    ▲ページトップへ戻る

    2. split()メソッドの使い方

    2.1. 空白で区切って文字列を分割する方法

    「空白」で区切られた文字列を分割してみましょう。

    var stringObj = "文字1 文字2 文字3"; //分割対象の文字列
    stringObj.split(" "); //Stringオブジェクトをスペースで分割する

    サンプルHTMLの「JS_Sample1.html」をコピーして保存する場合は、ファイル形式を「utf-8」にします。

    splitメソッドに区切り文字の空白(スペース)をダブルクォーテーションで囲って指定します。

    ●JS_Sample1.html ----------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>split() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、文字列の「リンゴ ミカン バナナ ストロベリー」が分割されて配列に格納されます。</p>
    <button onclick="splitFunction01()">splitの実行</button>
    <p id="sample1"></p>
    <script>
    function splitFunction01() {
    var stringObj = "リンゴ ミカン バナナ ストロベリー";
    var result = stringObj.split(" ");
    document.getElementById("sample1").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ----------------------------

    以下「split実行」ボタンをクリックして動きを確認して下さい。分割された文字配列をid属性が「sample2」の段落に表示しています。

    ●実行結果

    ボタンをクリックすると、文字列の「リンゴ ミカン バナナ ストロベリー」が分割されて配列に格納されます。

    ▲ページトップへ戻る

    2.2. カンマ区切りで文字列を分割する方法

    次にカンマ「,」で区切られた文字列データーを分割してみましょう。

    var stringObj = "文字1,文字2,文字3"; //カンマ区切りの文字列
    stringObj.split(","); //Stringオブジェクトをカンマで分割する

    ●JS_Sample2.html ----------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>split() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、文字列の「リンゴ,ミカン,バナナ,ストロベリー」が分割されて配列に格納されます。</p>
    <button onclick="splitFunction02()">splitの実行</button>
    <p id="sample2"></p>
    <script>
    function splitFunction02() {
    var stringObj = "リンゴ,ミカン,バナナ,ストロベリー";
    var result="";
    stringObj.split(',').forEach(
    function( value ) {
    result= result+value+"<br>";
    })
    document.getElementById("sample2").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ----------------------------

    splitメソッドでカンマ区切りのデータを分割し、forEach文で処理しています。分割した文字にHTMLの改行コード「<br>」を追加していますので、ブラウザー上で各データーが改行されて表示されます。

    ●実行結果

    ボタンをクリックすると、文字列の「リンゴ,ミカン,バナナ,ストロベリー」が分割されて配列に格納されます。

    ▲ページトップへ戻る

    2.3. 正規表現を使って文字列を分割する方法

    区切り文字として「正規表現」を使う事もできます。

    var stringObj = "文字1[区切文字]文字2[区切文字]文字3"; //分割対象の文字列
    stringObj.split(正規表現); //Stringオブジェクトを正規表現で分割する

    ●JS_Sample3.html ----------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>split() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、文字列の「リンゴ1ミカン2バナナ3ストロベリー4」が分割されて配列に格納されます。</p>
    <button onclick="splitFunction03()">splitの実行</button>
    <p id="sample3"></p>
    <script>
    function splitFunction03() {
    var stringObj = "リンゴ1ミカン2バナナ3ストロベリー4";
    var result="";
    var splitStrObj= stringObj.split(/\d/);
    for (i = 0; i < splitStrObj.length-1; i++) {
    result= result + "[" + i +"] " + splitStrObj[i] +"<br>";
    }
    document.getElementById("sample3").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ----------------------------

    サンプルコードの文字列は数字の「1, 2, 3, 4」で区切られています。正規表現を使うとこのような文字列データーも分割する事ができます。splitメソッドに正規表現リテラルで数値を表す「/\d/」を指定します。

    MDN Web docs-正規表現: https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

    ●実行結果

    ボタンをクリックすると、文字列の「リンゴ1ミカン2バナナ3ストロベリー4」が分割されて配列に格納されます。

    ▲ページトップへ戻る

    2.4. 改行で文字列を分割する方法

    改行を含む文字列を分割する場合は、splitメソッドに改行を表す正規表現の「\n」を指定します。

    var stringObj = "文字1
    文字2
    文字3"; //改行付きの文字列
    stringObj.split(改行コード); //Stringオブジェクトを改行で分割する

    ●JS_Sample4.html ----------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>split() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、テキストエリアで改行された文字が分割されて配列に格納されます。</p>
    <p><textarea rows="10" cols="60" id="sample4">
    改行テキスト1&#13;
    改行テキスト2&#13;
    改行テキスト3&#13;
    改行テキスト4&#13;
    改行テキスト5&#13;
    改行テキスト6</textarea></p>
    <button onclick="splitFunction04()">splitの実行</button>
    <p id="result4"></p>
    <script>
    function splitFunction04() {
    var stringObj = document.getElementById('sample4').value;
    var splitStrObj = stringObj.split(/\n/,20);
    var result="";
    for (i = 0; i < splitStrObj.length; i++) {
    result= result + "[" + i +"] " + splitStrObj[i] +"<br>";
    }
    document.getElementById("result4").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ----------------------------

    サンプルコードでは区切り文字の指定に加え、分割の上限「20」を指定しています。

    ●実行結果

    ボタンをクリックすると、テキストエリアで改行された文字が分割されて配列に格納されます。

    ▲ページトップへ戻る

    2.5. 区切り文字に「""」を指定して部分文字列を取得する方法

    splitメソッドの区切り文字に「""」を指定すると、Stringオブジェクトを一文字ずつ分割します。

    var stringObj = "文字1"; //分割する文字列
    stringObj.split(""); //区切り文字に「""」を指定する

    ●JS_Sample5.html ----------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>split() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、文字列の「テキスト分割」が一文字ずつ分割されて配列に格納されます。</p>
    <button onclick="splitFunction05()">splitの実行</button>
    <p id="sample5"></p>
    <script>
    function splitFunction05() {
    var stringObj = "テキスト分割";
    var result="";
    stringObj.split("").forEach(
    function( value ) {
    result += value+"<br>";
    })
    document.getElementById("sample5").innerHTML = result;
    }
    </script>
    </body>
    </html>
    ----------------------------

    splitメソッドに引数を指定しないと、Stringオブジェクトの文字列は分割されませんが、「""」を指定すると文字列を一文字ずつ分割します。サンプルコードで動作を確認して下さい。

    ●実行結果

    ボタンをクリックすると、文字列の「テキスト分割」が一文字ずつ分割されて配列に格納されます。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    年収400万円〜700万円
    勤務地 東京都 品川区
    年収400万円〜700万円
    勤務地 東京都 渋谷区
    月額単価50万円〜90万円
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【LAMP】システムエンジニア|ECに特化した顧客管理システムの開発 NEW

    年収 :400万円〜700万円

    自社サービス「うちでのこづち」、また新サービスの開発全般 をお願いします。 アジャイル開発を行っ...

    株式会社E-Grant

    正社員

    【PHP】システムエンジニア|ショッピングシステムの開発・運用 NEW

    年収 :400万円〜700万円

    ネットショップ構築サービスの運営業務や新機能の開発を お任せします。 同社の通販事業部で利用して...

    ジェイフロンティア株式会社

    フリーランス

    【JavaScript/GO】アプリ開発エンジニア ★eスポーツアプリの開発

    月額単価 :50万円〜90万円

    【業務内容】 自社サービスとして展開しているeスポーツアプリの開発に携わっていただきます。 【環...

    フリーランス

    【Ruby/HTML5】サーバサイドエンジニア ★Webサイト内検索サービスのバックエンド開発

    【業務内容】 自社でWebサイト内検索サービスを展開している企業内で下記業務をメインに対応していただ...