使用js格式化数字样式样式

Question

I want format a number price after comma, with an smaller font:

For example, I have this span:

<span class="price">9,95€</span>

I need replace with something like:

<span class="price">9,<span class="small-price">95€</span></span>

How can I do it with javascript, php, or css?

Answer 1

Please find below snippet we can do this using regex .

 $.each($('.price'), function() { var price = $(this).html(); $(this).html(price.replace(/(\\d*\\,)(\\d*)(\\D*)/, '<span style="font-size:22px;">$1</span><span style="font-size:16px;">$2</span><span style="font-size:14px;">$3</span>')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='price'>270,30€</div> 

Answer 2

Try this:

 var prices = document.getElementsByClassName('price'); for (var i = 0; i < prices.length; i++) { var priceEl = prices[i]; var price = priceEl.innerHTML; var priceParts = price.split(','); var smallPriceValue = priceParts[1]; if (smallPriceValue) { var span = document.createElement('span'); span.className = "small-price"; span.innerHTML = smallPriceValue; priceEl.innerHTML = priceParts[0]+ ","; priceEl.appendChild(span); } } 

 .price { font-size: 18px; } .small-price { font-size: 12px; } 

 <span class="price">9,95€</span><br> <span class="price">12,85€</span> 

Answer 3

You could use document.getElementsByClassName and change the element with plain Javascript.

 [].forEach.call(document.getElementsByClassName('price'), function (a) { a.innerHTML = a.innerHTML.replace(/(\\d\\d€)/, '<span class="small-price">$1</span>'); }); 

 .price { font-size: 36px; } .small-price { font-size: 24px; } 

 <span class="price">9,95€</span><br> <span class="price">0,01€</span> 

Answer 4

You can do this in CSS, not that difficult

 .small-price { font-size: 7pt; } 

 5,<font class="small-price">95</font>