cman.jp３桁ごとにカンマを付ける
入力された数値（マイナス、小数も可）に３桁ごとにカンマを付けます。
最初にカンマを除去しますので、不適切な位置にカンマが入力された場合も、正しく３桁ごとにカンマが付きます。
３桁ごとにカンマを付けるサンプル（正規表現使用）
replace（正規表現指定）を使用して、入力された数値を小数を除く下桁から順に３桁に分割し、カンマを付加します。
入力確定後(カーソル移動時）に、カンマが付きます。
| 数値を入力 |
|---|
var wstr = str.value;
// 入力されたカンマを消去
var wnum = new String(wstr).replace(/,/g, "");
// 最上位桁まで下桁から３桁ごとにカンマ付加を繰り返す
while(wnum != (wnum = wnum.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
document.getElementById("addcomma").value=wnum;
return(str);
}
動作を確認しながら実行するサンプル
上記javascriptのwhile部分の動作を、実行ボタンを押下する都度実行します。
但し、不適切な位置にカンマや小数点が入力された場合、正しく動作しません。
その場合、カンマや小数点より上位桁にのみ、カンマが付きます。
『replace（正規表現指定）内容：(/^(-?\d+)(\d{3})/, "$1,$2")の説明』
①＾：先頭から参照
②(-?\d+)：１桁以上の数字（マイナスも可） ← 下記③を除いた数字
③(\d{3})：数字３桁
④$1：上記②が格納される
⑤,（カンマ）：④と⑥の間に設定される
⑥$2：上記③が格納される
| 数値を入力 |
|---|
３桁ごとにカンマを付けるサンプル（toLocaleString関数使用）
toLocaleStringは、対象のオブジェクトを、現在のロケールに応じた形式で変換を行った結果を返します。
対象のオブジェクトがnumber、ロケールが日本語の場合、３桁ごとにカンマが付きます。
入力確定後(カーソル移動時）に、カンマが付きます。
下記javascriptでは、ロケールに日本語を、小数桁を５桁（６桁目を四捨五入）に指定しています。
（ロケールが日本語であれば指定なしでも同様の結果になります。小数桁のデフォルトは３桁です。）
| 数値を入力 |
|---|
var wstr = str.value;
// 入力されたカンマを消去
var wnum = new String(wstr).replace(/,/g, "");
// 数値に変換
var wstr = Number(wnum);
// ３桁ごとにカンマ付加
var wnum = wstr.toLocaleString("jp",{maximumFractionDigits:5});
document.getElementById("localstr").value=wnum;
return(str);
}
toLocaleStringのoption指定で通貨記号を付けるサンプル
toLocaleStringのoptionのstyleに通貨フォーマットを指定すると、通貨に応じた区切り文字と通貨記号が付きます。
日本円の場合、３桁ごとにカンマと￥が付加されます。（ブラウザによっては、小数以下が切り捨てられます。）
入力確定後(カーソル移動時）に、カンマと￥が付きます。
下記javascriptでは、styleに通貨を、currencyに日本円を指定しています。
指定内容：toLocaleString("jp",{style:"currency",currency:"JPY"})
| 数値を入力 |
|---|
注意事項
- 上記サンプルでは、数値以外が入力される想定はありません。数値以外が入力された場合は、カンマは付きません。事前に数値チェックを実施してください。
- toLocaleStringは、未対応やoptionのみ未サポートのブラウザもあるので、注意が必要です。