How to delete non-numeric characters, which were added by Mask?

Question

Whoa, what’s up, man? I am doing a project where I need to show the result of a calculation on time, in the same form,.
The problem is that when I started using 'masks' with Jquery, to facilitate user typing, calculations now include percentage and monetary symbols, for example, and result value Nan.
Could someone help me by showing how I can handle this typed data by ignoring the symbols and filtering them (but also maintaining decimal places), so that only the numbers are calculated and the masks continue only to facilitate understanding when filling in the form? Thank you in advance.

Here are some details:
Form where the values to be calculated are entered:
Data are displayed in span.

<form>
    <label>Custo 1:</label>
    <input type="text" id="custo1" onkeyup="calcular();">

    <label>IPI:</label>
    <input type="text" id="perc_ipi" onkeyup="calcular();">

    <label>ST:</label>
    <input type="text" id="perc_st" onkeyup="calcular();">

    <label>Outros:</label>
    <input type="text" id="perc_outros" onkeyup="calcular();">

    <label>Frete:</label>
    <input type="text" id="perc_frete" onkeyup="calcular();">

    <label>FCPST:</label>
    <input type="text" id="perc_fcpst" onkeyup="calcular();">

    <label>STUF:</label>
    <input type="text" id="perc_stuf" onkeyup="calcular();">

    <label>Desconto:</label>
    <input type="text" id="perc_desc" onkeyup="calcular();">

    <label>Custo 2:</label>


    <span type="text" id="custo2"></span>
</form> 

Function that makes the calculations:

function calcular() {           
        var custo1 = Number(document.getElementById('custo1').value);
        var calcIPI1 = Number(document.getElementById('perc_ipi').value);
        var calcST1 = Number(document.getElementById('perc_st').value);
        var calcOutros1 = Number(document.getElementById('perc_outros').value);
        var calcFrete1 = Number(document.getElementById('perc_frete').value);
        var calcFCPST1 = Number(document.getElementById('perc_fcpst').value);
        var calcSTUF1 = Number(document.getElementById('perc_stuf').value);
        var calcDesconto1 = Number(document.getElementById('perc_desc').value);
        var elemResult = document.getElementById("custo2");


        //Fórmulas das percentagens
        calcIPI2 = custo1 * calcIPI1 / 100 + custo1;
        calcST2 = custo1 * calcST1 / 100;
        calcOutros2 = custo1 * calcOutros1 / 100;
        calcFrete2 = custo1 * calcFrete1 / 100;
        calcFCPST2 = custo1 * calcFCPST1 / 100;
        calcSTUF2 = custo1 * calcSTUF1 / 100;

        //Gerando o custo 2.
        custo2 = calcIPI2 + calcST2 + calcOutros2 + calcFrete2 + calcFCPST2 + calcSTUF2;

        custo2 = custo2 - custo1 * calcDesconto1 / 100;

        elemResult.innerText = String(custo2);

}

I believe it’s unnecessary to put the masks here, but in case:

//JQuery Maskmoney
        $(function() {
          $('#custo1').maskMoney({ prefix: 'R$  ', reverse: 'false', decimal: ',', thousands: '.', precision: 2 });
        })

        $(function() {
          $('#venda').maskMoney({ prefix: 'R$  ', reverse: 'false', decimal: ',', thousands: '.', precision: 2 });
        })

        //JQuery Mask

        $('#perc_ipi').mask('##0,00%', {reverse: true});

        $("#perc_frete").mask('##0,00%', {reverse: true});

        $("#perc_outros").mask('##0,00%', {reverse: true});

        $("#perc_st").mask('##0,00%', {reverse: true});

        $("#perc_fcpst").mask('##0,00%', {reverse: true});

        $("#perc_stuf").mask('##0,00%', {reverse: true});

        $("#perc_desc").mask('##0,00%', {reverse: true});

        $("#custo2").mask("999.999.990,00", {reverse: true});

        $("#venda").mask("999.999.990,00", {reverse: true});   

Answer 1

