JavaScriptで空白を削除！自動化の7つの方法とサンプルコード

2023.04.102024.05.10

この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

はじめに
JavaScriptで空白を削除する方法
空白削除の応用例とサンプルコード
注意点と対処法
カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで空白を削除し自動化することができるようになります。

JavaScript初心者でも理解できるように、詳しく徹底解説しています。

JavaScriptで空白を削除する方法

JavaScriptで空白を削除する方法にはいくつかありますが、ここでは3つの方法を紹介します。

○方法1：replace()を使う

replace()メソッドを使って、文字列の先頭と末尾の空白を削除することができます。

const str = " こんにちは、世界！ ";
const result = str.replace(/^\s+|\s+$/g, "");
console.log(result); // "こんにちは、世界！"

○方法2：trim()を使う

trim()メソッドを使って、文字列の先頭と末尾の空白を削除することができます。

const str = " こんにちは、世界！ ";
const result = str.trim();
console.log(result); // "こんにちは、世界！"

○方法3：正規表現を使う

正規表現を使って、文字列中のすべての空白を削除することができます。

const str = " こんに ち は、 世 界！ ";
const result = str.replace(/\s+/g, "");
console.log(result); // "こんにちは、世界！"

空白削除の応用例とサンプルコード

JavaScriptで空白を削除する技術を応用して、さまざまな場面で活用できます。

ここでは3つの応用例を紹介します。

○応用例1：フォーム入力値の空白削除

ユーザーがフォームに入力した値の先頭と末尾の空白を削除して、データベースに保存する際に活用できます。

const input = document.querySelector("#inputField");
const submitButton = document.querySelector("#submitButton");

submitButton.addEventListener("click", () => {
  const inputValue = input.value.trim();
  console.log(inputValue); // 入力値の先頭と末尾の空白が削除された状態で出力されます。
});

○応用例2：文字列中のすべての空白を削除

文章中のすべての空白を削除して、連続した文字列に変換することができます。

const text = " 今 日 は 晴 れ で す。 ";
const result = text.replace(/\s+/g, "");
console.log(result); // "今日は晴れです。"

○応用例3：特定の空白文字のみ削除

特定の空白文字（例えば、タブや改行）のみを削除することができます。

const text = "こんにちは、\n世界！\tお元気ですか？";
const result = text.replace(/[\t\n]+/g, "");
console.log(result); // "こんにちは、世界！お元気ですか？"

注意点と対処法

JavaScriptで空白を削除する際の注意点として、異なる種類の空白文字（例えば、全角スペース）が存在することがあります。

これらの空白文字も削除したい場合は、正規表現を工夫して対応する必要があります。

カスタマイズ方法

空白を削除する方法をカスタマイズして、特定の条件下でのみ空白を削除するようにすることもできます。

例えば、文字列の長さに応じて空白を削除する方法など、独自のロジックを組み込むことが可能です。

function customTrim(str) {
  if (str.length > 10) {
    // 文字列が10文字より長い場合、すべての空白を削除
    return str.replace(/\s+/g, "");
  } else {
    // 文字列が10文字以下の場合、先頭と末尾の空白のみ削除
    return str.trim();
  }
}

const text1 = " こんに ち は 世 界 ";
const text2 = " 今 日 は 晴 れ で す。 雲 が 少 し 出 て い ま す。 ";

console.log(customTrim(text1)); // "こんにちは世界"
console.log(customTrim(text2)); // "今日は晴れです。雲が少し出ています。"