JavaScriptで複数の区切り文字を使って文字列を分割する方法

JavaScriptでは、文字列と任意の数の区切り文字を受け取り、それらすべての区切り文字に基づいて分割された配列を返す関数を作成する必要がある場面があります。

例えば、次のような文字列があったとします。

const str = 'rttt.trt/trfd/trtr,tr';

区切り文字が以下の場合、

const sep = ['/', '.', ','];

期待される出力は次のようになります。

const output = [ 'rttt', 'trt', 'trfd', 'trtr' ];

実装コード

以下は、複数の区切り文字で文字列を分割する関数の実装例です。可変長引数（レストパラメータ）を使うことで、区切り文字をいくつでも渡せるようにしています。

const str = 'rttt.trt/trfd/trtr,tr';

const splitMultiple = (str, ...separator) => {
    const res = [];
    let start = 0;
    for(let i = 0; i < str.length; i++){
        if(!separator.includes(str[i])){
            continue;
        };
        res.push(str.substring(start, i));
        start = i + 1;
    };
    return res;
};

console.log(splitMultiple(str, '/', '.', ','));

出力結果

このコードをコンソールで実行すると、以下の出力が得られます。

[ 'rttt', 'trt', 'trfd', 'trtr' ]

処理の流れを解説

この関数の仕組みはシンプルです。

1. 区切り文字の判定： 文字列を1文字ずつ走査し、その文字が引数で渡された区切り文字のリストに含まれているかどうかを includes() メソッドで確認します。含まれていない場合は continue でスキップします。

2. 部分文字列の抽出： 区切り文字が見つかった時点で、前回の区切り位置（start）から現在の位置までを substring() で切り出し、結果配列に追加します。

3. 開始位置の更新： 区切り文字の次の位置を新しい開始位置として記録し、走査を続けます。

正規表現を使った別のアプローチ

より簡潔に書きたい場合は、split() メソッドと正規表現を組み合わせる方法もあります。

const str = 'rttt.trt/trfd/trtr,tr';

const splitWithRegex = (str, ...separator) => {
    const pattern = new RegExp(`[${separator.map(s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('')}]`);
    return str.split(pattern).filter(Boolean);
};

console.log(splitWithRegex(str, '/', '.', ','));
// 出力: [ 'rttt', 'trt', 'trfd', 'trtr' ]

この方法では、区切り文字から動的に正規表現パターンを生成し、split() を一度呼び出すだけで済みます。filter(Boolean) を使うことで、連続した区切り文字によって生じる空文字列を除去しています。

まとめ

ループベースの実装は処理の流れが明確で学習向きですが、実務では正規表現と split() を組み合わせた方がコードが短く、保守性も高くなります。用途や可読性の要件に応じて使い分けるのがおすすめです。