CODEWITHSUNDEEP
javascriptjquery
Shawn Hellwege
Shawn Hellwege

Reputation: 63

unable to remove comma with "replace" in javascript

When using toLocaleString, even though it outputs a value with a $ and comma delimited thousands values it likes a pure number in there without commas or $. I am trying to strip those out from the value before I put it in and it seems to work for the '$' but not the ','.

Could someone please tell me what I am doing wrong?

$("#bob").blur(function() {
  NumberStripped = ($("#bob").val()).replace(',', '');
  NumberStripped = ($("#bob").val()).replace('$', '');
  console.log(NumberStripped);
  CurrencyValue = Number(NumberStripped).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
  $('#bob').val(CurrencyValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="CurrencyTest" id="bob" maxlength="15">

To duplicate it you can basically type in 123456, click off, then click on and click off.

Some other posts suggested I use this to replace a comma:

NumberStripped = ($("#bob").val()).replace(/,/g, '');

I am not sure what that does but it still doesn't work.

To duplicate it you can basically type in 123456, click off, then click on and click off.

Upvotes: 0

Views: 890

Answers (4)

Daniel Beck
Daniel Beck

Reputation: 21485

Another way to remove multiple different characters is this:

.replace(/[,$]/g,'')

The square brackets mean "match any of these characters," in this case , and $. The g makes it a global replace -- without that only the first matched instance will be removed. 

$("#bob").blur(function() {
    var replaced = Number(
      $("#bob")
         .val()
         .replace(/[,$]/g,'')
      ).toLocaleString('en-US', {
         style: 'currency',
         currency: 'USD',
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
      }
    )
    $('#bob').val(replaced);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="CurrencyTest" id="bob" maxlength="15">

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The problem is because you're only using the result of the second replace() call - you don't use the value created after you make the first replacement to remove the , characters.

That being said you can improve the logic by making a single replace() call which finds any character that isn't a digit or . and removes it. Then the formatting function will work fine. Try this:

$("#bob").blur(function() {
  var numberStripped = $("#bob").val().replace(/[^\d.]/g, '');
  var currencyValue = parseFloat(numberStripped).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
  $('#bob').val(currencyValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="CurrencyTest" id="bob" maxlength="15">

Upvotes: 2

TKoL
TKoL

Reputation: 13902

Using the code you provided, I have it working here:

https://jsfiddle.net/3ntbvq05/42/

NumberStripped = ($("#bob").val()).replace(/,/g, '');

Your NumberStripped variable is being overwritten by the part that replaces the dollar sign right after the comma. Be careful of that.

--- edit >> jsFiddle that also handles dollar: https://jsfiddle.net/3ntbvq05/43/

Upvotes: 0

P.S.
P.S.

Reputation: 16384

One of the ways to do that is to use .split(',').join(''). Here is an example:

$("#bob").blur(function() {
    var replaced;
    replaced = ($("#bob").val()).split(',').join('').split('$').join('');
    console.log(replaced);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="CurrencyTest" id="bob" maxlength="15">

Upvotes: 0

Related Questions