JavaScriptでパターンに沿って文字列をマスキング・整形する方法

本記事では、第1引数に元となる文字列、第2引数にパターン文字列を受け取るJavaScript関数の実装方法を解説します。

この関数は、パターン内の「#」記号を順番に入力文字列の各文字へ置き換えることで、電話番号やクレジットカード番号などを読みやすい形式に整形(マスキング)できます。

要件の確認

たとえば、次のような文字列とパターンが与えられたとします。

const str = '123456789';
const pattern = '## ## ## ###';

この場合、関数はパターンに従って文字列を配置し、以下のような結果を返す必要があります。

const output = '12 34 56 789';

実装コード

ポイントは、正規表現 /#/g を使ってパターン内のすべての「#」を検索し、String.prototype.replace() の置換コールバックの中で入力文字列から1文字ずつ取り出して埋め込んでいくことです。外部変数 i をインクリメントしながら使うことで、置換のたびに次の文字を参照できます。

const str = '123456789';
const pattern = '## ## ## ###';

const maskString = (str, pattern) => {
    let i = 0;
    const padded = pattern.replace(/#/g, () => {
        return str[i++];
    });
    return padded;
};

console.log(maskString(str, pattern));

実行結果

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

12 34 56 789

仕組みの解説

• replace(/#/g, callback) は、パターン内の「#」1つにつきコールバック関数を1回呼び出します。
• コールバック内の str[i++] により、元の文字列から先頭の文字から順に1文字ずつ取得されます。
• 「#」以外の文字(ここでは半角スペース)はそのまま残るため、結果として「12 34 56 789」という整形済み文字列が得られます。

この手法は汎用性が高く、パターン側の「#」の並びや区切り文字を変更するだけで、「0000-0000-0000-0000」のようなカード番号形式や「(000) 000-0000」のような電話番号形式への整形にも簡単に応用できます。