【JavaScript】文字列内のスラッシュ（/）をバックスラッシュに一括置換する方法

JavaScriptでは、スラッシュ（/）を含む可能性のある文字列を受け取り、すべてのスラッシュをバックスラッシュ（\）に置き換えた新しい文字列を返す関数を実装したいというケースがあります。

例として、次のような文字列を考えてみます。

const str = 'Th/s str/ng /conta/ns some/ forward slas/hes';

この文字列に含まれるスラッシュを、すべてバックスラッシュへ変換していきましょう。

実装例

以下がそのコードです。

const str = 'Th/s str/ng /conta/ns some/ forward slas/hes';
const invertSlashes = str => {
    let res = '';
    for(let i = 0; i < str.length; i++){
        if(str[i] !== '/'){
            res += str[i];
            continue;
        };
        res += '\\';
    };
    return res;
};
console.log(invertSlashes(str));

コードのポイント

• for文で文字列を1文字ずつ走査し、結果を格納する変数resに連結していきます。
• スラッシュ（/）以外の文字は、そのままresへ追加します。
• スラッシュだった場合は、代わりにバックスラッシュ（'\\'）を追加します。JavaScriptの文字列リテラル内ではバックスラッシュはエスケープ文字として扱われるため、2回続けて書く必要があります。

出力結果

コンソールには以下のように表示されます。

Th\s str\ng \conta\ns some\ forward slas\hes

補足：replace()メソッドでより簡潔に書く

同様の処理は、replace()メソッドと正規表現を組み合わせることで、わずか1行でも実現できます。

const result = str.replace(/\//g, '\\');
console.log(result);

正規表現「/\//g」は文字列中のすべてのスラッシュ（/）にマッチし、末尾のgフラグによって全箇所が一括置換されます。単純な置換処理であれば、ループを使うよりもこちらの方が可読性が高くおすすめです。