JavaScript Tips | 文字列操作：連続する空白を1つにまとめる

連続する空白を1つにまとめるとは

業務システムやWebアプリケーションでは、ユーザーが入力した文字列に不要な空白が含まれていることがよくあります。 例えば氏名、住所、商品名、メモ欄などでは、誤って複数の半角空白を入力してしまうケースがあります。

このようなデータをそのまま保存すると、検索結果が一致しなかったり、表示が崩れたり、データ比較が正しく行えなくなったりします。 そのため実務では「連続する空白を1つの空白へ統一する」という文字列正規化処理を行うことが少なくありません。

例えば次のような文字列があるとします。

JavaScript     Utility      Guide

これを次のように変換します。

JavaScript Utility Guide

見た目は小さな違いですが、データ品質や検索精度に大きな影響を与える重要な処理です。

まずは基本形を覚えよう

JavaScriptでは正規表現のreplace()を使うことで簡単に実現できます。

// 元の文字列
const text = "JavaScript     Utility      Guide";

// 連続する空白を1つにまとめる
const result = text.replace(/ +/g, " ");

console.log(result);

// 元の文字列
const text = "JavaScript     Utility      Guide";

// 連続する空白を1つにまとめる
const result = text.replace(/ +/g, " ");

console.log(result);

実行結果

JavaScript Utility Guide

「+」は1回以上の繰り返しを意味します。 つまり「空白が1個以上続いていたら1個の空白へ置換する」という意味になります。

replace()の仕組みを理解しよう

replace()とは

replace()は文字列の特定部分を別の文字列に置き換えるためのメソッドです。

const result = text.replace(検索条件, 置換文字列);

const result = text.replace(検索条件, 置換文字列);

今回の例では次のようになります。

text.replace(/ +/g, " ");

text.replace(/ +/g, " ");

正規表現の意味

正規表現部分を分解して見てみましょう。

/ +/g

/ +/g

各要素の意味は次の通りです。

• 空白 → 半角スペースを意味する
• + → 1回以上続く
• g → 文字列全体を対象にする

つまり、

      （空白6個）
   （空白3個）
       （空白5個）

といった複数箇所の連続空白をすべて検出できます。

実務でよく使うより安全な方法

実際の業務システムでは半角スペースだけでなく、タブ文字や改行が混在するケースがあります。

そのため実務では空白文字全般を対象にすることが多いです。

// 空白文字全般を1つの半角スペースへ変換
const text = "JavaScript\t\tUtility    Guide";

const result = text.replace(/\s+/g, " ");

console.log(result);

// 空白文字全般を1つの半角スペースへ変換
const text = "JavaScript\t\tUtility    Guide";

const result = text.replace(/\s+/g, " ");

console.log(result);

実行結果

JavaScript Utility Guide

\sとは

\sは空白文字全般を表します。

• 半角スペース
• タブ
• 改行
• 復帰コード
• その他の空白文字

実務ではこちらを使用することが多くなります。

全角空白にも対応する方法

日本語システムでは全角空白が混ざることがあります。

例えば次のような入力です。

JavaScript　　　Utility　　Guide

見た目では分かりにくいですが、これは全角空白です。

この場合は次のように処理します。

// 半角空白と全角空白をまとめて処理
const text = "JavaScript　　　Utility　　Guide";

const result = text.replace(/[ 　]+/g, " ");

console.log(result);

// 半角空白と全角空白をまとめて処理
const text = "JavaScript　　　Utility　　Guide";

const result = text.replace(/[ 　]+/g, " ");

console.log(result);

実行結果

JavaScript Utility Guide

実務で特に重要なポイント

日本語入力ではユーザー自身が全角空白を入力していることに気付いていない場合があります。

そのため、

• 会員登録フォーム
• 顧客管理システム
• 商品管理システム
• 検索機能
• CSV取込処理

などでは全角空白への対応が非常に重要です。

前後の空白も同時に削除する方法

実務では連続空白の統一だけでなく、文字列の前後の空白も削除することが一般的です。

// 前後空白削除＋連続空白統一
const text = "   JavaScript      Utility     Guide    ";

const result = text
    .trim()
    .replace(/\s+/g, " ");

