文字列に含まれる空白文字を一括削除する方法いろいろ

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

というわけで、余計な空白文字をそのまま保存したり送信したりしてしまわないように、JavaScriptで事前に一括削除しておくと良いでしょう。ユーザが入力した文字列に含まれる空白文字(スペースやタブなど)を一括削除するには、正規表現を使うのが楽です。

ここでは、

• 文字列中に含まれる全ての空白文字を取り去る方法
• 文字列の前後の端にある空白文字だけを取り去る方法(先頭の空白だけ／末尾の空白だけ／前後両方の空白だけ)

という2つに分けて、記述方法を紹介します。
前後の端にだけ存在する空白を取り除くのは、プログラミング言語によくあるtrim関数のような動作になります。

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

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

例えば、変数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で正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。

(更新日：2017年06月13日)