How to format result with comma and period?

3

How do I format the result of a comma and dot sum.

The Result:

80.50 *  52 = 4189.00

How do I intend:

80.50 *  52 = 4,189.00

My JS

function calcular() {
 var valores1 = document.getElementsByClassName('txt1');
 var valores2 = document.getElementsByClassName('txt2');
 var resultados = document.getElementsByClassName('result');

 for (let i = 0; i < valores1.length; ++i) {
     let num1 = parseFloat(valores1[i].value);
     let num2 = parseFloat(valores2[i].value);
     resultados[i].value = (num1 * num2).toFixed(2);
 }
}
    
asked by anonymous 26.07.2017 / 17:57

4 answers

1
resultados[i].value = (((num1 * num2).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ","));

Example:

function calcular(){
    var valores1 = document.getElementsByClassName('txt1');
    var valores2 = document.getElementsByClassName('txt2');
    var resultados = document.getElementsByClassName('result');

    for (let i = 0; i < valores1.length; ++i){
        let num1 = parseFloat(valores1[i].value);
        let num2 = parseFloat(valores2[i].value);
        //resultados[i].value = (num1 * num2).toFixed(2);
        
       resultados[i].value = (((num1 * num2).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    }
}
<input class="txt1" value="80.50" name="opcao1" id="opcao1" type="text">
<input class="txt2" value="52" name="opcao2" id="opcao2" type="text">
<input class="result" value="" name="opcao3" id="opcao3" type="text" onclick="calcular()" placeholder="Clique aqui para calcular">

The idea is to combine recursively - with the flag g (global) - making a positive Lookahead (?=(\d{3})+(?!\d)) - a sequence of 3 digits (\d{3}) since there is no right digit (?!\d) of this sequence - and other than start or end of string \B

Lookahead is a way of marrying strings that have a particular ending or not. It is used (? = ...) for the positive, ie ending with, and (?! ...) for the negative, ie it does not end with.

A simple example would be Rafael's search followed by Ferreira. If there was Rafael or Rafael Otrocoisa, he would not marry. /Rafael(?= Ferreira)/

On the contrary, in this example, it would only marry Rafael or Rafael Otracoisa, but would not marry Rafael Ferreira: /Rafael(?! Ferreira)

    
26.07.2017 / 19:08
3

A simple strike regular expression solves your problem:

var numero = "4189.00";
numero = numero.replace(/(\d{1,3}|\G\d{3})(?=(?:\d{3})+(?!\d))/g, "$1,");

Result: "4,189.00"

This regular expression works for any number size, with or without decimals (but only up to 3 boxes after the dot).

    
26.07.2017 / 20:26
1

There is a method called toLocaleString () . This method returns a string with a language-sensitive representation of that number.

According to the documentation the default method output is American standard

var number = 3500;
console.log(number.toLocaleString()) //3,500

The strange thing is that when testing this is not what happens, applying the // 3.500 pattern. There is the German standard that formats monetary values according to Brazil. To do this, add the de-DE parameter to the

var number = 123456.789;
console.log(number.toLocaleString('de-DE', { maximumFractionDigits: 2 }))
//123.456,79
    
26.07.2017 / 20:23
0

I use the maskMoney plugin

Then you just have to customize your field with jQuery.

 $(document).ready(function () {
      $("#valor").maskMoney({ thousands: '', decimal: ',', allowZero: true });
  });

HTML

<div class="form-group" id="div_valor">
                        <div class="input-group">
                            <div class="input-group-addon">
                                @Html.LabelFor(model => model.valor, new { @class = "control-label col-md-2" })
                            </div>
                            @Html.TextBoxFor(model => model.valor, new { @class = "form-control" })
                        </div>
                    </div>
    
26.07.2017 / 18:22