JavaScriptで特定の文字列の順序に従って文字列を並べ替える方法

問題

2つの文字列 str1 と str2 を第1・第2引数として受け取るJavaScript関数を作成する必要があります。

この関数は、str1 を str2 に含まれる文字の出現順序に従って並べ替えます。

例えば、関数への入力が以下の場合を考えてみましょう。

入力

const str1 = 'coding';
const str2 = 'gncabdi';

出力

const output = 'gncdio';

出力の説明

str2 の中で先に現れる文字が優先的に前に配置され、その後に後から現れる文字が続きます。そして最後に、str2 に存在しない残りの文字がそのまま並べられます。

解決のアプローチ

この問題は次の手順で解決できます。

1. str1 のうち str2 に含まれる文字だけを抽出し、str2 内での位置（インデックス）に基づいてソートします。
2. str1 のうち str2 に含まれない文字を抽出し、元の順序のまま保持します。
3. 両者を連結して結果の文字列を返します。

コード例

以下が実際のコードです。

const str1 = 'coding';
const str2 = 'gncabdi';

const sortByOrder = (str1 = '', str2 = '') => {
    // str2 を配列化
    str2 = str2.split('');
    
    // str2 に含まれる文字を抽出し、str2 の順序でソート
    const arr1 = str1
        .split('')
        .filter(el => str2.includes(el))
        .sort((a, b) => str2.indexOf(a) - str2.indexOf(b));
    
    // str2 に含まれない文字を抽出
    const arr2 = str1
        .split('')
        .filter(el => !str2.includes(el));
    
    // 結果を連結して返す
    return arr1.join('') + arr2.join('');
};

console.log(sortByOrder(str1, str2));

コードの解説

まず str2.split('') で基準となる文字列を配列に変換します。続いて filter() メソッドを使って str2 に存在する文字だけを取り出し、sort() の比較関数内で indexOf() を用いることで、str2 の登場順に並べ替えています。

一方、str2 に存在しない文字は別の配列に抽出され、ソート済みの配列と結合されます。これにより、「指定順の文字 + 残りの文字」という期待通りの出力が得られます。

出力

コンソールには以下の結果が出力されます。

gncdio

'g'、'n'、'c' が str2 の順序通り先頭に配置され、'd'、'i'、'o' という str2 に含まれない文字がその後に続いていることが確認できます。