web-dev-qa-db-ja.com

jqueryを使用して通貨を正しくフォーマットするにはどうすればよいですか？

マスクは必要ありませんが、通貨をフォーマットする（すべてのブラウザーで）文字や特殊文字を入力できないものが必要です。助けてくれてありがとう

例：

有効：$ 50.00
$ 1,000.53

無効：$ w45.00
$ 34.3r6

jquerycurrencyformatter
71
ninjasense

JQUERY FORMATCURRENCY PLUGIN
http://code.google.com/p/jquery-formatcurrency/

48
Robert Harvey

別のオプション（ASP.Netカミソリビューを使用している場合）は、ビューで次のことができます

<div>@String.Format("{0:C}", Model.total)</div>

これにより、正しくフォーマットされます。注（item.totalはdouble/decimalです）

jQueryでRegexも使用できる場合

$(".totalSum").text('$' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
92
Melu

Meluの答えを拡張すると、これを実行してコードを機能化し、負の量を処理できます。

出力例：
5.23ドル
-5.23ドル

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
34
Chad Kuehn

JQuery FormatCurrencyプラグインが良い答えである理由の帰結として、私はあなたのコメントに反論したいと思います：

1。code.google.com/p/jquery-formatcurrency-すべての文字を除外しません。1つの文字を入力しても削除されません。

はい、formatCurrency（）自体は文字を除外しません：

// only formats currency
$(selector).formatCurrency();

ただし、formatCurrencyプラグインに含まれるtoNumber（）は含まれます。

したがって、次のことを行います。

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();
19
Neptune Systems

jquery.inputmask 3.x を使用します。デモを見る こちら

インクルードファイル：

<script src="/assets/jquery.inputmask.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>

そしてコードとして

$(selector).inputmask('decimal',
  { 'alias': 'numeric',
    'groupSeparator': '.',
    'autoGroup': true,
    'digits': 2,
    'radixPoint': ",",
    'digitsOptional': false,
    'allowMinus': false,
    'prefix': '$ ',
    'placeholder': '0'
  }
);

ハイライト：

  • 使いやすい
  • マスク内のオプション部品
  • 複雑さを隠すエイリアスを定義する可能性
  • 日付/日時マスク
  • 数値マスク
  • たくさんのコールバック
  • 貪欲でないマスク
  • 多くの機能はオプションで有効化/無効化/設定できます
  • readonly/disabled/dir = "rtl"属性をサポート
  • データ入力マスク属性をサポート
  • マルチマスクのサポート
  • 正規表現マスクのサポート
  • ダイナミックマスクのサポート
  • 前処理マスクのサポート
  • 入力要素なしの値の書式設定/検証
15
Fernando Kosh

以前はjquery形式の通貨プラグインを使用していましたが、最近非常にバグが多くなりました。 USD/CADの書式設定だけが必要なので、独自の自動書式設定を作成しました。

$(".currencyMask").change(function () {
            if (!$.isNumeric($(this).val()))
                $(this).val('0').trigger('change');

            $(this).val(parseFloat($(this).val(), 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
        });

通貨<input type="text" class="currencyMask" />としてフォーマットする必要がある入力のクラスを設定するだけで、どのブラウザーでも完全にフォーマットされます。

7
Greg Snider

JQueryで正規表現通貨を試してください（プラグインなし）：

$(document).ready(function(){
  $('#test').click(function() {
    TESTCURRENCY = $('#value').val().toString().match(/(?=[\s\d])(?:\s\.|\d+(?:[.]\d+)*)/gmi);
    if (TESTCURRENCY.length <= 1) {
      $('#valueshow').val(
        parseFloat(TESTCURRENCY.toString().match(/^\d+(?:\.\d{0,2})?/))
      );
    } else {
      $('#valueshow').val('Invalid a value!');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="12345.67890" id="value">
<input type="button" id="test" value="CLICK">
<input type="text" value="" id="valueshow">

編集：新しい値を有効/無効にチェック

3
KingRider