JavaScriptで文字列から句読点・特殊文字を削除する方法

問題

文字列を受け取り、その中からすべての句読点や特殊文字を取り除き、結果の文字列には英字と数字だけを残すJavaScript関数を作成する必要があります。

入力

const str = 'th@is Str!ing Contains 3% punctuations';

出力

const output = 'thisStringContains3punctuations';

これは、すべての句読点（記号）と空白を削除したためです。

コード例

以下がその実装例です。

const str = 'th@is Str!ing Contains 3% punctuations';
const removeSpecialChars = (str = '') => {
    let res = '';
    for(let i = 0; i < str.length; i++){
        const el = str[i];
    if(+el){
        res += el;
        }else if(el.toLowerCase() !== el.toUpperCase()){
            res += el;
        };
        continue;
    };
    return res;
};
console.log(removeSpecialChars(str));

出力

thisStringContains3punctuations

コードの仕組み

この関数は、1文字ずつ次のような条件で判定しながら新しい文字列を組み立てています。

• 数字の判定： +el によって文字列を数値へ変換しています。数字であれば変換結果が真（truthy）になり、その文字は残されます。
• 英字の判定： el.toLowerCase() !== el.toUpperCase() を利用しています。英字は大文字・小文字の変換で値が変わるためこの条件が成立しますが、記号や空白は変換しても値が変わらないため除外されます。
• どちらの条件にも該当しない文字（句読点・記号・空白など）は、結果の文字列に追加されずにスキップされます。

なお、この実装には少し注意点があります。+"0" は数値の 0 として評価され偽（falsy）になるため、「0」という文字は意図せず削除されてしまいます。

より簡単な方法：正規表現を使う

実務では、正規表現と replace() メソッドを組み合わせることで、同じ処理をもっと簡潔に書けます。

const str = 'th@is Str!ing Contains 3% punctuations';
const removeSpecialChars = (str = '') => {
    return str.replace(/[^a-zA-Z0-9]/g, '');
};
console.log(removeSpecialChars(str));
// 出力: thisStringContains3punctuations

正規表現 /[^a-zA-Z0-9]/g は「半角英字と数字以外のすべての文字」にマッチするため、それらを空文字に置き換えるだけで特殊文字と空白を一括削除できます。「0」が消えてしまうような落とし穴もなく、可読性・パフォーマンスの両面で優れているため、特別な理由がない限りこちらの方法をおすすめします。