Is resulting NaN why are you using Number() in fields where the mask is adding non-numeric characters, such as R$, space and %.

You can create a function that removes what does not matter for the calculations (anything that is not a number, except the decimal point, which will be replaced by a dot).

function somenteNumero(n){
   n = n.replace(/[^\d,]/g,'') // retira tudo que não for número, exceto a vírgula
   .replace(",", '.'); // substitui a vírgula por ponto
   return +n; // retorna em formato de número
}

And you can still use .toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}); in the result to format the result value in Real.

See the result:

function somenteNumero(n){
n = n.replace(/[^\d,]/g,'')
.replace(",", '.');
return +n;
}

function calcular() {           
     var custo1 = somenteNumero(document.getElementById('custo1').value);
     var calcIPI1 = somenteNumero(document.getElementById('perc_ipi').value);
     var calcST1 = somenteNumero(document.getElementById('perc_st').value);
     var calcOutros1 = somenteNumero(document.getElementById('perc_outros').value);
     var calcFrete1 = somenteNumero(document.getElementById('perc_frete').value);
     var calcFCPST1 = somenteNumero(document.getElementById('perc_fcpst').value);
     var calcSTUF1 = somenteNumero(document.getElementById('perc_stuf').value);
     var calcDesconto1 = somenteNumero(document.getElementById('perc_desc').value);
     var elemResult = document.getElementById("custo2");


     //Fórmulas das percentagens
     calcIPI2 = custo1 * calcIPI1 / 100 + custo1;
     calcST2 = custo1 * calcST1 / 100;
     calcOutros2 = custo1 * calcOutros1 / 100;
     calcFrete2 = custo1 * calcFrete1 / 100;
     calcFCPST2 = custo1 * calcFCPST1 / 100;
     calcSTUF2 = custo1 * calcSTUF1 / 100;

     //Gerando o custo 2.
     custo2 = calcIPI2 + calcST2 + calcOutros2 + calcFrete2 + calcFCPST2 + calcSTUF2;

     custo2 = custo2 - custo1 * calcDesconto1 / 100;

     elemResult.innerText = custo2.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"});

}

//JQuery Maskmoney
     $(function() {
       $('#custo1').maskMoney({ prefix: 'R$  ', reverse: 'false', decimal: ',', thousands: '.', precision: 2 });
     })

     $(function() {
       $('#venda').maskMoney({ prefix: 'R$  ', reverse: 'false', decimal: ',', thousands: '.', precision: 2 });
     })

     //JQuery Mask

     $('#perc_ipi').mask('##0,00%', {reverse: true});

     $("#perc_frete").mask('##0,00%', {reverse: true});

     $("#perc_outros").mask('##0,00%', {reverse: true});

     $("#perc_st").mask('##0,00%', {reverse: true});

     $("#perc_fcpst").mask('##0,00%', {reverse: true});

     $("#perc_stuf").mask('##0,00%', {reverse: true});

     $("#perc_desc").mask('##0,00%', {reverse: true});

     $("#custo2").mask("999.999.990,00", {reverse: true});

     $("#venda").mask("999.999.990,00", {reverse: true});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.12/jquery.mask.min.js"></script>
<form>
<label>Custo 1:</label>
<input type="text" id="custo1" onkeyup="calcular();">

<label>IPI:</label>
<input type="text" id="perc_ipi" onkeyup="calcular();">

<label>ST:</label>
<input type="text" id="perc_st" onkeyup="calcular();">

<label>Outros:</label>
<input type="text" id="perc_outros" onkeyup="calcular();">

<label>Frete:</label>
<input type="text" id="perc_frete" onkeyup="calcular();">

<label>FCPST:</label>
<input type="text" id="perc_fcpst" onkeyup="calcular();">

<label>STUF:</label>
<input type="text" id="perc_stuf" onkeyup="calcular();">

<label>Desconto:</label>
<input type="text" id="perc_desc" onkeyup="calcular();">

<label>Custo 2:</label>
</form>

<span type="text" id="custo2"></span>