JavaScriptで文字列内のn回目に出現した文字を置き換える関数の作成方法

JavaScriptでは、第一引数に文字列、第二引数に数値 n、第三引数に文字 c を受け取る関数を実装することが求められることがあります。この関数の役割は、文字列中に登場するそれぞれの種類の文字について「n 回目の出現」を見つけ、それを第三引数で指定した文字に置き換えた新しい文字列を返すことです。

実装例

以下がそのコードです。

const str = 'This is a sample string';
const num = 2;
const char = '*';
const replaceNthAppearance = (str, num, char) => {
    const creds = str.split('').reduce((acc, val, ind, arr) => {
        let { res, map } = acc;
        if(!map.has(val)){
            map.set(val, 1);
            if(num === 0){
                res += char;
            }else{
                res += val;
            }
        }else{
            const freq = map.get(val);
            if(num - freq === 1){
                res += char;
            }else{
                res += val;
            };
            map.set(val, freq+1);
        };
        return { res, map };
    }, {
        res: '',
        map: new Map()
    });
    return creds.res;
}
console.log(replaceNthAppearance(str, num, char));

出力結果

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

This ***a s*mple string

コードの仕組み

この関数は以下の手順で動作します。

• split('') で元の文字列を1文字ずつ要素に持つ配列へ分解します。
• reduce() を使って処理を繰り返し、結果文字列（res）と各文字の出現回数を記録する Map を同時に管理します。
• 初めて登場する文字はそのまま Map に登録し、以降は累積出現回数をカウントしていきます。
• ある文字の累積出現回数と n の差がちょうど 1 になった時点、つまりn 回目の出現であることが判明した瞬間に、その文字を第三引数で渡された文字へ置き換えます。
• すべての文字を走査し終えたら、構築済みの結果文字列を返します。

上記の例では num = 2 が指定されているため、各文字の2回目の出現だけがアスタリスク（*）に置き換えられています。たとえば "is" の "i" と "s"、スペースの2個目などが該当し、結果として "This ***a s*mple string" という文字列が得られます。Map を利用しているため、文字列の長さに対して線形時間（O(n)）で処理できるのもこのアプローチの利点です。