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

入力された文字列に含まれる空白文字を削除する

ユーザに何らかの文字列の入力を求めたとき、余計な空白文字(スペースやタブなど)が含まれてしまうことがあります。
ユーザが直接キーボードからフォームに入力したなら、あまりそういうことはないかも知れません。しかし、どこかに書かれた文字列をコピー&ペーストして貼り付ける形で入力された場合には、両端にあるスペースやタブなども一緒に貼り付けられてしまうことがよくあります。 余計な空白文字が含まれていると、後から重複をチェックしたりソートしたりしたいときに面倒です。
というわけで、余計な空白文字をそのまま保存したり送信したりしてしまわないように、JavaScriptで事前に一括削除しておくと良いでしょう。

ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を一括削除するには、正規表現を使うのが楽です。

正規表現を使って、文字列中の空白文字(スペースやタブなど)を一括削除する

まずは、文字列の前方だろうと後方だろうと真ん中だろうと、とにかく文字列中に含まれる空白をすべて取り除きたい場合です。
これはとても簡単で、空白文字が発見される度に削除するよう書けば良いだけです。

例えば、変数TargetStringに格納されている文字列に対して、すべての空白文字を取り除くには、以下のようにJavaScriptを記述すると良いでしょう。

TargetString = TargetString.replace(/\s+/g, "");

文字列を格納した変数のreplaceメソッドを呼び出して、第1引数に「置換対象の文字」を正規表現で記述しています。ここでの「置換対象の文字」は「空白文字」なので「\s」を指定します。 さらに「+」を付けることで、「1文字以上連続するすべての空白文字」が置換対象になります。 最後にグローバル修飾子「g」を記述しているので、対象文字列の中に空白文字が何度登場しても、すべてが変換されます。(この「g」を省略すると、最初に見つかった1つだけしか変換されないので注意して下さい。)

第2引数には、「置換後の文字列」を記述します。ここでは、「削除(取り除く)」ことが目的なので、空文字を指定します。
こうすると、「1文字以上連続するすべての空白文字」がすべて「削除」されることになります。

実際に表示させてみたサンプルは以下の通り。

対象文字列:

結果文字列:

上記のサンプルでは、ボタンをクリックすると、入力された文字列内に含まれる空白文字が一括削除されます。 それ以外の文字はそのままです。

正規表現を使って、文字列の先頭や末尾にある空白文字だけを削除する(trim関数っぽい動作)

何でもかんでも空白文字を削除したいという場面もあるでしょうが、「文字列の内側に含まれる空白はそのまま残しておきたい」という場合も多いでしょう。 ユーザが意図せず入力してしまう余計な空白文字というのは、たいていは(コピー&ペーストの過程などで)前後に含まれてしまう空白文字でしょうから。

入力された文字列の「先頭(前方)にある空白文字」や「末尾(後方)にある空白文字」だけに限定するのも、正規表現を使えば簡単に指定できます。 プログラミング言語によっては、そういう機能は trim関数(トリム)のようなものとして用意されていたりもします。JavaScriptにはtrim関数(メソッド)はないっぽいので、以下のように自力で記述して使いましょう。(^_^;)

先頭(前方)にある空白文字を一括削除

例えば、変数TargetStringに格納されている文字列に対して、「先頭(前方)にあるすべての空白文字」を取り除くには、以下のようにJavaScriptを記述します。

TargetString = TargetString.replace(/^\s+/g, "");

正規表現では、「^」記号が「文字列の先頭」を表します。 なので、上記の「^\s+」は「先頭から始まる1文字以上連続する空白文字」という意味になります。 それを空文字に変換しているわけですから、つまり、「先頭にある空白文字だけを削除する」という役割を果たすわけです。

末尾(後方)にある空白文字を一括削除

また、例えば、変数TargetStringに格納されている文字列に対して、「末尾(後方)にあるすべての空白文字」を取り除くには、以下のようにJavaScriptを記述します。

TargetString = TargetString.replace(/\s+$/g, "");

正規表現では、「$」記号が「文字列の末尾」を表します。 なので、上記の「\s+$」は「末尾にある1文字以上連続する空白文字」という意味になります。 それを空文字に変換しているわけですから、つまり、「末尾にある空白文字だけを削除する」という役割を果たすわけです。

先頭(前方)と末尾(後方)にある空白文字を一括削除

もし、上記の両方を合わせて、先頭(前方)に含まれる空白文字と、末尾(後方)に含まれる空白文字を一気に削除する(=前後に含まれる空白文字を削除する)機能を作りたいという場合は(たぶんtrim関数ってたいていそういう機能ですよね?^^;)、以下のようにも記述できます。

TargetString = TargetString.replace(/^\s+|\s+$/g, "");

正規表現での「|」記号は、「or」の意味です。
ちょっと見にくいなら、以下のようにカッコを加えて書いても構いません。

TargetString = TargetString.replace(/(^\s+)|(\s+$)/g, "");

この方が、何と何が「OR」なのかがハッキリ分かるので望ましいかも知れませんね。
実際に表示させてみたサンプルは以下の通り。

対象文字列:

結果文字列:

ボタンをクリックすると、対象文字列の前後に含まれる空白文字だけを一括削除します。文字列の途中にある空白文字はそのままです。

というわけで、Trim関数っぽい機能を自前で用意する方法でした。
なお、JavaScriptで正規表現を使う方法は、「JavaScriptで正規表現を使う」で解説しています。
また、JavaScriptで正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。

JavaScript TIPS 主要なカテゴリ

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

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

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

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