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

JavaScriptで空白を削除するイメージJS
この記事は約4分で読めます。

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

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

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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)); // "今日は晴れです。雲が少し出ています。"

まとめ

この記事では、JavaScriptを使って空白を削除する自動化の方法を7つ紹介しました。

これらの方法とサンプルコードを参考に、あなたもすぐに実践できるようになるでしょう。

注意点やカスタマイズ方法にも注意して、自分のニーズに合った空白削除処理を実現してください。