文字列を分割するJavaScript入門

文字列分割のスクリプト

例えば、以下のような商品データがあるとします。

これを、パンの名称だけ表示しておいて、 お客さんが選択したら価格などを表示するようにしてみたいと思います。 以下のスクリプトをHTMLのBODY内に記入してみてください。

<form name="pan">
<select name="sentaku" onchange="choice()">
<option>商品を選択してください</option>
<option>メロンパン</option>
<option>あんぱん</option>
<option>ウィンナーロール</option>
<option>ハムエッグ</option>
<option>ミックスサンド</option>
</select>
<br>
商品：<input type="text" name="item" value=""><br>
種類：<input type="text" name="type" value=""><br>
価格：<input type="text" name="price" value=""><br>
</form>


<script>

//商品データを配列breadに入れる
var bread=new Array(
"",
"メロンパン/菓子パン/130円",
"あんぱん/菓子パン/100円",
"ウィンナーロール/惣菜パン/170円",
"ハムエッグ/惣菜パン/140円",
"ミックスサンド/サンドウィッチ/200円"
);

function choice()
{

  //データを分割して格納する配列painの作成
  var pain = new Array();

  //セレクトボックスの最初のオプションを選択したか確認
  if ( document.pan.sentaku.selectedIndex != 0 )
  {
    //選択された商品データを変数strに入れる
    var str = bread[document.pan.sentaku.selectedIndex];

    //商品データの各要素を「/」で分離し、配列painに格納する
    pain = str.split("/");

    //テキストボックスの該当箇所にデータを表示する
    document.pan.Item.value=pain[0];
    document.pan.Type.value=pain[1];
    document.pan.Price.value=pain[2];
  }
  else
  {
    //「商品を選択してください」を選んだ時の処理
    for ( var i = 1; i <= 3 ; i++)
    {
      document.pan.elements[i].value = "";
    }
  }
}

</script>

＜サンプル＞

文字分割スクリプトの説明

では上記スクリプトについて見ていきましょう。フォーム名は「pan」， セレクトボックス名は「sentaku」， データを表示するテキストボックスは順に「item」，「type」，「price」としました。

続いてJavaScript部分を見てみます。最初に配列breadを作成して、 商品データを格納します。商品名，種類，価格の間は「/」で区切っておきます。 セレクトボックスの各optionに対応させるため、最初は空データを入れておきました。

次に、セレクトボックスが変更された時に呼び出される関数choice()を記入していきます。 最初に、それぞれのデータから商品名・種類・価格を分割して格納する配列painを作成しました （painはフランス語でパン）。

続いてif文で、セレクトボックスの「商品を選択してください」が選択されているかどうかを調べます。 それ以外（つまり商品のどれか）が選択されていたら、データ表示処理にかかります。 まずは変数strに、選択されたパンのデータを格納しています。

ここで、文字の分割を行います。 split(指定文字列）が文字を分割する命令文です。 今回は「/」でデータを区切っているので、splitの括弧内に「/」を記入します。 分割された文字は配列に格納されます。上記の場合、pain[0]は商品名， pain[1]は種類，pain[2]は価格が入ります。それを各テキストボックスに表示します。

配列 = 文字列.split(分割文字列)

任意の文字で、指定文字列を分割して配列に格納します

else文の中では、各テキストボックスを空にする処理を記入しています。 データを表示するときはテキストボックス名を使いましたが、こちらではelements[]を使ってみました。 セレクトボックスがelements[0]なので、テキストボックスは1～3の範囲ということになります。 for文を使って一気に空文字を代入します。