【JavaScript】文字列に含まれる半角・全角スペースを削除する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで文字列に含まれる半角・全角スペースを削除する方法をご紹介しています。一般的なreplaceメソッドを使用した方法と、Arrayのfilterメソッドを使用した方法をご紹介しています。

JavaScriptで文字列に含まれるスペースを削除したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

replaceメソッドで半角・全角スペースを削除する

Stringreplaceメソッドと正規表現を使って文字列から半角・全角スペースを削除します。ポピュラーな方法で、多くの方がサイトやブログで紹介している内容となります。

HTML

<p>ダミーテキスト ダミーテキスト ダミーテキスト</p>

JavaScript

const element = document.querySelector('p');
const result = element.textContent.replace(/\s+/g,'');

console.log(result);

実行結果

ダミーテキストダミーテキストダミーテキスト

実行結果を確認すると、文字列から半角・全角スペースが削除できていますね。

Arrayのfilterメソッドで半角・全角スペースを削除する

Arrayfilterメソッドで文字列から半角・全角スペースを削除してみます。スペースの削除については基本的にreplaceメソッドを使用する方法で問題ないですが、スペース以外の文字を削除対象に追加する場合に便利な方法となります。

HTML

<p>ダミーテキスト ダミーテキスト ダミーテキスト</p>

JavaScript

const element = document.querySelector('p');
const result = element.textContent.split('').filter((char)=>{
    return char !== ' ' && char !== ' ';
}).join('');

console.log(result);

正規表現を使用する場合は下記のように記述することもできますね。

const element = document.querySelector('p');
const result = element.textContent.split('').filter((char)=>{
    return !/\s/.test(char);
}).join('');

console.log(result);

半角・全角スペースの比較はincludesでよりスッキリさせることもできます。

const element = document.querySelector('p');
const result = element.textContent.split('').filter((char)=>{
    return ![' ', ' '].includes(char);
}).join('');

console.log(result);

実行結果

ダミーテキストダミーテキストダミーテキスト

これで文字列から半角・全角スペースを削除することができました。includesメソッドを使用した方法は配列に削除対象の文字列を追加するだけで簡単に増減ができるため、運用する中で削除対象が変更になる可能性がある場合は検討しても良いかもしれないですね。

最後に

本記事でご紹介した内容以外にも、半角・全角スペースを削除する方法はあると思いますが、文字列を配列に変換し、filterを通すことで、半角・全角スペース以外に削除したい文字列が追加になった場合も柔軟に対応することができます。検証する文字列の長さやサイトのパフォーマンス等を考慮し、状況に応じて使い分けてくださいね。

以上、JavaScriptで文字列に含まれる半角・全角スペースを削除する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら