0

Tenho um formulário onde traz do BD e inclui no value de um campo text o valor monetário e com o PHP (number_format) crio a máscara abaixo para visualização do usuário:

R$ 12.000,00

<input type="text" id="valorTotal" class="form-control" value="<?php echo number_format($valorTotal,2,',','.'); ?>" onchange="calcular()">

Mas estou usando Javascript para cálculos e esse campo será usado. Como eu faria para retirar essa máscara com Javascript fazendo ficar dessa forma:

12000.00

Ou sem milhar:

565.00

Enquanto faz o cálculo e na hora da apresentação em outro campo os resultados, voltem a ficar a com a máscara:

<input type="text" name="ValorFinal" id="valorFinal" class="form-control" onchange="calcular()" required="required" readonly>

<script>
.....
document.getElementById('valorFinal').value = parseFloat(Math.abs(valorPP));
...
</script>

3 Respostas 3

4

Você pode usar expressão regular com o "replace":

var value = "R$ 12.000,00";
var clean = value.replace(/[^0-9,]*/g, '').replace(',', '.');
alert(clean);

No código acima, o resultado será uma string "12000.00" Se precisar formatar o número para um tipo numérico decimal, por exemplo, faça o seguinte:

var value = "R$ 12.000,50";
var clean = parseFloat(value.replace(/[^0-9,]*/g, '').replace(',', '.')).toFixed(2);
alert(clean);

Em ambos os casos, o segredo se encontra na expressão /[^0-9,]*/g. onde:

  1. /.../g: diz para o javascript substituir todas as incidências encontradas (g).
  2. [^0-9,]*: manda remover tudo o que "não for numérico" e "não for virgula" (^);
  3. Por fim, o segundo "replace" substitui a virgula por ponto.

Já no segundo caso, o "parseFloat" converte a string para um valor flutuante e o método "toFixed(2)" declara que deverão haver 2 casas decimais após o ponto.

Caso seja necessário voltar a máscara, faça assim:

var clean = 1250.50;

var masked = "R$ " + parseFloat(clean).toFixed(2)
   .replace('.',',')
   .replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');
   
alert(masked);

Explicando:

  1. parseFloat(clean).toFixed(2): instancia o número flutuante;
  2. .replace('.', ','): substitui o ponto pela vírgula;
  3. .replace(/([0-9]*)([0-9]{3})/, '$1.$2'): insere o ponto no milhar

Explicando a expressão regular "/([0-9]*)([0-9]{3})/":

  1. ([0-9]*): a sentença deve começar com qualquer quantidade dígitos. O parêntesis armazena o valor encontrado, ou seja, "1";
  2. ([0-9]{3},*): a sentença deve terminar com 3 dígitos, seguindo por uma virgula e quaisquer caracteres posteriores. O parêntesis armazena o valor encontrado, ou seja, "250,50";
  3. '$1.$2': cria uma string contendo o valor armazenado pelos dois parêntesis e concatena-os com um ponto ".". Ou seja, R$ 1.250,50.
4
  • Olá Ricardo. Certo. Usei seu código e funcionou, mas como eu faria para que na visualização do valor total, volte a ficar com a máscara? Tentei esse fazer dessa forma, mas não funcionou. Veja: retorno = "R$ " + valorT.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
    – user24136
    30/04/2019 às 18:55
  • Fiz dessa forma, mas está me retornando dessa forma: 1250,00 e não 1.250,00. valorFinal = "R$ " + parseFloat(valorT).toFixed(2).replace('.',',');
    – user24136
    30/04/2019 às 20:31
  • 1
    A resposta foi reformulada com a solução. 30/04/2019 às 21:04
  • Perfeito Ricardo. Funcionou!! Muito obrigado!
    – user24136
    30/04/2019 às 21:09
2

Se os valores sempre vierem nesses formatos:

R$ 12.000.000,00
R$ 12.000,00
R$ 12,00

Você pode criar uma função que faça o seguinte:

  • Remova o R$ que precede todos os valores;
  • Remover todos os pontos (.) (que separam a casa dos milhares);
  • Substituir a vírgula (,) por um ponto (,) (para que o parseFloat funcione propriamente);
  • Fixar o número da casa decimal em dois (para isso, usaremos o Number.prototype.toFixed).

Assim:

function numberify(value) {
  return parseFloat(
    value
      .trim()
      .replace(/^R\$ +/, '')
      .replace(/\./g, '')
      .replace(/,/, '.')
  ).toFixed(2)
}

console.log(numberify('R$ 12.000.000,50'))
console.log(numberify('R$ 12.000,00'))
console.log(numberify('R$ 12,25'))


Nota: Você pode reduzir o número de usos do replace de três para dois. Usei um a mais que o necessário para ficar um pouco mais "entendível". :)

function numberify(value) {
  return parseFloat(
    value
      .trim()
      .replace(/^R\$ +|\./g, '')
      .replace(/,/, '.')
  ).toFixed(2)
}

console.log(numberify('R$ 12.000.000,50'))
console.log(numberify('R$ 12.000,00'))
console.log(numberify('R$ 12,25'))

-1

var value = "R$ 12.000,00";
var clean = value?.replace(/[^\d|,|.]+/g,'');
alert(clean);

se não precisar do separador de milhar

var value = "R$ 12.000,00";
var clean = value?.replace(/[^\d|,]+/g,'');
alert(clean);

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    2/03/2022 às 19:25

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