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

Question

我希望格式化逗号后面的数字，字体更小：

例如，我有这个范围：

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

我需要替换为：

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

如何使用javascript，php或css进行操作？

Answer 1

请使用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

试试这个：

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用document.getElementsByClassName并使用普通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

您可以在CSS中执行此操作，而不是那么困难

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;