Кожні три цифри додайте коми до чисел

160

Як я можу відформатувати числа за допомогою кодового роздільника кожні три цифри за допомогою jQuery?

Наприклад:

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

jquery number-formatting

— Стів
джерело

Я новачок у jQuery і хотів би просту функцію / плагін, який просто додає кому після кожні три цифри, якщо цифри довші трьох цифр. Тільки позитивні цифри, без дробів, без десяткових знаків, без участі валюти, а також у стандартному форматі США (1,111) немає (1,111 або 1,111,11 дол. США). Я б скоріше зробив це за допомогою jQuery, а не просто javascript, якщо це можливо, і було б добре встановити набір коду на функцію, щоб його можна було застосувати дуже легко. Як мені це робити? Вдячний усім за внесок. Знову дякую.

— Стів

2

@unknown: Ви вже маєте багато відповідей. Подивіться на отримані відповіді та оцініть їх, щоб побачити, що найкраще для вас. Якщо вам потрібні додаткові роз'яснення для однієї з відповідей, опублікуйте це як коментар до цієї відповіді.

— Марк Байєрс

1

Вибачте, моє запитання було недостатньо стислим, але дивіться формат плагіна Doug Neiner, використовуючи код Пола Крісі для відповіді.

— Стів

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'.замінити (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1", хоча повертає "999,9,999".

— Бендвей

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

Розгорніть фрагмент

— Абхієет
джерело

Я спробував це, але не працюю на живому сервері, але працюю на localhost ..

— 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

Щось подібне, якщо ви користуєтесь регулярною виразкою, не впевнені в точному синтаксисі заміни на тхо!

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

— Пол Крісі
джерело

2

Синтаксис правильний. '999.9999'.замінити (/ (\ 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"> 2984 </span> без десяткових знаків. Я спробував $ ('span.numbers'). Формат ({format: "#, ###", locale: "us"}); але нічого не відбулося. Ще вивчає плагін, граючи з ним. Вибачте, що я новачок jQuery :-)

— Стів

+1 Приємно знати про цей плагін. Я погоджуюся, що для зростання та майбутньої інтернаціоналізації це був би найкращий шлях.

— Дуг Нейнер

Ось посилання на його репортаж GitHub. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

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

"Rootsy" це може бути, але я не думаю, що інші модні підходи могли б спрацювати в моїй ситуації, коли дані вкладені в полотно (Chart.JS). Але додавання цієї функції та виклик її у події afterDraw () діаграми прекрасно працює: ctx.fillText (addCommas (data.data [i]),

— B. Clay Shannon,

Це не працює, наприклад, 3000000 (7 цифр). лише для 6 і менше цифр!

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

21

Використовуйте функцію Номер ();

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

Розгорніть фрагмент

— бамоша
джерело

Дякую, я використав вашу відповідь. Можливо, варто зазначити, що це підтримує лише цифри довжиною до 15 цифр.

— tallpaul

21

Відповідь 2016 року:

Javascript має цю функцію, тому Jquery не потребує.

yournumber.toLocaleString("en");

— Камі Д
джерело

2

Чи буде це працювати у всіх браузерах? Це добре працює на хромі. Чи буде працювати на IE9 + & опера, сафарі?

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp підтримує всі браузери

— rikes

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

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

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

— бордюї
джерело

4

це питання змінило мене, щоб випустити v1.3 цього плагіна, тому дякую

— bendewey

3

Ось мій JavaScript, протестований лише на firefox та хром

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

— Лам
джерело

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
джерело