[計算・変換]ユーザに何らかの文字列の入力を求めたとき、余計な空白文字(スペースやタブなど)が含まれてしまうことがあります。余計な空白文字をそのまま保存したり送信したりしてしまわないように、JavaScriptで事前に一括削除しておくと良いでしょう。ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を一括削除するには、正規表現を使うのが楽です。前後の空白だけを取り除くtrim関数のような処理も簡単です。文字列に含まれる空白文字を一括削除する方法いろいろユーザに何らかの文字列の入力を求めたとき、余計な空白文字(スペースやタブなど)が含まれてしまうことがあります。ユーザが直接キーボードからフォームに入力したなら、あまりそういうことはないかも知れません。どこかに書かれた文字列をコピー&ペーストして貼り付ける形で入力された場合には、両端にあるスペースやタブなども一緒に貼り付けられてしまうことがよくあります。余計な空白文字が含まれていると、後から重複をチェックしたりソートしたりしたいときに面倒です。いうわけで、余計な空白文字をそのまま保存したり送信したりしてしまわないように、JavaScriptで事前に一括削除しておくと良いでしょう。ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を一括削除するには、正規表現を使うのが楽です。文字列の前後の端にある空白文字だけを取り去る方法(先頭の空白だけ/末尾の空白だけ/前後両方の空白だけ)という2つに分けて、記述方法を紹介します。前後の端にだけ存在する空白を取り除くのは、プログラミング言語によくあるtrim関数のような動作になります。正規表現を使って、文字列中の空白文字(スペースやタブなど)を一括削除する方法まずは、文字列の前方だろうと後方だろうと真ん中だろうと、とにかく文字列中に含まれる空白をすべて取り除きたい場合です。これはとても簡単で、空白文字が発見される度に削除するよう書けば良いだけです。変数TargetStringに格納されている文字列に対して、すべての空白文字を取り除くには、以下のようにJavaScriptを記述すると良いでしょう。"");文字列を格納した変数のreplaceメソッドを呼び出して、第1引数に「置換対象の文字」を正規表現で記述しています。付けることで、「1文字以上連続するすべての空白文字」が置換対象になります。記述しているので、対象文字列の中に空白文字が何度登場しても、すべてが変換されます。(この「g」を省略すると、最初に見つかった1つだけしか変換されないので注意して下さい。)第2引数には、「置換後の文字列」を記述します。ここでは、削除する(取り除く)ことが目的なので「空文字""」を指定します。すると、「1文字以上連続するすべての空白文字」がすべて「削除」されることになります。実際に表示させてみたサンプルは以下の通り。対象文字列:結果文字列:上記のサンプルでは、ボタンをクリックすると、入力された文字列内に含まれる空白文字が一括削除されます。それ以外の文字はそのままです。何でもかんでも空白文字を削除したいという場面もあるでしょうが、「文字列の内側に含まれる空白はそのまま残しておきたい」という場合も多いでしょう。ユーザが意図せず入力してしまう余計な空白文字というのは、たいていは(コピー&ペーストの過程などで)前後に含まれてしまう空白文字でしょうから。入力された文字列の「先頭(前方)にある空白文字」や「末尾(後方)にある空白文字」だけに限定するのも、正規表現を使えば簡単に指定できます。trim関数(トリム)のようなものとして用意されていたりもします。JavaScriptにはtrim関数(メソッド)はないっぽいので、以下のように自力で記述して使いましょう。変数TargetStringに格納されている文字列に対して、「先頭(前方)にあるすべての空白文字」を取り除くには、以下のようにJavaScriptを記述します。記号が「文字列の先頭」を表します。「先頭から始まる1文字以上連続する空白文字」という意味になります。それを空文字に変換しているわけですから、つまり、「先頭にある空白文字だけを削除する」という役割を果たすわけです。文字列の末尾(後方/右側)にある空白文字だけを一括削除する方法また、例えば、変数TargetStringに格納されている文字列に対して、「末尾(後方)にあるすべての空白文字」を取り除くには、以下のようにJavaScriptを記述します。記号が「文字列の末尾」を表します。「末尾にある1文字以上連続する空白文字」という意味になります。それを空文字に変換しているわけですから、つまり、「末尾にある空白文字だけを削除する」という役割を果たすわけです。文字列の前後(左右)にある空白文字だけを一括削除する方法もし、上記の両方を合わせて、先頭(前方)に含まれる空白文字と、末尾(後方)に含まれる空白文字を一気に削除する(=前後に含まれる空白文字を削除する)機能を作りたいという場合は(たぶんtrim関数ってたいていそういう機能ですよね?^^;)、以下のようにも記述できます。記号は、「or」の意味です。見にくいなら、以下のようにカッコを加えて書いても構いません。"");この方が、何と何が「OR」なのかがハッキリ分かるので望ましいかも知れませんね。実際に表示させてみたサンプルは以下の通り。対象文字列:結果文字列:ボタンをクリックすると、対象文字列の前後に含まれる空白文字だけを一括削除します。文字列の途中にある空白文字はそのままです。いうわけで、Trim関数っぽい機能を自前で用意する方法でした。JavaScriptで正規表現を使う方法は、「JavaScriptで正規表現を使う方法」で解説しています。JavaScriptで正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。それらも併せてご参照下さい。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書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以下など)では横幅に関係なくレガシーデザインになります。