JavaScriptで文字列内の空白を「%20」に変換する方法

Web上のURLにスペースが含まれている場合、ブラウザは自動的にすべての半角スペースを「%20」という文字列に置き換えます。

本記事では、文字列を第一引数（唯一の引数）として受け取り、文字列中の空白があった位置をすべて「%20」に置き換えた新しい文字列を生成して返すJavaScript関数を作成します。

問題の例

たとえば、入力文字列が次の場合：

const str = 'some extra Space';

期待される出力は以下のとおりです。

const output = 'some%20extra%20%20Space';

「extra」と「Space」の間には元々2つ連続した空白があるため、出力では「%20%20」となっている点に注目してください。

実装例

この処理を実現するコードは次のとおりです。ループで文字列を1文字ずつ確認し、空白であれば「%20」を、それ以外であれば元の文字をそのまま結果に連結していきます。

const str = 'some extra Space';
const replaceWhitespace = (str = '') => {
    let res = '';
    const { length } = str;
    for(let i = 0; i < length; i++){
        const char = str[i];
        if(!(char === ' ')){
            res += char;
        }else{
            res += '%20';
        };
    };
    return res;
};
console.log(replaceWhitespace(str));

補足：より簡潔な書き方

実際の開発では、正規表現や組み込みメソッドを使うことで、同じ処理をもっと簡潔に記述できます。

// replaceメソッドと正規表現を使う方法（空白のみを対象）
const result = str.replace(/ /g, '%20');

// encodeURIComponentを使う方法（空白以外の特殊文字も同時にエンコードされる）
const encoded = encodeURIComponent(str);

encodeURIComponentは空白以外の記号も変換してしまうため、「空白だけ」を置換したい場合はreplaceメソッドを使うのが適しています。

実行結果

コンソールには次のように出力されます。

some%20extra%20%20Space