6

O script está somando, porém apenas números. Gostaria de ter os valores com pontos e com vírgulas.

Por exemplo: 1.000,00 + 100,00 = 1.100,00

Alguém dá essa força aí?

Segue o código abaixo:

<script src="jquery_somar.js"></script>

<div class="somar">1.000,00</div>
<div class="somar">1.000,00</div>
<div class="somar">1.000,00</div>
<div id="resultado">3.000,00</div>

<script type="text/javascript">
    var sum = 0;
    $('.somar').text(function(i, v) {
        sum += parseFloat(v.replace(',', '.'));
    });
    $('#resultado').text('resultado : ' + sum);
</script>

2 Respostas 2

8

Podes usar o toLocaleString() para formatar o resultado. Ele vai automaticamente adotar a maneira de mostrar do país que está configurado no computador. Mas se quiseres forçar Brazil podes fazer assim: .toLocaleString('pt-BR').

Se quiseres forçar duas casas decimais no resultado, para dar 3.000,50 em vêz de 3.000,5 podes usar um segundo argumento como fiz no exemplo em baixo:

Assim o código poderia ser:

var total = $('.somar').get().reduce(function(tot, el) {
    var numero = el.innerHTML.split('.').join('').split(',').join('.');
    return tot + Number(numero);
}, 0);
$('#resultado').html(total.toLocaleString(undefined, {minimumFractionDigits: 2}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="somar">1.000,00</div>
<div class="somar">1.000,50</div>
<div class="somar">1.000,00</div>
<div id="resultado"></div>

jsFiddle: https://jsfiddle.net/3gsgyhs0/3/

9
  • Executei o seu código e aquele 3,000.5 na resposta pode ser problemático, pois acho que o ideal seria colocar o zero a mais que está faltando nos centavos. Além disso, no final ele usou vírgula como separador de milhares e ponto para separar a parte inteira da fracionária. De qualquer forma, fique com meu +1 também por causa do .toLocaleString('pt-BR') e do reduce. 14/08/2016 às 7:00
  • @VictorStafusa a questão do 3,000.5 não ter zero no fim depende do .toLocaleString(). Uma vez usando-o temos de acreditar que ele vai dar o resultado certo em cada país.
    – Sergio
    14/08/2016 às 7:03
  • Bem, pensando melhor, acho que é porque o meu locale deve estar errado (o que também explicaria um monte de bizarrices que acontecem só comigo em outros sites). Isso sugere que sempre usar o 'pt-BR' e ignorar o locale do navegador seria bom. 14/08/2016 às 7:04
  • @VictorStafusa eu recebo en-US quando faço window.navigator.userLanguage || window.navigator.language;
    – Sergio
    14/08/2016 às 7:08
  • 1
    Excelente. Se eu fosse o OP aceitaria a sua resposta então. Só falta dizer que o undefined é o locale no caso de não querer forçar o pt-BR ou algum outro. 14/08/2016 às 7:21
4

Fiz assim, me diga o que acha. Os comentários no código explicam o funcionamento.

// Remove pontos, vírgulas, espaços e marcadores de moeda.
function limpar(x) {
    return x.replace(",", "").replace(".", "").replace("R$", "").replace(" ", "");
}

// Recebe um número inteiro (valor em centavos) e devolve uma string com o
// seu valor formatado como se fosse um valor monetário em real.
function formatarMoeda(numero) {

    if (isNaN(numero)) return "Valor não preenchido corretamente";

    // Descobre se o valor é negativo e extrai o sinal.
    var negativo = numero < 0;
    numero = Math.abs(numero);

    // Usado para produzir a resposta, caractere por caractere.
    var resposta = "";

    // Converte o número para string.
    var t = numero + "";

    // Itera cada caractere do número, de trás para frente.
    for (var i = t.length - 1; i >= 0; i--) {
        var j = t.length - i;

        // Adiciona o caractere na resposta.
        resposta = t.charAt(i) + resposta;

        // Colocar uma vírgula ou um ponto se for o caso.
        if (j == 2) {
            resposta = "," + resposta;
        } else if (j % 3 == 2 && i != 0) {
            resposta = "." + resposta;
        }
    }

    // Preenche os zeros a esquerda para o caso de o valor ser muito pequeno (menos de um real).
    if (resposta.length < 4) {
        resposta = "0,00".substring(0, 4 - resposta.length) + resposta;
    }
 
    // Coloca o sinal de negativo, se necessário.
    if (negativo) resposta = "-" + resposta;

    // Coloca como prefixo a unidade da moeda.
    return "R$ " + resposta;
}

function somar() {
    // Obtém os dois valores digitados.
    var a = parseInt(limpar($("#campo1").val()), 10);
    var b = parseInt(limpar($("#campo2").val()), 10);

    // Executa a soma.
    var soma = a + b;

    // Formata o resultado como moeda.
    var resposta = formatarMoeda(soma);
    $("#resultado").html(resposta);
}

$(document).ready(function() {
    $("#executar").click(somar);
    testes();
});

// Teste de unidade para a função formatarMoeda.
function testes() {
    var testar = [0, -1, -100, 100, 99, 10, 9, 4567, 567, 12345678910, NaN, "banana", undefined, "", "-"];

    var resultados = "Testes:";
    for (var e in testar) {
        resultados += "<br>[" + testar[e] + "] -> [" + formatarMoeda(testar[e]) + "]";
    }

    $("#testes").html(resultados);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" id="campo1" value="R$ " />
    <input type="text" id="campo2" value="R$ " />
    <input type="button" id="executar" value="Somar" />
    <div>Resultado da soma: <span id="resultado"></span></div>
    <button name="reset" type="reset" class="btn btn-theme btn-lg">Limpar</button>
</form>

<div id="testes"></div>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .