如何为jQuery增量计数器添加千位分隔逗号？

我使用这款jQuery增量计数器插件，希望给计数器添加千位分隔逗号，位置参考上图。

修改方案 #

要实现这个效果，需要修改插件的核心逻辑，让它能处理带千位分隔符的数字，并在DOM中渲染逗号元素。以下是修改后的完整代码：

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="incremental-counter" data-value="1348257"></div>

<script>
/*
 Plugin Name: jQuery plugin incremental counter
 修改：添加千位分隔符支持
 */

(function($){
    $.fn.incrementalCounter = function(options){
        //default options
        var defauts = {
                "digits": 4,
                "thousandSeparator": "," // 添加千位分隔符配置
            },
            pad = function(n, width, z) {
                z = z || '0';
                n = n + '';
                return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            },
            // 新增：格式化数字为带千位分隔符的字符串
            formatNumber = function(num, separator) {
                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
            },
            start = function(element){

                var current_value = parseInt($(element).data('current_value')),
                    end_value = parseInt($(element).data('end_value')),
                    current_speed = 20;

                if(end_value === 0) {
                    return false;
                }

                if (end_value - current_value < 5){
                    current_speed = 200;
                    current_value += 1;
                } else if(end_value - current_value < 15){
                    current_speed = 50;
                    current_value += 1
                } else if(end_value - current_value < 50){
                    current_speed = 25;
                    current_value += 3
                } else{
                    current_speed = 25;
                    current_value += parseInt((end_value - current_value)/24)
                }

                $(element).data({
                    current_value:current_value
                });

                if(current_speed){
                    setTimeout(function(){
                        display($(element),current_value);
                    },current_speed);
                }else{
                    display($(element),current_value);
                }
            },
            display = function(element,value){
                var separator = $(element).data('separator'),
                    // 格式化当前值，添加千位分隔符
                    formattedNumber = formatNumber(value, separator),
                    exp = formattedNumber.split(""),
                    end_value = $(element).data('end_value'),
                    container = $(element);
                
                // 清空容器，重新渲染元素
                container.empty();
                $(exp).each(function(i,e){
                    if(e === separator){
                        // 渲染逗号元素
                        container.append('<div class="num separator">' + e + '</div>');
                    }else{
                        // 渲染数字元素
                        container.append('<div class="num">' + e + '</div>');
                    }
                });

                if(end_value != value){
                    start(element);
                }
            },
            //merge options
            options = $.extend(defauts, options);

        this.each(function(index, element){

            var default_digits = options.digits ,
                digits =  element.getAttribute('data-digits') ?  element.getAttribute('data-digits') : default_digits ,
                end_value = parseInt( element.getAttribute('data-value')),
                separator = options.thousandSeparator;

            digits = digits === 'auto' || digits < String(end_value).length ? String(end_value).length : digits;

            //get value
            $(element).data({
                current_value : 0,
                end_value : end_value,
                digits : digits,
                current_speed : 0,
                separator: separator
            });

            // 初始化时直接调用display渲染初始值
            display($(element), 0);
            start($(element));

        });
        return this;
    };
})(jQuery);

$(".incremental-counter").incrementalCounter();
</script>

CSS部分

.incremental-counter .num {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #00aae6;
    display: inline-block;
    height: 64px;
    line-height: 62px;
    margin: 0 4.5px;
    position: relative;
    text-align: center;
    top: -1px;
    width: 50px;
    font-size: 45px;
    font-size: 3.72625em;
    font-weight: 700;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
     background: #00aae6;
     content: "";
     display: block;
     height: 1px;
     left: -1px;
     margin: -0.5px 0 0;
     position: absolute;
     right: -1px;
     top: 50%;
     width: auto;
}
/* 给逗号添加专属样式，可根据需求调整 */
.incremental-counter .num.separator {
    background: transparent;
    border: none;
    box-shadow: none;
    width: auto;
    margin: 0 2px;
}

关键修改说明 #

1. 新增数字格式化函数：formatNumber使用正则表达式给数字添加千位分隔符
2. 修改渲染逻辑：display函数不再复用原有.num元素，而是每次清空容器后重新渲染数字和逗号元素
3. 添加配置项：新增thousandSeparator参数，默认值为逗号，支持自定义分隔符
4. 调整逗号样式：给逗号元素添加separator类，移除背景、边框和阴影，让它和数字的排版更协调

内容的提问来源于stack exchange，提问作者Sirichai Pipitsuntonsan