2

Tenho a seguinte situação:

<span class="integral" id="precoVinho01">
   <span data-attr="Integer">100</span>
   <span data-attr="Decimal">,99</span>
</span>

Como faço para conseguir coletar apenas o 100,99?

Tentei das seguintes maneiras:

$('#precoVinho01').find("span").each(function(index) {
    var text = $(this).text();
    $(this).replaceWith(text);
 });
// Não funcionou, pois apagou o span inteiro, logo, perdeu a referencia data-attr para aparecer o número.

E tentei desta maneira também.

var price01 = $('#precoVinho01').html().replace(/[^\d]+/g,'').replace(',', '.');

// Não funcionou, pois o numero virou 10099, e quando tentei colocar toFixed para ter o decimal

var price01 = $('#precoVinho01').html().replace(/[^\d]+/g,'').toFixed(2).replace(',', '.');

//não funcionou

Agradeço a ajuda =)

2
  • É 10,99 ou é 100,99? 24/03/2020 às 15:49
  • 1
    100,99 * , ajustei :)
    – user96296
    24/03/2020 às 15:51

1 Resposta 1

2

Em vanilla javascript você pode utilizar a propriedade innerText do elemento <span>.

let span = document.getElementById("precoVinho01");
console.log(span.innerText.replace(/\s/g, ''))
<span class="integral" id="precoVinho01">
   <span data-attr="Integer">100</span>
   <span data-attr="Decimal">,99</span>
</span>

Com JQuery use o método text()

console.log($("#precoVinho01").text().replace(/\s/g, ''))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="integral" id="precoVinho01">
   <span data-attr="Integer">100</span>
   <span data-attr="Decimal">,99</span>
</span>

2
  • Funcionou muito... obrigado! Usei o método JQuery. Tem alguma explicação do porque que .text funcionou e .html não?
    – user96296
    24/03/2020 às 16:02
  • 1
    Porque a função text() é uma abstração sobre a propriedade innerText e segundo o manual innerText retorna o conteúdo do texto do elemento "como renderizado" e html() retorna o HTML do elemento. 24/03/2020 às 16:06

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