にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

カンマ区切りの入力文字列を配列に分割して格納する方法 [計算・変換]

ユーザが入力した「カンマ区切り」の文字列を、JavaScriptを使ってカンマ記号で分割して配列に格納するには、splitメソッドを使うと楽です。ユーザに入力してもらう文字列の個数が不定の場合には、入力欄を事前にたくさん用意しておくよりもカンマ区切りで入力してもらう方が入力フォームをシンプルにできるでしょう。区切り文字にはもちろんカンマ記号以外の文字も使えます。

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

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

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

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

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

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

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

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

JavaScriptソース

// カンマで分割し配列に格納
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)を割り振ってあります。

HTMLソース (ユーザの入力欄と実行ボタン)

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

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

JavaScriptソース

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メソッドを使うととても楽です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---