JavaScriptとjQueryでテキストからすべての空白を削除する方法

2024-04-09

JavaScriptとjQueryでテキストからすべての空白を削除する方法

方法1：trim()メソッドを使う

trim()メソッドは、文字列の先頭と末尾にある空白を削除します。すべての空白を削除したい場合は、以下の方法でreplace()メソッドと組み合わせて使用します。

function removeWhitespace(text) {
  return text.replace(/\s+/g, "");
}

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = removeWhitespace(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.

方法2：jQueryを使う

jQueryを使う場合は、以下の方法で$.trim()メソッドを使ってすべての空白を削除できます。

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = $.trim(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.

補足

上記のコードは、半角スペースと全角スペースの両方を削除します。
正規表現\s+は、1つ以上の空白文字にマッチします。
gフラグは、すべてのマッチ箇所を置き換えることを意味します。

上記以外にも、以下のような方法でテキストから空白を削除することができます。

正規表現を使って、特定の種類の空白だけを削除する

ループを使って、文字列から空白を1文字ずつ削除する

JavaScript

function removeWhitespace(text) {
  return text.replace(/\s+/g, "");
}

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = removeWhitespace(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.

説明

removeWhitespace()関数:
- 引数として文字列を受け取ります。
- replace()メソッドを使って、すべてのマッチ箇所を空文字に置き換えます。
- 空白が削除された文字列を返します。
textWithWhitespace変数:
- 空白を含む文字列を格納します。
trimmedText変数:
console.log()関数:
- trimmedText変数の内容を出力します。

jQuery

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = $.trim(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.

$.trim()メソッド:
- 文字列の先頭と末尾にある空白を削除します。

削除する空白の種類をオプションで指定できるようにする

JavaScriptとjQueryでテキストからすべての空白を削除するその他の方法

方法1：正規表現とループを使う

この方法は、正規表現を使って空白文字にマッチし、ループを使ってマッチした文字をすべて削除します。

function removeWhitespace(text) {
  let result = "";
  for (let i = 0; i < text.length; i++) {
    if (!/\s/.test(text[i])) {
      result += text[i];
    }
  }
  return result;
}

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = removeWhitespace(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.

この方法は、Array.prototype.filter()メソッドを使って、空白文字ではない文字のみを含む新しい配列を作成し、その配列を結合して文字列にします。

function removeWhitespace(text) {
  const trimmedText = text.split("").filter(c => !/\s/.test(c)).join("");
  return trimmedText;
}

const textWithWhitespace = " This text has   many    spaces. ";
const trimmedText = removeWhitespace(textWithWhitespace);
console.log(trimmedText); // 出力: Thistexthasmanyspaces.