「trim」メソッドを使用

早速「trim」メソッドを使用して、文字列の前後からスペース・空白を削除してみます。

  // 文字列
  var text = '  前後に 半角スペース があります。 ';
  // trimなし
  document.getElementById('level_1').firstElementChild.innerHTML = text;
  // trimあり
  document.getElementById('level_2').firstElementChild.innerHTML = text.trim();

上記の例で下記の空白削除前の文字列が空白削除後のようになります。

空白削除前 : ‘‘

空白削除後 : ‘‘

文字列の先頭と末尾からスペース・空白を取り除くのは、これだけでOKです。お問い合わせフォームなどで使用するパターンが多いのではないでしょうか？

参考：developer.mozilla.org trim

jQueryを使用する方法では、$.trim()で文字列の先頭と末尾から空白を削除できるメソッドがあります。

参考：jQuery trim

これで、文字列の先頭と末尾から空白を削除することができました。

文字列の途中にあるスペース・空白

ここまででスペースが削除できた！と思いますが…文字列の先頭と末尾だけではなく、文字列の途中にあるスペース・空白を削除したい！ってことも多々ありますよね。

そんな時は「replace」メソッドを使用して、削除することができます。

「replace」メソッドを使用

正規表現で、スペースなどを取り除きます。

  var text = '  前後に 半角スペース があります。 ';
  // replaceあり
  document.getElementById('level_3').firstElementChild.innerHTML = text.replace(/\s+/g, "");

空白を全て削除 : ‘‘

「replace」メソッドでスペース、タブ、改ページ、改行を含む1個のホワイトスペース文字にマッチしたものを「””」に置換して空白を削除をしています。

正規表現の意味は下記の通りです

• 「\s」はスペース、タブ、改ページ、改行を含む1個のホワイトスペース文字にマッチ
• 「+」は1回以上の繰り返し
• 「g」で指定した正規表現を文字列全体でチェック

これで、文字列全体から空白を削除することができました。

参考：developer.mozilla.org replace

正規表現のさらに詳しい情報は下記から。

参考：developer.mozilla.org Regular_Expressions

JavaScript入門にオススメの参考書

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

楽天ブックス

Amazon

jQueryのオススメ参考書

改訂新版 jQuery本格入門 JavaScript開発・デザイン効率化の基礎から [ 沖林正紀 ]

楽天ブックス

Amazon