jQueryの数値にコンマを追加する


82

私はこれらの番号を持っています

10999そして8094456

そして、私がやりたいのは、必要に応じて適切な場所にコンマを追加することです。

10,999そして8,094456

これらはすべて、このようなapタグ内にあります<p class="points">10999</p>

それはできますか?

私は他の投稿http://jsfiddle.net/pdWTU/1/の助けを借りてここでそれを試みましたが、それを機能させることができないようです

ありがとう

ジェイミー

更新

少し混乱して、ここでそれを理解することができましたhttp://jsfiddle.net/W5jwY/1/

それを行うためのより良い方法については、新しいグローバリゼーションプラグインを見ていきます

ありがとう

ジェイミー


4
ここに関連する質問:stackoverflow.com/questions/2901102/...
epascarello

3
あなたのフィドルのために+1。あなたのアップデートであなたのソリューションを含める必要があります<number string>.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
zhon

2
私はあなたの解決策のために+100ができたらいいのにと思います。驚くばかり!
zhon 2013年

このソリューションはほとんどの部分で最善でしたが、私にとってはうまくいきませんでした。残念ながら、小数点以下4桁、場合によっては5桁の数値を表示する必要があります。私が働いている人々は、トランザクション数が多く、1セントの何分の1かで、合計で100ドルまたは1000ドルになります(Office Spaceを考えてみてください)。3を超える
。http

ここでこの質問に対する本当の答え:stackoverflow.com/a/2632502/1860982
Tosin Onikute 2018年

回答:


138

すべてのブラウザで動作します。必要なのはこれだけです。

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

4
user1655655の答えははるかに優れています
Pyrolistical 2014年

10
私は亀が好きです!
ティモシーペレス

7
この回答に関する2つの問題:1。同じ値で関数を複数回呼び出すと、間違った場所にコンマが表示されます(たとえば、キーアップイベント)。2.この関数は小数を適切に処理せず、小数の中にコンマを追加します。両方を修正する修正バージョンについては、このJSFiddleを参照してください。
baacke 2014

1
@baackeこの関数のアイデアはスリムであるため、同じ変数または小数で2回呼び出すことは考慮していません(問題に含まれていなかったため)。いずれにせよ、あなたのフィドルの例は、小数が必要な場合に役立ちますので、ありがとうございます。
ティモシーペレス

カンマまたはピリオドが表示される場所は、ロケールによって決まります。JS標準ライブラリはすでにこれを行うことができます。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
アレックス・ハーヴェイ

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

6
これは最も単純な解決策であり、私にとっては完璧に機能します。ありがとうございました!
ahgood 2013

3
カスタム関数を書いたりプラグインを含めたりするよりもはるかに優れたヒントをありがとうございます。私にとっては#1と答えてください!
linqu 2013

5
これは素晴らしいです、そしてほとんどのデスクトップブラウザで動作しますが、それは今、携帯のブラウザでサポートが限定されます注意してください... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
ルーク

2
Node.jsでこれを使用しようとしている人は、v8エンジンを再コンパイルしてi18nを含めない限り機能しません:stackoverflow.com/questions/23571043/…–
Tom Spencer

3
これはブラウザ間で一貫性がなく、iPadではまったく機能しません。
アイザックアスキュー2015年

3

Timothy Pirezの回答は非常に正しかったのですが、数字をコンマに置き換える必要がある場合は、ユーザーがテキストフィールドに入力するとすぐに、キーアップ機能を使用することをお勧めします。

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



1
    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));


0

toLocaleStringの使用 でREFを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


-1

別のアプローチ:

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/


-1

それを行う別の方法:

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

-1

これが@TimothyPerezへのコメントで提供された@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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.