通过添加html标签重新格式化文本

Question

我在一个电子商务网站工作，我有一个问题格式化价格在它的设计方式。

它是这样显示价格的:

 <p class="price">£900.00</p>

我需要得到所有的价格显示在网站(类价格)，并以这种方式重新格式化:

<p class="price"><span>£</span> 900 <span>.00<span></p>

之后我可以给小数点和

添加特定的css样式

你有什么好主意吗?

顺便说一句，我需要通过JS/jquery来做，因为我是在后端做的，它会产生一些冲突，所以需要在客户端完成

Thanks in advance

Answer 1

下面的代码适用于所有类型的货币符号。这是工作小提琴

$('.price').each(function (idx, val) {
    var price = $(this).text();
    var newOne = price.match(/^(.)(d+).(d+)$/);
    $(this).html("<span>" + newOne[1] + "</span>" + newOne[2] + ".<span>" + newOne[3] + "</span>");
});

Answer 2

没有必要在前端这样做，因为它会更好地指向我们的后端"冲突"，尽管如此:

$(function(){
  var $el, price;
  $('.price').each(function(item){
    $el = $(this);
    price = $el.text().substr(1);
    $el.empty().append(
      $("<span></span>", { class : "currency", text: "£"})
    ).append( price.split('.')[0])
    .append(
      $("<span></span>", { class : "decimals", text: "." + price.split('.')[1]})    
    );
  });
});

工作小提琴。

Answer 3

DEMO

这将适用于字符串:£900.00, £900000.00123, $560125.14500和你知道剩下的…

var val = '£900.00';
var currSign = val.charAt(0);

currSign将是£

var amount = val.substring(1);

amount将成为900.00

 var left = amount.split('.')[0];
 var right = "."+amount.split('.')[1];

left将会是900right将是.00

随你怎么用

<p class="price"><span>$currSign</span> $left <span>$right<span></p>

Answer 4

$("p.price").each(function() {
    var oldprice = $(this).text();
    var split = oldprice.match(/^£(d+)(.d+)$/);
    if (split) {
       $(this).html('<span>£</span> ' + split[1] + ' <span>'+split[2]+'</span>');
    }
});

Answer 5

$('.price').each(function() {
    $(this).html($(this).text().replace(/(£)(d+)(.dd)/, '<span>$1</span> $2 <span>$3</span>');
});

Answer 6

我建议:

$('.price').html(function(i,h){
    return h.replace(/([£$])(d+)(.d{2})/,'<span>$1</span><span>$2</span><span>$3</span>');
});

JS Fiddle demo.

• ([£$])捕获£或$的货币字符，
• (d+)捕获一个或多个数字字符，
• (.d{2})捕获一个句号和后面两个数字。

$1, $2和$3依次引用这些匹配项。

和样式这些(即使没有显式的类名):

p span {
    color: #000;
}
p span:first-child {
    color: #999;
}
span:first-child + span {
    font-weight: bold;
}
span:last-child {
    font-size: 80%;
}

JS Fiddle demo.

引用:

• html() .
• JavaScript正则表达式(MDN).