console.log(result);

// 前後空白削除＋連続空白統一
const text = "   JavaScript      Utility     Guide    ";

const result = text
    .trim()
    .replace(/\s+/g, " ");

console.log(result);

実行結果

JavaScript Utility Guide

trim()の役割

trim()は文字列の先頭と末尾の空白を削除します。

const text = "   Hello World   ";

console.log(text.trim());

const text = "   Hello World   ";

console.log(text.trim());

実行結果

Hello World

データ保存前にはtrim()とreplace()を組み合わせることが非常に多いです。

業務で使えるテンプレート関数

実務では再利用できる関数としてまとめておくと便利です。

/**
 * 連続する空白を1つにまとめる
 * 前後の空白も削除する
 *
 * @param {string} text 対象文字列
 * @returns {string} 正規化後文字列
 */
function normalizeSpaces(text) {

    // nullやundefined対策
    if (text == null) {
        return "";
    }

    return String(text)
        .trim()                    // 前後空白削除
        .replace(/[ 　]+/g, " ");  // 半角・全角空白を1つへ統一
}

// 使用例
console.log(
    normalizeSpaces(
        "   JavaScript　　　Utility      Guide   "
    )
);

/**
 * 連続する空白を1つにまとめる
 * 前後の空白も削除する
 *
 * @param {string} text 対象文字列
 * @returns {string} 正規化後文字列
 */
function normalizeSpaces(text) {

    // nullやundefined対策
    if (text == null) {
        return "";
    }

    return String(text)
        .trim()                    // 前後空白削除
        .replace(/[ 　]+/g, " ");  // 半角・全角空白を1つへ統一
}

// 使用例
console.log(
    normalizeSpaces(
        "   JavaScript　　　Utility      Guide   "
    )
);

実行結果

JavaScript Utility Guide

実務でよくある活用例

検索キーワードの正規化

// ユーザー入力
const keyword = "JavaScript      入門";

// 正規化
const normalized = keyword.replace(/\s+/g, " ");

console.log(normalized);

// ユーザー入力
const keyword = "JavaScript      入門";

// 正規化
const normalized = keyword.replace(/\s+/g, " ");

console.log(normalized);

検索精度向上につながります。

CSVデータ取込

const productName =
    row.productName
       .trim()
       .replace(/[ 　]+/g, " ");

const productName =
    row.productName
       .trim()
       .replace(/[ 　]+/g, " ");

CSVには不要な空白が含まれていることが多いため非常に有効です。

フォーム入力チェック

const userName = normalizeSpaces(
    document.getElementById("name").value
);

const userName = normalizeSpaces(
    document.getElementById("name").value
);

データベースへ保存する前に正規化できます。

注意点

意図的な空白まで削除しないこと

すべてのシステムで連続空白を削除してよいとは限りません。

例えば文章整形ツールやコードエディタでは空白数自体に意味を持つ場合があります。

// インデントが重要な例
const code = `
    if (flag) {
        execute();
    }
`;

// インデントが重要な例
const code = `
    if (flag) {
        execute();
    }
`;

このような場合に空白統一を行うとレイアウトが崩れる可能性があります。

改行も対象になるか確認する

\sを使用すると改行も対象になります。

text.replace(/\s+/g, " ");

text.replace(/\s+/g, " ");

改行を維持したい場合は次のように半角空白のみを対象にした方が安全です。

text.replace(/ +/g, " ");

text.replace(/ +/g, " ");

まとめ

連続する空白を1つにまとめる処理は、文字列正規化の基本であり、実務において非常によく利用されるテクニックです。

• replace()で空白を置換できる
• / +/gで半角空白を統一できる
• /\s+/gで空白文字全般を統一できる
• /[ 　]+/gで半角空白と全角空白の両方に対応できる
• trim()と組み合わせると実務で使いやすい
• 検索・フォーム・CSV取込で特に活躍する

特に業務システムでは「入力値の正規化」が品質向上の鍵になります。連続する空白を1つにまとめる処理は小さな実装に見えますが、検索精度向上、データ品質改善、保守性向上につながるため、ぜひ基本テクニックとして身につけておきましょう。