Добавьте запятую к номерам каждые три цифры

160

Как я могу отформатировать числа, используя разделитель запятой каждые три цифры, используя jQuery?

Например:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝

jquery number-formatting

— Стив
источник

Я новичок в jQuery и хотел бы простую функцию / плагин, который просто добавляет запятую после каждых трех цифр, если числа более трех цифр. Только положительные числа, без дробей, без десятичных знаков, без учета валюты и стандартного формата США (1 111) нет (1 111 долл. США или 1 111 долл. США). Я бы предпочел использовать jQuery, а не просто javascript, если это возможно, и было бы неплохо установить кодовый набор для функции, чтобы его можно было очень легко применять. Как мне это сделать? Цените вклад каждого. Еще раз спасибо.

— Стив

2

@unknown: у вас уже есть много ответов. Посмотрите на ответы, которые вы получили, и оцените их, чтобы увидеть, что лучше для вас. Если вам нужно больше разъяснений по одному из ответов, опубликуйте его как комментарий к этому ответу.

— Марк Байерс

1

Извините, мой вопрос не был достаточно кратким, но посмотрите формат плагина Дуга Нейнера, используя для ответа код Пола Криси.

— Стив

241

У @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();

— Дуг Нейнер
источник

4

Работает отлично! Спасибо Полу Криси за простой, элегантный код, а также Дугу Нейнеру за перевод его в формат плагина. Кредит предоставляется обоим.

— Стив

4

RC @Mark Byers Синтаксис правильный. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,"), тем не менее, возвращает "999,9,999".

— Bendewey

6

Сделан небольшой мод для полей ввода:

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

— mpemburn

3

Я думаю, что это лучше подходит для функции стиля утилит с пространством имен jQuery, например $.digits = function() { ... };.

— Алекс

63

Самый быстрый способnumber.toLocaleString("en");

— Дерек 功夫會功夫

95

Вы можете использовать Number.toLocaleString():

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

Развернуть фрагмент

— Abhijeet
источник

Я пробую это, но не работаю на живом сервере, а работаю на локальном хосте ..

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp во всех браузерах

— Рикс

Это сработало для меня проще всего. Мне нужна валюта и запятые. Мне также удалось установить свойства:

var n = 26787.89 var myObjCurrency = {   style: "currency",   currency: "USD",   currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));

— AWP

78

Примерно так, если вы в регулярном выражении, не уверены в точном синтаксисе для замены tho!

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

— Пол Криси
источник

2

Синтаксис правильный. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,"), тем не менее, возвращает "999,9,999".

— Марк Байерс

@ Неизвестно, я переместил его в ответ. Ниже на этой странице пример использования.

— Даг Нейнер

27

Вы можете попробовать NumberFormatter .

$(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

— Марк Байерс
источник

Я взглянул на этот плагин и из описания автора, он предназначался для использования в полях ввода формы. Как я могу принять его для применения к <span class = "numbers"> 2984 </ span>, чтобы оно форматировалось в <span class = "numbers"> 2,984 </ span> без десятичных знаков. Я пробовал $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); но ничего не случилось. Еще изучаю плагин, поиграюсь с ним. Извините, я новичок в jQuery :-)

— Стив

+1 Приятно знать об этом плагине. Я согласен с тем, что для роста и будущей интернационализации это будет наилучший путь.

— Даг Нейнер

Вот ссылка на репозиторий GitHub. github.com/hardhub/jquery-numberformatter

— Мванги Тига

22

Это не 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;
}

— луч
источник

1

Очень "корни" из вас :)

— MonoThreaded

Это может быть "рути", но я не думаю, что другие модные подходы сработали бы в моей ситуации, когда данные встроены в Canvas (Chart.JS). Но добавление этой функции и вызов ее в событии afterDraw () диаграммы работает отлично: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

Это не работает, например, 3000000 (7 цифр). только для 6 и менее цифр!

— Мостафа Норзаде

21

Используйте функцию Number ();

$(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 />

Развернуть фрагмент

— bamossza
источник

Спасибо, я использовал твой ответ. Возможно, стоит отметить, что это поддерживает только числа длиной до 15 цифр.

— Талль Пол

21

2016 Ответ:

Javascript имеет эту функцию, поэтому нет необходимости в Jquery.

yournumber.toLocaleString("en");

— Камы Д
источник

2

Будет ли это работать во всех браузерах? На хроме работает нормально. Будет ли это работать на IE9 + и Opera, Safari?

— Цеппелин

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp поддерживает все браузеры

— Рикс

1

Просто убедитесь, что номер, по которому вы звоните, это тип номера (int, float и т. Д.), А не строка.

— el3ati2

16

Более тщательное решение

Суть этого 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()));
  });
};

— Натан Лонг
источник

9

Вы также можете посмотреть на плагин FormatCurrency jquery (автором которого я являюсь); он также поддерживает несколько локалей, но может иметь дополнительную поддержку поддержки валюты, которая вам не нужна.

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

— bendewey
источник

4

этот вопрос заставил меня выпустить v1.3 этого плагина, так что спасибо

— bendewey

3

Вот мой 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>

— Lam
источник

1

Очень простой способ - использовать toLocaleString()функцию

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

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

— Рифкан Разак
источник

1

function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

Вы можете попробовать это, это работает для меня

— benoit1521
источник