jQuery价格格式化问题：多逗号价格的小数部分样式修正

问题描述 #

原有代码处理带千分位的价格（如2,948,11）时，仅第一个数字显示为大字体，千分位部分和小数部分均显示为小字体，不符合需求。需要调整代码，让仅最后一个逗号后的小数部分显示为小字体，包含千分位的整数部分全部显示为大字体。

修改后的代码 #

JavaScript 代码

$.each($('.price-lbl-cust'), function() {
    var price = $(this).html();
    $(this).html(price.replace(/(\D*)(.*)(\,)(\d*)/,
        '<span style="font-size:16px;font-weight:600;">$1</span><span style="font-size: 1.675rem;line-height: 1.5rem;font-weight:600;">$2$3</span><span style="font-size: .92222em;font-weight:600;">$4</span>'
    ));
});

HTML 示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-lbl-cust">144,40</div>
<div class="price-lbl-cust">2,948,11</div>
<div class="price-lbl-cust">€987,654,32</div>

代码说明 #

1. 正则表达式调整：
   原正则/(\D*)(\d*\,)(\d*)/仅匹配第一个数字序列加逗号，无法适配千分位格式。修改后的/(\D*)(.*)(\,)(\d*)/通过贪婪匹配.*捕获最后一个逗号之前的所有内容（包括千分位逗号），将价格拆分为4个分组：

   • $1：非数字前缀（如货币符号€）
   • $2：包含千分位的整数部分（如2,948）
   • $3：最后一个逗号
   • $4：小数部分（如11）

2. 替换模板优化：
   将$2（整数部分）和$3（最后一个逗号）合并放入大字体span，确保整个整数部分（含千分位）统一显示大字体，仅$4（小数部分）使用小字体。

内容的提问来源于stack exchange，提问作者Sylwester Zabielski