JavaScriptで文字列内の空白を置き換える方法（正規表現RegExを使用）

JavaScriptで正規表現（RegEx）を使えば、文字列内の空白を簡単に置き換えられます。この記事では、テキストからパターンを見つけ出す強力なツール「正規表現」の基本と、空白を削除・置換する具体的な方法を解説します。

正規表現（RegEx）とは？

正規表現（「RegEx」や「RegExp」と表記されることもあります）は、文字列（テキスト）を扱うための高性能なツールです。主な用途は以下の2つです。

• テキストのバリデーション（入力チェック）
• テキスト検索

今回は、正規表現を使ってテキスト（文字列）内のすべての空白を「空文字（なし）」に置き換えるシンプルな例を通して学びます。ただし、このコード例を応用すれば、空白をハイフンなど他の文字に置き換えることも可能です。

まず押さえておきたいのは、空白も1つの文字として扱われるという点です。つまり、今あなたが読んでいるこの文でも、単語と単語の間にあるスペースは、それぞれ1つの空白文字としてカウントされます。

たとえば「This sentence has 6 white space characters.」という文には、空白文字が6つ含まれています。

空白文字を置き換える基本的な方法

空白文字を置き換えるには、正規表現のメタ文字である\sを使用します。これは、改行・タブ・Unicodeスペースを含む単一の空白文字にマッチする特殊な文字です。

実際のコードは次のようになります。

const sentence = "This sentence has 6 white space characters."

console.log(sentence.replace(/\s/g, ""))
// Thissentencehas6whitespacecharacters.

コードの解説

• replace()メソッドの呼び出し： まず、空白を削除したい文字列が格納されたsentence変数に対して、replace()メソッドを呼び出します。
• メタ文字\sの指定： 次に、先述の\sメタ文字を引数として渡し、空白文字を検索します。バックスラッシュ（\）はJavaScriptでエスケープ文字として予約されているため、その前に/を付けてエスケープを解除し、/\s/という形にします。
• グローバルフラグgの使用： gフラグを付けると、文字列内のすべての空白文字が検索対象になります。gを付けない場合、最初に見つかった1つの空白（This sentenceの間）だけしか置き換えられないので注意しましょう。
• 置き換え後の文字： 最後に、空白を何に置き換えるかを指定します。ここでは空文字列""を指定しているため、空白文字が削除され、すべての単語が1つにつながった文字列になります。

注意： この操作では元のsentence変数自体は変更されていません。replace(/\s/g, "")を適用した場合の結果を、console.log()で出力して確認しているだけです。

元の変数の値を変更する方法

sentence変数の値自体を空白なしの状態にしたい場合は、結果を新しい変数に代入し、以降はその変数を参照するようにします。

const sentence = "This sentence has 6 white space characters."
const sentenceRemoveWhiteSpace = sentence.replace(/\s/g, "")

console.log(sentenceRemoveWhiteSpace)
// Thissentencehas6whitespacecharacters.

match()メソッドで空白の数を確認する

念のため、空白が本当に6つあるか確認してみましょう。もう1つの便利な正規表現メソッドmatch()を使えば、文字列内の空白文字の数をカウントできます。

console.log(sentence.match(/\s/g).length)
// 6

結果は6。計算どおりでした！