javascript - Split number by decimal and return back as 2 separate elements

Question

Here is a tricky task. I have price list as this :

<span class="price">10.99€/span>
<span class="price">1.99€/span>

I need to transform this into this

<span class="price">10<span class="decimal">.99</span></span>
<span class="price">1<span class="decimal">.99</span></span>

Here is how I approach this so far

$(".price").each(function() {
    var PriceArray = ($(".price").text());
    var re = /\s*€\s*/
    var PriceArraySplit = PriceArray.split(re) // I remove Euro sign
});

Further, as I understand, I need to split each number by decimal and store those in array and then replace values using new values from that array.

That's where my brain got overflowed.

Answer 1

试试看：

 $(".price").each(function(){
      var $this = $(this),
          PriceArray = $this.text().split('.');
      $this.html(PriceArray [0]+'<span class="decimal">.'+PriceArray [1].replace('€','')+'</span>');
    })

Answer 2

这是我想到的第 一种方式：

$("span.price").html(function(i,oldHtml) {
   return oldHtml.replace(/(\.\d+)€?/,'<span class="decimal">$1</span>');    
});

演示：http: //jsfiddle.net/tAHW3/1/

应该是合理的不言而喻的；如果没有，阅读一些 doco for .html()and.replace()和JS 正则表达式应该会有所帮助。

Answer 3

您可以像这样使用split()和replace()功能：

$(".price").each(function() {
    var s = $(this).text().split(".");
    $(this).html(s[0] + '<span class="decimal">.' +  s[1].replace('€','') + '</span>');
});

这是FIDDLE。