[計算・変換]ユーザが入力した「カンマ区切り」の文字列を、JavaScriptを使ってカンマ記号で分割して配列に格納するには、splitメソッドを使うと楽です。ユーザに入力してもらう文字列の個数が不定の場合には、入力欄を事前にたくさん用意しておくよりもカンマ区切りで入力してもらう方が入力フォームをシンプルにできるでしょう。区切り文字にはもちろんカンマ記号以外の文字も使えます。任意の入力内容をカンマ記号で分割して、番号を割り振って表示する例2カンマ区切り(コンマ区切り)の入力文字列を配列に分割して格納する方法あらかじめ個数が決まっていないデータをユーザに入力させる場合は、十分な入力欄を用意しておくよりも、カンマ区切りでの入力を求める方が楽な場合もあります。その場合、カンマ区切りで入力された個数不定の文字列を、カンマで分割する処理が必要です。入力された文字列を、特定の文字で分割するのはわりと簡単にできます。カンマ区切り文字列をカンマ記号で分割するJavaScriptソース変数TargetStringに格納されている文字列に対して、カンマ記号で分割した上で配列に格納するには、以下のように記述します。TargetString.split(",");splitメソッドを使って、引数に区切り文字を与えるだけです。その結果、区切り文字で文字列が分割され、1つ1つが配列resArrayに格納されます。変数内の文字列をカンマ記号で分割して得るサンプルJavaScriptソース以下のようにJavaScriptソースを書けば、変数に格納された「カンマ区切りの文字列」をカンマで分割し、1つ1つを対象に何らかの処理を施せます。表示alert(ret);上記のJavaScriptソースでは、カンマ記号で分割した文字列1つ1つに番号を加えてリストの形にして、最終的にアラートボックスで内容を表示させています。カンマ区切りの入力文字列を配列に分割して格納する動作サンプルとソース実際にユーザが入力する任意の文字列を対象にして、カンマ記号で分割して1つ1つに対して何らかの処理をするサンプルを紹介します。「1つ1つに対して何らかの処理」といっても、ここでは「番号を付加して表示する」程度の処理しかしていませんが。(^_^;)以下に2種類のサンプルを掲載しておきますので参考にして下さい。任意の入力内容をカンマ記号で分割して、番号を割り振って表示する例ユーザが入力する任意の文字列を対象にして、カンマ記号「,」で区切って何らかの処理をするサンプルを紹介します。以下のようにHTMLで入力欄を作っておきます。複雑な点もないinput要素で作るただのテキスト入力欄です。後からJavaScriptで処理するために、id属性を使ってid名(sampleCommaInput)を割り振ってあります。onclick="AlertSplitByComma();"></p>次にJavaScriptソースを記述します。基本は先程紹介したソースと同じですが、id="sampleCommaInput"のテキスト入力欄から入力内容を取得する処理を加えています。▼アラートボックスに表示alert(RetSource);}※上記のJavaScriptソースでは記載を省略していますが、実際には「ユーザの入力内容をエスケープする安全処理」と「ループ数が膨大にならないよう制限する処理」などを加える必要があります。(以下のサンプルでは加えてあります。)上記のソースを使ってみたサンプルは以下の通り。カンマ区切りで入力:上記のサンプルでは、テキスト入力欄にカンマ区切りの文字列を入力してから「入力内容をカンマ区切りで分割してアラート」ボタンをクリックすると、入力文字列をカンマ記号で分割してから1つ1つに番号を付加し、すべてを一気にアラートボックスで表示します。処理する個数に制限はありませんが、あまりにも多すぎるとアラートボックスが大きくなりすぎて画面に表示しきれなくなるので、実際には20個までに制限しています。任意の入力内容をカンマ記号で分割して、番号を割り振って表示する例2アラートボックスではなく、直接画面上に表示させるサンプルは以下の通り。カンマ区切りで入力:ここに分割結果が表示されます。ここでは「カンマ区切り」としましたが、区切り文字に使う文字は何でも構いません。分割に使いたい区切り文字をsplitメソッドに渡せば、その文字を使って分割してくれます。自分で文字列を走査しなくて済むので、splitメソッドを使うととても楽です。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。モダンスタイルによる基礎から現場での応用まで▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。......と言っても初心者向けでは決してないので注意してね。^^;JavaScriptに関する解説書は、自分に合うかどうか立ち読みして確認したり、せめて購入前に目次などから大まかな内容はチェックしておいた方が良いと思います。TIPSふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(16)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。関連するかもしれない情報など▼このページに関連しそうな記事が約8本くらい自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。