カンマ区切り(コンマ区切り)の入力文字列を配列に分割して格納する方法

あらかじめ個数が決まっていないデータをユーザに入力させる場合は、十分な入力欄を用意しておくよりも、カンマ区切りでの入力を求める方が楽な場合もあります。
その場合、カンマ区切りで入力された個数不定の文字列を、カンマで分割する処理が必要です。
入力された文字列を、特定の文字で分割するのはわりと簡単にできます。

カンマ区切り文字列をカンマ記号で分割するJavaScriptソース

変数TargetStringに格納されている文字列に対して、カンマ記号で分割した上で配列に格納するには、以下のように記述します。

var resArray = TargetString.split(",");

splitメソッドを使って、引数に区切り文字を与えるだけです。
その結果、区切り文字で文字列が分割され、1つ1つが配列resArrayに格納されます。
配列の添字は0から始まるので、1番目の文字列が resArray[0] に、2番目の文字列が resArray[1] に格納されます。

変数内の文字列をカンマ記号で分割して得るサンプルJavaScriptソース

以下のようにJavaScriptソースを書けば、変数に格納された「カンマ区切りの文字列」をカンマで分割し、1つ1つを対象に何らかの処理を施せます。

// カンマで分割し配列に格納
var resArray = TargetString.split(",");
// それぞれに番号を付加
var ret = "";
for( var i=0 ; i<resArray.length ; i++ ) {
   ret += '[' + (i+1) + '] ' + resArray[i] + "\n";
}
// 表示
alert(ret);

上記のJavaScriptソースでは、カンマ記号で分割した文字列1つ1つに番号を加えてリストの形にして、最終的にアラートボックスで内容を表示させています。

カンマ区切りの入力文字列を配列に分割して格納する動作サンプルとソース

実際にユーザが入力する任意の文字列を対象にして、カンマ記号で分割して1つ1つに対して何らかの処理をするサンプルを紹介します。「1つ1つに対して何らかの処理」といっても、ここでは「番号を付加して表示する」程度の処理しかしていませんが。(^_^;)
以下に2種類のサンプルを掲載しておきますので参考にして下さい。

任意の入力内容をカンマ記号で分割して、番号を割り振って表示する例

ユーザが入力する任意の文字列を対象にして、カンマ記号「,」で区切って何らかの処理をするサンプルを紹介します。
まず、以下のようにHTMLで入力欄を作っておきます。特に複雑な点もないinput要素で作るただのテキスト入力欄です。後からJavaScriptで処理するために、id属性を使ってid名(sampleCommaInput)を割り振ってあります。

<p>
	カンマ区切りで入力：
	<input type="text" id="sampleCommaInput" value="">
</p>
<p>
	<input type="button" value="入力内容をカンマ区切りで分割" onclick="AlertSplitByComma();">
</p>

次にJavaScriptソースを記述します。基本は先程紹介したソースと同じですが、id="sampleCommaInput"のテキスト入力欄から入力内容を取得する処理を加えています。

function AlertSplitByComma() {
	// ▼テキスト入力欄に入力された文字列を得て、カンマ記号で分割して配列に得る
	var resArray = document.getElementById('sampleCommaInput').value.split(",");
	// ▼出力用の変数
	var RetSource = "";
	// ▼配列1つ1つに対して処理
	for( var i=0 ; i<resArray.length ; i++ ) {
		RetSource += '[' + (i+1) + '] ' + resArray[i] + "\n";
	}
	// ▼アラートボックスに表示
	alert(RetSource);
}

※上記のJavaScriptソースでは記載を省略していますが、実際には「ユーザの入力内容をエスケープする安全処理」と「ループ数が膨大にならないよう制限する処理」などを加える必要があります。(以下のサンプルでは加えてあります。)

上記のソースを使ってみたサンプルは以下の通り。

上記のサンプルでは、テキスト入力欄にカンマ区切りの文字列を入力してから「入力内容をカンマ区切りで分割してアラート」ボタンをクリックすると、入力文字列をカンマ記号で分割してから1つ1つに番号を付加し、すべてを一気にアラートボックスで表示します。
処理する個数に制限はありませんが、あまりにも多すぎるとアラートボックスが大きくなりすぎて画面に表示しきれなくなるので、実際には20個までに制限しています。

任意の入力内容をカンマ記号で分割して、番号を割り振って表示する例2

アラートボックスではなく、直接画面上に表示させるサンプルは以下の通り。

ここでは「カンマ区切り」としましたが、区切り文字に使う文字は何でも構いません。
分割に使いたい区切り文字をsplitメソッドに渡せば、その文字を使って分割してくれます。
自分で文字列を走査しなくて済むので、splitメソッドを使うととても楽です。

(更新日：2017年06月12日)