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

こんにちは、Ryohei（@ityryohei）です！

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

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

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

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

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

HTML

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

JavaScript

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

console.log(result);

実行結果

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

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

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

Arrayのfilterメソッドで文字列から半角・全角スペースを削除してみます。スペースの削除については基本的に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で文字列に含まれる半角・全角スペースを削除する方法のご紹介でした！