【JavaScript】文字列を分割する方法(split)について解説

JavaScriptで文字列を操作するメソッドの一つにsplitメソッドがあります。このメソッドでは文章内の特定の文字列や文字列パターンによって文章を分割し、配列形式にすることができます。splitメソッドを用いることで、CSVファイルの読み込みや単語数のカウント機能が実装できます。本記事ではsplitメソッドを用いた文字列分割について実装例を交えて説明します。正規表現について先に学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」も参考にしながら読むのがおすすめです。

splitメソッドの使い方

splitメソッドは使い方に行くつかのオプションがあります。本項では使い方に分けてsplitメソッドの使い方について解説します。（正規表現）と記された部分には正規表現の内容が含まれます。その他の文字列操作について知りたい方は「JavaScriptの文字列操作について解説（検索、比較、結合、置換、分割、型変換）」も参考に指定みてください

文字列を用いて分割する使い方

分割対象の文字列.split(区切りに使用する文字列)

splitメソッドの引数に区切りに使用する文字列を指定することで分割対象の文字列を分割することができます。戻り値は区切りによって分割された文字列が要素となっている配列です。次がその例です。

'a,b,c,d,e,f'.split(',') //["a", "b", "c", "d", "e", "f"]

この際に区切りに用いたカンマ(,)は配列内に反映されていないことに注意が必要です。

正規表現を用いて分割する使い方

分割対象の文字列.split(区切りに使用する正規表現)

splitメソッドの引数に区切りに使用する正規表現を指定することで分割対象の文字列を正規表現による文字列パターンで分割することができます。戻り値は区切りによって分割された文字列が要素となっている配列です。次がその例です。

'a--b-----c-d-----e---f'.split(/-+/) //["a", "b", "c", "d", "e", "f"]

ハイフンが一つ以上あれば分割するといった分割も可能になります。この際に区切りに用いた/-+/は配列内に反映されていないことに注意が必要です。配列内に反映させる場合は「分割した文字を含める使い方」を参照してください。

分割数に制限をかける使い方

分割対象の文字列.split(区切りに使用する文字列または正規表現,制限数)

splitメソッドの第二引数で分割結果に制限をかけることができます。戻り値は区切りによって分割された文字列のうち、初めから制限数だけの要素が格納された配列です。次がその例です。

'a,b,c,d,e,f'.split(',',3) //["a", "b", "c"]

このように第二引数を指定しなければ["a", "b", "c", "d", "e", "f"]という結果が返ってくるはずですが、制限数に3を指定することで、戻り値の配列の長さが3に制限され、分割された値の初めから3つが要素として入っていることが確認できます。

分割した文字を含める使い方（正規表現）

分割対象の文字列.split((区切りに使用する正規表現))

splitメソッドを正規表現で表現した際に、区切りに使用する正規表現に()が入っている際にその内部にマッチした文字列を戻り値の配列の要素に含めることができます。次がその例です。

'a--b-----c-d-----e---f'.split(/([-]+)/) //["a", "--", "b", "-----", "c", "-", "d", "-----", "e", "---", "f"]

このように分割に使用したハイフンが戻り値の配列要素に含まれる形になります。

FileReaderオブジェクトとsplitメソッドでCSVファイルを表にする【実装例】

splitメソッドを用いることでCSV(Comma Separated Value)形式でのファイルを2次元配列に変換して、表としてブラウザ上に表示することができます。次のようなものを作ります。

PC内のCSV形式のファイルを選択するとtableタグを用いた表形式でデータが表示されます。CSVはカンマと改行によって表を表現している形式です。改行によって行を、カンマによって列を区切っています。そこで、今回はsplitメソッドを用いてCSVを読み取り、2次元配列にしてから、表を生成します。

ソースコード

コードを確認してみましょう。ファイルは次のような階層になっています。

root/
　├ index.html
　└ main.js

(index.html)

<body>
    <input type="file" name="file" id="file">
    <div id="display"></div>
    <script src='./main.js'></script>
</body>

index.htmlではファイルを入力するinputタグと、入力したファイルを出力するdivタグを配置しています。

(main.js)

const file = document.getElementById('file');
const display = document.getElementById('display');
const reader = new FileReader();

file.addEventListener('change', (e) => {
    let fileData = e.target.files[0];
    display.innerHTML = null
    reader.readAsText(fileData, 'UTF-8')
})

reader.addEventListener('load', () => {
    let data = []
    let cols = reader.result.split(/\n/)
    for (let i = 0; i < cols.length; i++) {
        data[i] = cols[i].split(/,/)
    }
    display.appendChild(createTable(data))
})

