在jQuery中将逗号添加到数字答案

【问题标题】：add commas to a number in jQuery在jQuery中将逗号添加到数字
【发布时间】：2011-04-22 10:50:52
【问题描述】：

我有这些号码

10999 和 8094 和 456

如果需要的话，我要做的就是在正确的位置添加一个逗号，这样它看起来像这样

10,999 和 8,094 和 456

这些都在像 <p class="points">10999</p> 这样的 p 标签内。

可以吗？

我在其他帖子 http://jsfiddle.net/pdWTU/1/ 的帮助下在这里尝试过，但似乎无法正常工作

谢谢

杰米

更新

搞砸了一点，并设法在这里解决了http://jsfiddle.net/W5jwY/1/

打算看看新的全球化插件，以获得更好的方法

谢谢

杰米

【问题讨论】：

相关问题在这里：stackoverflow.com/questions/2901102/…
+1 为您的小提琴。您应该在更新中包含您的解决方案：<number string>.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
我希望我能为您的解决方案 +100：正则表达式说不是单词边界，然后是前面的 3 位数字可能重复，后面跟着一个数字。太棒了！
这个解决方案在大多数情况下是最好的，但对我来说并不是很有效。不幸的是，我需要显示 4 位，有时是 5 位小数的数字。我为之工作的人处理高交易量和一分钱的零头加起来高达 100 美元或 1000 美元（想想办公空间）。我只是在你的小提琴上打了一些代码，让它处理超过 3 位的小数位：http://jsfiddle.net/W5jwY/554/
这个问题的真正答案在这里：stackoverflow.com/a/2632502/1860982

标签： javascript jquery formatting numbers

【解决方案1】：

适用于所有浏览器，这就是您所需要的。

  function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
  }

感谢正则表达式，将其写得简洁明了。这是直接的 JS，但你可以像这样在 jQuery 中使用它：

$('#elementID').html(commaSeparateNumber(1234567890));

或

$('#inputID').val(commaSeparateNumber(1234567890));

但是，如果您需要更清洁、更灵活的东西。下面的代码将正确修复小数，删除前导零，并且可以无限使用。感谢 cmets 中的@baacke。

  function commaSeparateNumber(val){
   val = val.toString().replace(/,/g, ''); //remove existing commas first
   var valRZ = val.replace(/^0+/, ''); //remove leading zeros, optional
   var valSplit = valRZ.split('.'); //then separate decimals
    
   while (/(\d+)(\d{3})/.test(valSplit[0].toString())){
    valSplit[0] = valSplit[0].toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
   }

   if(valSplit.length == 2){ //if there were decimals
    val = valSplit[0] + "." + valSplit[1]; //add decimals back
   }else{
    val = valSplit[0]; }

   return val;
  }

在你的 jQuery 中，像这样使用：

$('.your-element').each(function(){
  $(this).html(commaSeparateNumber($(this).html()));
});

这是jsFiddle。

【讨论】：

user1655655 的回答要好得多
这个答案有两个问题： 1. 使用相同的值多次调用函数会导致逗号出现在错误的位置（例如，keyup 事件）。 2. 该函数不能正确处理小数，会在小数内添加逗号。请参阅此JSFiddle 以获取修复两者的修改版本。
@baacke 这个函数的想法是苗条，所以我没有考虑在同一个 var 或小数上调用它两次（因为它不在问题中）。无论哪种方式，您的小提琴示例对于您需要小数的情况很有用，所以谢谢。
逗号或句点出现的位置由语言环境决定。 JS 标准库已经可以为您做到这一点。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

Number(10000).toLocaleString('en');  // "10,000"

【讨论】：

这是最简单的解决方案，非常适合我。谢谢！
感谢您的提示，这比编写自定义函数或包含插件要好得多。对我来说回答 #1！
这很棒，适用于大多数桌面浏览器，但要注意它目前在移动浏览器中的支持有限...developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
对于任何希望将其与 Node.js 一起使用的人，除非您重新编译 v8 引擎以包含 i18n，否则它将无法工作：stackoverflow.com/questions/23571043/…
这在浏览器之间不一致，在 iPad 上根本不起作用。

【解决方案3】：

Timothy Pirez 的回答非常正确，但是如果您需要在用户在文本字段中输入时立即用逗号替换数字，您可能想要使用 Keyup 功能。

      $('#textfield').live('keyup', function (event) {
        var value=$('#textfield').val();

      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var newvalue=value.replace(/,/g, '');   
      var valuewithcomma=Number(newvalue).toLocaleString('en');   
      $('#textfield').val(valuewithcomma); 

      });

    <form><input type="text" id="textfield" ></form>

【讨论】：

【解决方案4】：

看看微软最近发布的 Globalization plugin 到 jQuery

【讨论】：

【解决方案5】：

看看Numeral.js。它可以格式化数字、货币、百分比，并支持本地化。

【讨论】：

【解决方案6】：

    function delimitNumbers(str) {
      return (str + "").replace(/\b(\d+)((\.\d+)*)\b/g, function(a, b, c) {
        return (b.charAt(0) > 0 && !(c || ".").lastIndexOf(".") ? b.replace(/(\d)(?=(\d{3})+$)/g, "$1,") : b) + c;
      });
    }

    alert(delimitNumbers(1234567890));

【讨论】：

【解决方案7】：

我猜你正在做某种本地化，所以看看this script。

【讨论】：

【解决方案8】：

使用 toLocaleString 参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

function formatComma(value, sep = 0) {
      return Number(value).toLocaleString("ja-JP", { style: "currency", currency: "JPY", minimumFractionDigits: sep });
    }
console.log(formatComma(123456789, 2)); // ￥123,456,789.00
console.log(formatComma(123456789, 0)); // ￥123,456,789
console.log(formatComma(1234, 0)); // ￥1,234

【讨论】：

【解决方案9】：

另一种方法：

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
var a  = addCommas(10000.00);
alert(a);

另一个惊人的插件： http://www.teamdf.com/web/jquery-number-format/178/

【讨论】：

【解决方案10】：

另一种方法：

function addCommas(n){
  var s = "",
      r;

  while (n) {
    r = n % 1000;
    s = r + s;
    n = (n - r)/1000;
    s = (n ? "," : "") + s;
  }

  return s;
}

alert(addCommas(12345678));

【讨论】：

【解决方案11】：

这是我在 @Timothy Perez 的评论中提供的 @baacke 小提琴的咖啡脚本版本

class Helpers
    @intComma: (number) ->
        # remove any existing commas
        comma = /,/g
        val = number.toString().replace comma, ''

        # separate the decimals
        valSplit = val.split '.'

        integer = valSplit[0].toString()
        expression = /(\d+)(\d{3})/
        while expression.test(integer)
            withComma = "$1,$2"
            integer = integer.toString().replace expression, withComma

        # recombine with decimals if any
        val = integer
        if valSplit.length == 2
            val = "#{val}.#{valSplit[1]}"

        return val

【讨论】：