हर तीन अंकों में कॉमा जोड़ें

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 का उपयोग किया जा रहा है और यदि संभव हो तो सिर्फ जावास्क्रिप्ट का उपयोग करें और एक समारोह के लिए कोड सेट अच्छा होगा तो यह बहुत आसानी से लागू किया जा सकता है। मैं इसे कैसे करूं? हर किसी के इनपुट की सराहना करें। एक बार फिर धन्यवाद।

— स्टीव

2

@unknown: आपके पास पहले से ही कई उत्तर हैं। आपके द्वारा प्राप्त उत्तरों को देखें और उन्हें देखने के लिए उनका मूल्यांकन करें जो आपके लिए सबसे अच्छा है। यदि आपको किसी एक उत्तर के लिए अधिक स्पष्टीकरण की आवश्यकता है, तो उसे उस उत्तर के लिए टिप्पणी के रूप में पोस्ट करें।

— मार्क बायर्स

1

क्षमा करें, मेरा प्रश्न पर्याप्त नहीं था, लेकिन उत्तर के लिए पॉल क्रीजी के कोड का उपयोग करके डौग नेइनर प्लगइन प्रारूप देखें।

— स्टीव

241

@Paul क्रीज में रेगेक्स के रूप में सबसे सरल समाधान था, लेकिन यहां यह एक सरल 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 बायर्स वाक्य रचना सही है। '999.9999'.replace (/ (\ 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,") );     }) }

— 13

3

मुझे लगता है कि यह एक jQuery के नाम-प्रायोजित उपयोगिता शैली फ़ंक्शन के लिए बेहतर होगा, उदा $.digits = function() { ... };।

— एलेक्स

63

सबसे तेज़ तरीका हैnumber.toLocaleString("en");

— डेरेक

95

आप उपयोग कर सकते हैं Number.toLocaleString():

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

स्निपेट का विस्तार करें

— अभिजीत
स्रोत

मैंने इसे आज़माया है, लेकिन लाइव सर्वर पर काम नहीं कर रहा हूं, लेकिन लोकलहोस्ट पर काम कर रहा हूं ..

— 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

कुछ इस तरह से अगर आप regex में हैं, तो बदले हुए 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 = "नंबर"> 2984 </ span> पर लागू किया जा सकता है, इसलिए यह दशमलव के बिना <span class = "नंबर"> 2,984 </ span> के लिए प्रारूपित होता है। मैंने $ ('span.numbers') की कोशिश की। प्रारूप ({प्रारूप: "#, ###", स्थान: "हमें"}); लेकिन कुछ भी नहीं है। फिर भी प्लगइन की जांच करना, उसके साथ खेलना। क्षमा करें, मैं

— स्टीव

इस प्लगइन के बारे में जानने के लिए +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

आप की बहुत "जड़ें" :)

— मोनोअथ्रेडेड

"रूटसी" यह हो सकता है, लेकिन मुझे नहीं लगता कि अन्य फैंसी-पैंट दृष्टिकोणों ने मेरी स्थिति में काम किया होगा, जहां डेटा कैनवस (चार्ट.जेएस) में एम्बेडेड है। लेकिन उस फ़ंक्शन को जोड़ना और चार्ट के afterDraw () ईवेंट में इसे पूरी तरह से काम करना: ctx.fillText (addCommas (डेटासेटाडेटा [i])),

— B. क्ले शैनन

यह उदाहरण के लिए काम नहीं करता है 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 />

स्निपेट का विस्तार करें

— bamossza
स्रोत

धन्यवाद, मैंने आपके उत्तर का उपयोग किया। यह ध्यान देने योग्य हो सकता है कि यह केवल लंबाई में 15 अंकों तक की संख्या का समर्थन करता है।

— tallpaul

21

2016 उत्तर:

जावास्क्रिप्ट में यह फ़ंक्शन है, इसलिए Jquery की कोई आवश्यकता नहीं है।

yournumber.toLocaleString("en");

— काम्य डी
स्रोत

2

क्या यह सभी ब्राउज़रों पर काम करेगा? यह क्रोम पर ठीक काम कर रहा है। क्या यह IE9 + और ओपेरा, सफारी पर काम करेगा?

— ज़ेपेलिन

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp सभी ब्राउज़रों का समर्थन करता है

— रिक्स

1

बस यह सुनिश्चित करें कि जिस नंबर पर आप इसे कहते हैं वह एक नंबर प्रकार (इंट, फ्लोट, आदि) है और एक स्ट्रिंग नहीं है।

— 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 plugin (जिनमें से मैं लेखक हूं) को भी देख सकते हैं ; इसमें कई स्थानों के लिए समर्थन है, लेकिन आपके पास उस मुद्रा समर्थन का ओवरहेड हो सकता है जिसकी आपको आवश्यकता नहीं है।

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

— bendewey
स्रोत

4

इस सवाल ने मुझे इस प्लगइन का v1.3 जारी करने के लिए संशोधित किया, इसलिए धन्यवाद

— bendewey

3

यहाँ मेरी जावास्क्रिप्ट है, केवल फ़ायरफ़ॉक्स और क्रोम पर परीक्षण किया गया है

<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
स्रोत