function createTable(data) {
    let table = document.createElement('table');
    for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr');
        for (let j = 0; j < data[i].length; j++) {
            let td = document.createElement('td');
            td.innerText = data[i][j];
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

次のサイトで実際の動作を確認してみてください！

コードペン

コードの解説

main.jsファイルのコードについて細かく解説していきます。

(main.js)

const file = document.getElementById('file');
const display = document.getElementById('display');
const reader = new FileReader();

はじめにHTML要素を取得しています。そして今回使用するFileReaderオブジェクトのインスタンスを生成しておきます。FileReaderオブジェクトの使い方を詳しく知りたい方は「File APIを用いたJavaScriptでのファイル操作方法ついて解説」を参考にしてみてください！

(main.js)

file.addEventListener('change', (e) => {    display.innerHTML = null
    let fileData = e.target.files[0];
    reader.readAsText(fileData, 'UTF-8')
})

inputのchangeイベントに対するハンドラ関数を指定していきます。はじめに、displayの内部を初期化します。次に、filedataに入力したファイルのBlobオブジェクトを代入します。（Blobオブジェクトとは様々なファイルをJavaScriptで読み込むために用いるものです。）そして、readerのreadAsTextメソッドで、UTF-8の文字コードでファイルを読み込みます。（UTF-8以外の文字コードで書かれたファイルを読み込むと、文字化けを起こしてしまうので注意しましょう。）

(main.js)

reader.addEventListener('load', () => {
    let data = []
    let cols = reader.result.split(/\n/)
    for (let i = 0; i < cols.length; i++) {
        data[i] = cols[i].split(/,/)
    }
    display.appendChild(createTable(data))
})

readerのloadイベントに対するハンドラ関数を定義していきます。このイベントはreadAsTextメソッドでファイルの読み込みが成功した場合に発火します。この関数内でsplitメソッドを用いていきます。dataに2次元配列を格納していきますので、まずは宣言して初期値を代入します。次に、colsにCSVが文字列で読み込まれたものに対して改行(\n)で区切られたものを配列の要素として格納していきます。これによって行ごとの分割が完了します。例えばcols[4]に入っているのは5行目に記述される文字列です。さらに、dataにcolsの各要素に対して、カンマ(,)区切られたものを配列の要素として格納していきます。これによって各行で列ごとでの分割が完了しました。例えばdata[1]にはcols[1]がカンマで区切られた配列が格納されています。したがって、data[1][2]には２行目・３列目の文字列が格納されていることになります。そして、dataが出来上がった後に、displayの子要素としてdataを引数にしたcreateTable関数の引数がappendChildメソッドで挿入されます。ここでcreateTable関数について補足します。

(main.js)

function createTable(data) {
    let table = document.createElement('table');
    for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr');
        for (let j = 0; j < data[i].length; j++) {
            let td = document.createElement('td');
            td.innerText = data[i][j];
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

createTable関数ではまず、tableタグを作ります。次に、trタグを作ります。さらに、そのtr内部でtdタグをdata[i]の各要素（つまり、表で列にあたる部分）に対してtdタグを作りそこにdata[i][j]を格納していきます。そして、trタグをtableタグの子要素におきます。これをdataの要素分（つまり、表で行にあたる部分）だけ繰り返し行います。こうしてできたtable要素を戻り値として返します。

splitメソッドで英文の単語数をカウントする【実装例】

英語の文章を単語で区切って配列にする機能を実装しましょう。次のようなものを作ります。

ボタンを押すと入力した英語の文章の英単語の数をカウントするアプリです。

ソースコード

コードを確認してみましょう。ファイルは次のような階層になっています。

root/
　├ index.html
　└ main.js

(index.html)

<body>
    <textarea id="textarea" cols="30" rows="10"></textarea>
    <button id="button">単語の文字数カウント</button>
    <div id="display"></div>
    <script src="./main.js"></script>
</body>

index.htmlでは入力フォーム(id="form_input")とボタン(id="submit_button")と送信完了を表示するディスプレイ(id="display")を記述しています。

(main.js)

const display = document.getElementById('display')
const button = document.getElementById('button')
const textarea = document.getElementById('textarea')
const regex = /[^\w-$'&.,]+/

button.addEventListener('click', () => {
    sentences = textarea.value
    words = sentences.split(regex);
    display.innerText = words.length
})

次のサイトで実際の動作を確認してみてください！

words_counter

コードの解説

main.jsファイルのコードについて細かく解説していきます。

(main.js)

const display = document.getElementById('display')
const button = document.getElementById('button')
const textarea = document.getElementById('textarea')

はじめにHTML要素を取得しています。

(main.js)

const regex = /[^\w-$'&.,]+/

regexに分割に使用するための文字列パターンを正規表現リテラルで代入しています。今回は、大文字小文字英数字、アンダーバー(_)、ハイフン(-)、ドルマーク($)、シングルクォーテーション(’)、アンド(&)、ピリオド(.)、カンマ(,)が繋がっている１文字以上のひとまとまりを単語としてカウントします。

(main.js)

button.addEventListener('click', () => {
    sentences = textarea.value
    words = sentences.split(regex);
    display.innerText = words.length
})

ボタンに対するハンドラ関数内ではテキストエリア内の文字列をsentencesに入れて、splitメソッドによって先ほど定義したregexで文字を区切りwords配列を生成しています。最後にdisplayにwordsの長さを代入して文字数をカウントしています。

この記事のまとめ

本記事ではJavaScriptのsplitメソッドによる文字列の分割について実装例を交えて説明しました！最後に記事の要点をまとめてみましょう。

splitメソッドを用いて文字列の分割し配列にすることができる
splitメソッドは文字列か正規表現を用いることで分割を行う区切りを指定することができる
splitメソッドは第二引数で分割数を制限することができる
splitメソッドを使うことで読み込まれたCSVファイルを2次元配列に変換できる

JavaScriptのsplitメソッドを是非活用してみましょう。