「JavaScript」文字列のスペース・空白などを削除【trim】

カテゴリー:JavaScript

文字列からスペースを削除したい!ということで、今回は「trim」メソッドを使用して文字列の先頭と末尾から空白を削除してみます。

「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

*上記の内容は、Chorme「バージョン: 67.0.3396.87」で動作を確認してます。

無駄なスペースなどが気になるときに使用することができるので、便利ですよね。

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

jQueryのオススメ参考書


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。