Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

カンマ区切りの入力文字列を配列に分割して格納

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

カンマ区切り文字列をカンマで分割

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

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

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

以下のようにソースを書けば、変数に格納された「カンマ区切りの文字列」をカンマで分割し、1つ1つを対象に何らかの処理を施せます。 (下記では、番号を加えてリストにし、最終的にアラートボックスで表示させています。)

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

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

カンマ区切りで入力:

上記サンプルでは、ボタンをクリックすると、入力文字列をカンマで分割し、番号を付加してすべてを一気にアラートボックスで表示します。 個数に制限はありません。(あまりにも多すぎると、アラートボックスが大きくなりすぎて画面に表示しきれなくなるかも知れませんが。)

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

カンマ区切りで入力:

ここに分割結果が表示されます。

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど