文字列からスペースを削除したい!ということで、今回は「trim」メソッドを使用して文字列の先頭と末尾から空白を削除してみます。
「trim」メソッドを使用
早速「trim」メソッドを使用して、文字列の前後からスペース・空白を削除してみます。
// 文字列 var text = ' 前後に 半角スペース があります。 '; // trimなし document.getElementById('level_1').firstElementChild.innerHTML = text; // trimあり document.getElementById('level_2').firstElementChild.innerHTML = text.trim();
上記の例で下記の空白削除前の文字列が空白削除後のようになります。
空白削除前 : ‘‘
空白削除後 : ‘‘
文字列の先頭と末尾からスペース・空白を取り除くのは、これだけでOKです。お問い合わせフォームなどで使用するパターンが多いのではないでしょうか?
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
正規表現のさらに詳しい情報は下記から。
*上記の内容は、Chorme「バージョン: 67.0.3396.87」で動作を確認してます。
無駄なスペースなどが気になるときに使用することができるので、便利ですよね。