JavaScriptで先頭の文字を「****」に置き換え、末尾の3文字だけを表示する方法

個人情報やカード番号などを扱う際、文字列の一部を隠して表示したいケースはよくあります。例えば、以下のような値があったとします。

'6778922'
'76633 56 1443'
'8888 4532 3232 9999'

この値に対して、先頭部分の文字を4つのアスタリスク（****）で置き換え、末尾の3文字だけを表示したい場合、期待する出力は次のようになります。

**** 922
**** 443
**** 999

このような処理を実現するには、replace()メソッドに正規表現を組み合わせて使用します。

実装例

以下がそのコードです。

const hideDataWithDot = value => value.replace(/.+(.{3})$/, "**** $1");
console.log(hideDataWithDot('6778922'));
console.log(hideDataWithDot('76633 56 1443'));
console.log(hideDataWithDot('8888 4532 3232 9999'));

正規表現の仕組み

ここで使われている正規表現 /.+(.{3})$/ の動作を分解して見てみましょう。

• .+：先頭から任意の1文字以上にマッチします（貪欲マッチのため、できる限り長く一致しようとします）。
• (.{3})$：行末直前のちょうど3文字にマッチし、キャプチャグループとして記憶します。

そして置換文字列 "**** $1" の中で、キャプチャした末尾3文字を $1 として参照しています。これにより、先頭部分がすべて **** に置き換わり、末尾3文字だけが残るという仕組みです。

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を demo236.js として保存しています。

出力結果

実行すると、以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo236.js
**** 922
**** 443
**** 999

このように、たった1行のアロー関数で文字列のマスキング処理を簡単に実装できます。クレジットカード番号や電話番号など、機密情報の一部を非表示にしたい場面でぜひ活用してください。