我在一个电子商务网站上工作，但在按设计方式格式化价格时遇到了问题。
它以这种方式显示价格：
<p class="price">£900.00</p>
我需要获取网站中显示的所有价格（课程价格）并以这种方式重新格式化：
<p class="price"><span>£</span> 900 <span>.00<span></p>
所以在我可以将特定的css样式添加到小数和£符号之后
你有什么想法吗？
顺便说一句，我需要通过 JS / jquery 来完成，因为我是在后端完成的，而且它产生了一些冲突，所以需要在客户端完成
提前致谢
以下适用于各种货币符号。这是工作小提琴。
$('.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>");
});
在前端没有必要这样做，因为最好用后端“冲突”来指出我们，但是：
$(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]})
);
});
});
这适用于 : £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将是900
right将是.00
随心所欲地使用它。
<p class="price"><span>$currSign</span> $left <span>$right<span></p>
$("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>');
}
});
$('.price').each(function() {
$(this).html($(this).text().replace(/(£)(\d+)(\.\d\d)/, '<span>$1</span> $2 <span>$3</span>');
});
我建议：
$('.price').html(function(i,h){
return h.replace(/([£$])(\d+)(.\d{2})/,'<span>$1</span><span>$2</span><span>$3</span>');
});
([£$])捕获一个货币字符，要么是£要么$，(\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%;
}
参考：