JavaScriptで空白、スペース、ハイフンを削除する方法

文字列に含まれる不要な空白や記号だけを削除したいときありますよね。

方法は色々あるんですが、Web制作やWebアプリのような用途であればJavaScriptが良いかと思います。

JavaScriptでのやり方を知っておくとスプレッドシートのGASやエクセルのマクロでも転用しやすいので便利です。

「名前の入力で性と名の間の不要なスペースを消したい」
「電話番号でハイフンを消したい」
「削除するのではなく別の記号に置き換えたい」

以上のような場面ですぐに使えるメソッドになります。

また動画もあるので必要に応じて使ってください。

「削除」ではなく「置き換え」する

いきなりですが「削除」と考えるので難しそうに思えるのですが、「置き換え」とすれば非常に簡単になります。

プログラミングあるあるなんですが、どストレートに実現したい内容を探すのも良いのですが「正攻法の他にルートがないか？」という発想も非常に大事になってきます。

JavaScriptでは「文字の置き換え」にreplaceという関数が用意されています。

let image = "image1.png";
image = image.replace("image1.png","image2.png");

console.log(image);　//"image2.png"と出力される

使い方は上記ように対象となる文字列を引数にとってあげることで実現できます。

上記では変更前、変更後ともに「フルネーム」で記載していますが、「１文字だけ変えたい」なんてときは以下でも大丈夫です。

let image = "image1.png";
image = image.replace("1","2");

console.log(image);　//"image2.png"と出力される

replaceを使った置き換えの方法を先に紹介しました。

こちらを使うことによって例えばですが「名前の空白、スペースを削除する」ことは以下のようにできます。

let text = "田中　太郎";
text = text.replace("　", "");
console.log(text);　//"田中太郎"と出力される

お分かりでしょうか？

「スペースを空文字に置き換える」ことをやっても、結果的にスペースを削除したことになりましたね。

これくらいだったら初めてでも使えそうですよね。

続いて電話番号のハイフンも「置き換え」によって削除したいと思います。

ちなみに１点注意があります。

let number = "090-111-1111";
number = number.replace("-","");
console.log(number);　//"090111-1111"と出力される

先ほどと違って「最初のハイフンのみ」が削除されましたね。

こちらエラーではなく正常に動作しているんです。

replaceについて公式ドキュメントを見てみましょう。

注目すべきは冒頭に記載されている「最初に一致した箇所のみを置き換えます。」という部分です。

だから先ほどは１個のハイフンしか変換されなかったんですね。

とはいえこれでは困るので以下のように修正することができます。

let number = "090-111-1111";
number = number.replace(/-/g,"");
console.log(number);　//"0901111111"と出力される

思ったように動作しましたね。

修正を加えたのはreplaceの引数の部分です。

「/-/g」としていて、「-」に一致する全てを対象にする意味を持たせています。

このような方法を「パターン」「正規表現」とも呼んだりしてreplaceの公式ドキュメントにも記載があります。

全てのパターンを覚える必要はないですが、電話番号のハイフンのように「すべて置き換え」くらいは覚えておくと良いでしょう。

「/変更前の内容/g」という形ですね。

例題を使って文字の置き換えによる「削除」を紹介してみました。

JavaScriptには言葉通り「削除」のための関数もあって、以下の記事では「文章の両端にある空白を削除する方法」を紹介しています。

【コピペ1行】JavaScriptで空白の削除を簡単にする方法