jQuery의 숫자에 쉼표 추가


82

이 번호가 있습니다

10999및 8094및456

그리고 내가하고 싶은 것은 필요한 경우 올바른 위치에 쉼표를 추가하는 것뿐입니다.

10,999및 8,094및456

이것들은 모두 이와 같은 ap 태그 내에 있습니다 <p class="points">10999</p>.

할 수 있습니까?

나는 다른 게시물 http://jsfiddle.net/pdWTU/1/ 의 도움으로 여기에서 시도했지만 작동하지 않는 것 같습니다.

감사

제이미

최신 정보

약간 혼란스러워서 여기 http://jsfiddle.net/W5jwY/1/

더 나은 방법을 위해 새로운 Globalization 플러그인을 살펴 보겠습니다.

감사

제이미



3
바이올린에 +1. 업데이트에 솔루션을 포함해야합니다.<number string>.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
— zhon

2
나는 당신의 해결책을 위해 +100을 할 수 있기를 바랍니다 : 정규식은 단어 경계가 아닌 3 자리 앞의 긍정적 인 표정을 말하며 숫자가 반복되지 않을 가능성이 있습니다. 대박!
— zhon

이 솔루션은 대부분 최고 였지만 저에게는 효과적이지 않았습니다. 불행히도 4 자리, 때로는 5 자리 숫자를 표시해야합니다. 내가 일하는 사람들은 많은 거래를 처리하고 1 페니의 일부를 합하면 100 달러 또는 1000 달러가됩니다 (Office Space를 생각해보십시오). 난 그냥 3 과거 소수점을 처리 할 수 있도록 당신의 바이올린에 대한 몇 가지 코드를 때렸다 : http://jsfiddle.net/W5jwY/554/
— 조쉬 Bilderback

이 질문에 대한 실제 답변 : stackoverflow.com/a/2632502/1860982
— Tosin Onikute

답변:


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

10
나는 거북이를 좋아한다!
— Timothy Perez

7
이 대답에 대한 두 가지 문제 : 1. 동일한 값으로 함수를 두 번 이상 호출하면 잘못된 위치에 쉼표가 표시됩니다 (예 : keyup 이벤트). 2.이 함수는 소수를 제대로 처리하지 못하며 소수 안에 쉼표를 추가합니다. 두 가지를 모두 수정하는 수정 된 버전 은이 JSFiddle 을 참조하십시오 .
— baacke

1
@baacke이 함수의 아이디어는 슬림하다는 것이므로 동일한 var 또는 decimals에서 두 번 호출하는 것을 고려하지 않았습니다 (질문에 포함되지 않았기 때문에). 어느 쪽이든, 귀하의 바이올린 예제는 소수가 필요한 경우에 유용하므로 감사합니다.
— Timothy Perez

쉼표 또는 마침표가 나타나는 위치는 로케일에 따라 결정됩니다. JS 표준 라이브러리는 이미이 작업을 수행 할 수 있습니다. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
— Alex Harvey

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

6
이것은 가장 간단한 솔루션이며 저에게 완벽하게 작동합니다. 감사합니다!
— ahgood 2013 년

3
그 힌트를 주셔서 감사합니다. 커스텀 함수를 작성하거나 플러그인을 포함하는 것보다 훨씬 낫습니다. 나를 위해 대답 # 1!
— linqu

5
이것은 훌륭하고 대부분의 데스크톱 브라우저에서 작동하지만 현재 모바일 브라우저에서는 제한적으로 지원됩니다. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
— Luke

2
Node.js와 함께 이것을 사용하려는 사람은 i18n을 포함하도록 v8 엔진을 다시 컴파일하지 않는 한 작동하지 않습니다. stackoverflow.com/questions/23571043/…
— Tom Spencer

3
이것은 브라우저에서 일관되지 않으며 iPad에서는 전혀 작동하지 않습니다.
— Isaac Askew 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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString 에서 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

@Timothy Perez에 대한 의견에 제공된 @baacke의 바이올린의 coffeescript 버전입니다.

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.