每三位数字加逗号

如何使用 jQuery 每隔三位数字使用逗号分隔符格式化数字？

例如:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
321803 次浏览
小开

你可以试试 数字格式化。

$(this).format({format:"#,###.00", locale:"us"});

它还支持不同的地区，当然包括美国。

下面是一个非常简单的例子:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.numberformatter.js"></script>
<script>
$(document).ready(function() {
$(".numbers").each(function() {
$(this).format({format:"#,###", locale:"us"});
});
});
</script>
</head>
<body>
<div class="numbers">1000</div>
<div class="numbers">2000000</div>
</body>
</html>

产出:

1,000
2,000,000
小开

您还可以查看 jquery 货币格式插件(我是该插件的作者) ; 它也支持多个语言环境，但是可能有不需要的货币支持开销。

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
小开

这不是 jQuery，但对我很有用。

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;
}
小开

如果您使用正则表达式，就会遇到类似这样的问题，不能确定替换 tho 的确切语法！

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
小开

@ Paul Creasey 有一个最简单的正则表达式解决方案，但这里是一个简单的 jQuery 插件:

$.fn.digits = function(){
return this.each(function(){
$(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
})
}

你可以这样使用它:

$("span.numbers").digits();
小开

一个更彻底的解决方案

其核心是 replace调用。到目前为止，我不认为任何建议的解决方案可以处理以下所有情况:

  • 整数: 1000 => '1,000'
  • 字符串: '1000' => '1,000'
  • 字符串:
    • 保留小数点后的零: 10000.00 => '10,000.00'
    • 丢弃小数前的前导零: '01000.00 => '1,000.00'
    • 不在小数点后添加逗号: '1000.00000' => '1,000.00000'
    • 保留前导 -或 +: '-1000.0000' => '-1,000.000'
    • 返回未修改的包含非数字的字符串: '1000k' => '1000k'

下面的函数执行上述所有操作。

addCommas = function(input){
// If the regex doesn't match, `replace` returns the string unmodified
return (input.toString()).replace(
// Each parentheses group (or 'capture') in this regex becomes an argument
// to the function; in this case, every argument after 'match'
/^([-+]?)(0?)(\d+)(.?)(\d+)$/g, function(match, sign, zeros, before, decimal, after) {


// Less obtrusive than adding 'reverse' method on all strings
var reverseString = function(string) { return string.split('').reverse().join(''); };


// Insert commas every three characters from the right
var insertCommas  = function(string) {


// Reverse, because it's easier to do things from the left
var reversed           = reverseString(string);


// Add commas every three characters
var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');


// Reverse again (back to normal)
return reverseString(reversedWithCommas);
};


// If there was no decimal, the last capture grabs the final digit, so
// we have to put it back together with the 'before' substring
return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
}
);
};

你可以像下面这样在 jQuery 插件中使用它:

$.fn.addCommas = function() {
$(this).each(function(){
$(this).text(addCommas($(this).text()));
});
};
小开

使用函数编号() ;

$(function() {


var price1 = 1000;
var price2 = 500000;
var price3 = 15245000;


$("span#s1").html(Number(price1).toLocaleString('en'));
$("span#s2").html(Number(price2).toLocaleString('en'));
$("span#s3").html(Number(price3).toLocaleString('en'));


console.log(Number(price).toLocaleString('en'));


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<span id="s1"></span><br />
<span id="s2"></span><br />
<span id="s3"></span><br />

小开

你可以使用 Number.toLocaleString():

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534

小开
最佳答案

2016年答案:

Javascript 有这个函数，所以不需要 Jquery。

yournumber.toLocaleString("en");
小开

这是我的 javascript，只在 firefox 和 chrome 上测试过

<html>
<header>
<script>
function addCommas(str){
return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


function test(){
var val = document.getElementById('test').value;
document.getElementById('test').value = addCommas(val);
}
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>
小开

非常简单的方法是使用 toLocaleString()函数

tot = Rs.1402598 //Result : Rs.1402598


tot.toLocaleString() //Result : Rs.1,402,598

更新: 23/01/2021

变量应采用数字格式。 示例: 

Number(tot).toLocaleString() //Result : Rs.1,402,598
小开 
function formatNumberCapture () {
$('#input_id').on('keyup', function () {
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});

你可以试试这个，对我很有效

小开

使用此代码只添加数字，并在 jquery 输入文本中的三位数字后面添加逗号:

$(".allow-numeric-addcomma").on("keypress  blur", function (e) {
return false;
});


$(".allow-numeric-addcomma").on("keyup", function (e) {


var charCode = (e.which) ? e.which : e.keyCode
if (String.fromCharCode(charCode).match(/[^0-9]/g))
return false;


value = $(this).val().replace(/,/g, '') + e.key;
var nStr = value + '';
nStr = nStr.replace(/\,/g, "");
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');
}


$(this).val(x1 + x2);
return false;
});
小开

这个代码对我有用

 function checkPrice() {
$('input.digits').keyup(function (event) {
// skip for arrow keys
if (event.which >= 37 && event.which <= 40) {
event.preventDefault();
}
var $this = $(this);
var num = $this.val().replace(/,/g, '');
// the following line has been simplified. Revision history contains original.
$this.val(num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));
});
}

你的文本盒样本

<input type="text" name="price" id="price" class="form-control digits" onkeyup="checkPrice()"  >

提交答案