JavaScriptで文字列から空白（スペース）を削除する4つの方法を徹底解説

はじめに

JavaScriptでは、文字列から空白文字を取り除く方法がいくつかあります。この記事では、代表的な4つのアプローチを、実際に動作するコード例とともにわかりやすく紹介します。

ループを使う方法
配列メソッド（split / filter / join）を使う方法
配列メソッド（split / join）を使う方法
replaceメソッドと正規表現を使う方法

1. ループを使う方法

forループを使う場合は、ループの前に新しい文字列変数を宣言しておき、処理を進めながらそこへ文字を追加していきます。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
   body {
     font-family: 'Roboto', Courier, monospace
   }
 </style>
  <script>
    const handleSubmit = str => {
 // ループ処理
 let newStr = "";
 for(let i = 0; i < str.length; i++) {
   if(str[i] !== " ") {
     newStr += str[i];
   }
 }
 document.getElementById("demo").innerHTML = newStr;
 
}
  </script>
</head>
 
<body>
  <h1>Whitespace Filter</h1>
  <input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
   <input type="submit" onclick="handleSubmit(demoString.value)"/>
   <div id="demo"></div>
 </body>
</html>

このループは文字列を1文字ずつ確認し、空白文字でなければnewStr変数に追加していきます。ここでは結果を画面に表示するためにDOM（Document Object Model）へ挿入していますが、コードの他の場所で利用したい場合は、newStr変数をreturnすればOKです。

2. 配列メソッドを使う方法：split / filter / join

先ほどのループ方式と考え方は近いですが、この方法では文字列を一旦配列に分割し、ES6のfilterメソッドで空白を除外します。具体的な実装は以下の通りです。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
   body {
     font-family: 'Roboto', Courier, monospace
   }
 </style>
  <script>
    const handleSubmit = str => {
  
// split/filter
 const splitted = str.split('');
 const filtered = splitted.filter(char => {
   return char !== " ";
 })
 let newStr = filtered.join('');
 
 document.getElementById("demo").innerHTML = newStr;
 
}
  </script>
</head>
 
<body>
  <h1>Whitespace Filter</h1>
  <input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
   <input type="submit" onclick="handleSubmit(demoString.value)"/>
   <div id="demo"></div>
 </body>
</html>

3. 配列メソッドを使う方法：split / join

前のセクションではsplit、filter、joinの3つを組み合わせて空白を削除しましたが、実は配列メソッドを使うなら、splitとjoinだけで十分です。空白を区切り文字として分割し、その後連結するだけで目的の文字列が得られます。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
   body {
     font-family: 'Roboto', Courier, monospace
   }
 </style>
  <script>
    const handleSubmit = str => {
 
 // split/join
 	 const splitted = str.split(' ');
 
 	 let newStr = splitted.join('');
 
 	 document.getElementById("demo").innerHTML = newStr;
 
}
  </script>
</head>
 
<body>
  <h1>Whitespace Filter</h1>
  <input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
   <input type="submit" onclick="handleSubmit(demoString.value)"/>
   <div id="demo"></div>
 </body>
</html>

これは非常に便利なショートカットです。任意の文字を指定してsplitすれば、その文字を文字列から完全に取り除くことができ、その後joinで配列をつなぎ合わせることで、目的の文字列を簡単に再構築できます。

4. replaceメソッドと正規表現を使う方法

正規表現（RegEx）を使って文字列内のすべての空白を一括で除去したい場合には、replaceメソッドが非常に有効です。replaceメソッドは本来、検索対象の「最初の1件」しか置き換えないという仕様のため、文字列に複数の空白が含まれる場合は最初の空白しか削除されません。そこで、空白を識別するために正規表現を併用します。

正規表現の末尾に付けるグローバルフラグ（g）によって、複数の箇所をまとめて検索・置換できるようになります。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
   body {
     font-family: 'Roboto', Courier, monospace
   }
 </style>
  <script>
  	const handleSubmit = str => {
 		let regex = /\s+/g
 		let newStr = str.replace(" ", "");
 
 		document.getElementById("demo").innerHTML = newStr;
 
}
  </script>
</head>
 
<body>
  <h1>Whitespace Filter</h1>
  <input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
   <input type="submit" onclick="handleSubmit(demoString.value)"/>
   <div id="demo"></div>
 </body>
</html>

\sは空白文字を表し、+は「1つ以上の空白文字が連続している」ことを意味します。さらに、式の末尾のgは、複数の空白グループすべてを検索対象にすることを示しています。

まとめ

この記事では、JavaScriptで文字列から空白を削除する4つの方法を解説しました。ループ処理、filterメソッド、split/joinメソッド、そして正規表現を使ったreplaceメソッドです。こうした基本操作をしっかりマスターしておけば、学習を進める中で直面するより複雑な問題にも柔軟に対応できるようになります。ぜひご自身のコードでも試してみてください。

JavaScriptで範囲（レンジ）を作成する3つの方法

JavaScriptの日付オブジェクト：日付を比較する方法

C++で文字列からスペースを削除する方法【初心者向けサンプルコード付き】
このプログラムは、入力された文字列からスペース（空白文字）をすべて取り除きます。文字列の容量を節約したい場合や、空白を含まない整形済みデータが必要な場合などに便利な処理です。以下に、実際の入出力例とともに、具体的な実装方法をわかりやすく解説します。入力：Hello World 出力：HelloWorld プログラムの仕組み文字列や文章からスペースを削除するには、まずユーザーに文字列の入力を求めます。その後、文字列を先頭から1文字ずつ走査し、スペースが存在するかどうかをチェックしていきます。スペースが見つかった場合は、そのスペース以降にある文字をすべて1つずつ前方へずらして詰めます。これ
C++でstd::stringから空白を削除する方法
```html この記事では、C++でstd::stringから空白（スペース）を取り除く方法を解説します。空白の削除には、<algorithm>ヘッダーで提供されるremove()関数を使用します。この関数は、処理対象の範囲の先頭と末尾を指す2つのイテレータと、削除したい値を第3引数として受け取ります。入力：文字列 "This is C++ Programming Language" 出力：文字列 "ThisisC++ProgrammingLanguage"アルゴリズムステップ1：文字列を取得するステップ2：remove()関数を使って、