How can I correctly format currency using jquery?

Another option (If you are using ASP.Net razor view) is, On your view you can do

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

This would format it correctly. note (item.total is double/decimal)

if in jQuery you can also use Regex

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

Expanding upon Melu's answer you can do this to functionalize the code and handle negative amounts.

Sample Output:
$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(); } 

As a corollary to why the jQuery FormatCurrency plugin is a good answer, I'd like to rebut your comment:

1. code.google.com/p/jquery-formatcurrency - Does not filter out all letter's. You can type a single letter and it will not remove it.

Yes, formatCurrency() by itself does not filter out letters:

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

But toNumber(), included in the formatCurrency plugin, does.

You thus want to do:

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

Use jquery.inputmask 3.x. See demos here

Include files:

<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> 

And code as

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

Highlights:

• easy to use
• optional parts anywere in the mask
• possibility to define aliases which hide complexity
• date / datetime masks
• numeric masks
• lots of callbacks
• non-greedy masks
• many features can be enabled/disabled/configured by options
• supports readonly/disabled/dir="rtl" attributes
• support data-inputmask attribute(s)
• multi-mask support
• regex-mask support
• dynamic-mask support
• preprocessing-mask support
• value formatting / validating without input element

I used to use the jquery format currency plugin, but it has been very buggy recently. I only need formatting for USD/CAD, so I wrote my own automatic formatting.

$(".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()); }); 

Simply set the class of whatever input should be formatted as currency <input type="text" class="currencyMask" /> and it will format it perfectly in any browser.

JavaScript already has it.

var cur = function (amt) { return Intl.NumberFormat('en-US', { style: "currency", currency: "USD" }).format(amt); }; 

Try regexp currency with jQuery (no plugin):

$(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">

Edit: New check a value to valid/invalid

C#

@{ CultureInfo newCulture = CultureInfo.CreateSpecificCulture(Model.culture); var ri = new RegionInfo(@newCulture.LCID); } 

jQuery

$(document).find("#labGrandTotal").text(Intl.NumberFormat('@Model.culture', { style: 'currency', currency: '@ri.ISOCurrencySymbol'}).format(num)); 

Where Model.culture is for example "en-GB"