【JavaScripit】
CSVファイルから取り込んだ文字列をカンマ(,)区切りで配列に変換する方法(カンマやダブルクォーテーションを考慮する方法も紹介)

split()メソッドやmatch()メソッドを使おう

投稿日 2025/01/23 更新日 2025/01/23


こんにちは。IT業界歴5年目の「元木皇天」です。

今回はJavaScriptで、CSVファイルから取り込んだ文字列をカンマ(,)区切りで配列に変換する方法について解説いたします。

やりたいこと

CSVファイルから取り込んだカンマ区切りの文字列をカンマ(,)区切りで配列に変換する方法

文字列をカンマ区切りにする

参考文献

JavaScript コードレシピ集
javascript ドキュメント - String.prototype.split()
javascript ドキュメント - String.prototype.match()


環境

・OS:MacOS Sequoia 15.0
・Google Chrome:Ver 131.0.6778.265

カンマ区切りの文字列をカンマ区切りで配列に変換する

カンマ区切りの文字列をカンマ区切りで配列に変換するにはsplit()メソッドを使用することで簡単に実装することができます。

split()の引数には以下を指定します。

  • 第1引数:区切りを入れる文字列
  • 第2引数:区切った後の配列要素数の上限

以下は実際の使用例です。

const text = '1000,元木皇天,部長,男';
const textArray = text.split(',');
const textArrayLimited = text.split(',', 2);

console.log(textArray);
//出力結果 ['1000', '元木皇天', '部長', '男']

console.log(textArrayLimited);
//出力結果 ['1000', '元木皇天']

split()の第一引数に指定した「,」で文字列を区切って配列にしていることがわかります。

また、第二引数を指定すると、指定した数を上限として要素を配列に格納します。


ただし、文字列の値の中にカンマ(,)が含まれている場合、想定する配列が得られなくなってしまうので注意が必要です。

以下は想定外の結果が得られてしまう例です。

const text = '1,000,元木皇天,部長,男';
const textArray = text.split(',');

console.log(textArray);
//出力結果 ['1', '000', '元木皇天', '部長', '男']

本来であれば「1,000」と出力したかったが、「1」と「000」が区切られて別の要素として配列に格納されてしまいます。

このような場合は、次項で説明する補足を参照してください。

補足:文字列の値の中にカンマが含まれている場合

先ほど紹介した例のように、値の中に「,」が含まれていると、想定していない場所で区切られてしまう場合があります。

この場合は、split()メソッドではなく正規表現に一致した文字列を取り出して処理をすることで対応することができます。

コードは以下のようになります。

const text = '"1,000","元木皇天","部長","男"';
text.match(/"[^"]*"/g).map(value => 
    value.replace(/^"|"$/g, '')
);

上記の処理について解説します。

まず、「match(/"[^"]*"/g)」の部分で正規表現にマッチした、取り出したい値を取り出します。

正規表現を説明すると以下の通りです。

  • /→正規表現の開始を表す
  • "→ダブルクォーテーションから始まる
  • [^"]*→ダブルクォーテーション以外の文字が0文字以上
  • "→ダブルクォーテーションで終わる
  • /→正規表現の終了を表す
  • g→globalフラグ。正規表現に一致した最初の文字列だけではなく、文字列全体で一致した文字列を抽出する。

よって「"xxxxxx"」という部分を取り出し、map()の処理に渡します。

次に、map()の中の、replace(/^"|"$/g)の処理で不要なダブルクォーテーションを削除します。

正規表現を説明すると以下の通りです。

  • /→正規表現の開始を表す
  • ^"→開始文字がダブルクォーテーション
  • |→または、という意味。上記条件または、以下の条件となる。
  • "$→終了文字がダブルクォーテーション
  • /→正規表現の終了を表す
  • g→globalフラグ。正規表現に一致した最初の文字列だけではなく、文字列全体で一致した文字列を抽出する。

よって、match()で取り出した「"xxxxxx"」という文字を「xxxxx」に変換しています。

これにより、カンマが含まれる文字を正しく取得し、配列が取得できます。


さらに余談ですが、ダブルクォーテーションを含む文字列を考慮する場合は、以下のようにする必要があります。

const text = '"1,000","変な""名前","部長","男"';
text.match(/"([^"]|"")*"/g).map(value => 
    value.replace(/^"|"$/g, '').replace(/""/g, '"')
);

CSVでは、文字列にダブルクォーテーションを含む場合は、「""」と記述されます。

そのため、正規表現で「""」を許可するようにして、「replace(/""/g, '"')」でエスケープ処理を解除すればOKです。

まとめ

指定した文字列で区切りたい場合は「split()」を使用する

文字列にカンマやダブルクォーテーションが含まれる場合を考慮する場合は以下の処理を使用する。

const text = '"1,000","変な""名前","部長","男"';
text.match(/"([^"]|"")*"/g).map(value => 
    value.replace(/^"|"$/g, '').replace(/""/g, '"')
);

参考文献・おすすめ文献

javascript ドキュメント - String.prototype.split()

javascript ドキュメント - String.prototype.match()