如何在每 3 位數字后添加逗號？

Question

這是我的代碼的簡化：

 $("#annual_sales").on('keyup', function () { $(this).val( $(this).val().replace(/(\\d{3})/g, "$1,") ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

我試圖在每 3 位數字后添加一個逗號。

這些模式在這里運行良好，但正如您所看到的（在上面的代碼片段中）它在 JS 中不起作用。 知道出了什么問題嗎？

Answer 1

由於事件多次觸發，因此在此處不起作用，然后您需要在每次觸發事件時先刪除先前添加的逗號，並在所需位置添加新的逗號：

$(this).val().replace(/,/g,'').replace(/(\d{3})/g, "$1,")

** 注意：** 我建議使用input事件，因為它在跟蹤使用輸入時效率更高，您也可以調整正則表達式，以便不會在行尾添加逗號：

/(\d{3}(?!$))/g

 $("#annual_sales").on('input', function() { $(this).val($(this).val().replace(/,/g, '').replace(/(\\d{3}(?!$))/g, "$1,")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

Answer 2

在您當前的模式(\\d{3})您在匹配 3 個數字之后添加一個逗號，並且在 3 個數字后面已經有一個逗號時。

您可能會做的是使用負前瞻(?!,)匹配 3 位數字(?!,)以斷言后面的內容不是逗號：

(\\d{3}(?!,))

 $("#annual_sales").on('keyup', function() { $(this).val($(this).val().replace(/(\\d{3}(?!,))/g, "$1,")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

如果您不想在行尾使用逗號，您可以在否定前瞻中使用交替，斷言后面的內容既不是逗號也不是行尾(\\d{3}(?!,|$))

 $("#annual_sales").on('keyup', function() { $(this).val($(this).val().replace(/(\\d{3}(?!,|$))/g, "$1,")); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

Answer 3

您需要預先從值中刪除先前添加的“，”，如下所示。

 $("#annual_sales").on('keyup', function () { $(this).val($(this).val().replace(new RegExp(",", "g"), "")); $(this).val( $(this).val().replace(/(\\d{3})/g, "$1,") ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

Answer 4

據推測，您希望從右側添加這些逗號作為美式數字分隔符。 這段代碼將通過在添加逗號之前和之后顛倒來做到這一點。

 var addCommas = s => s.split('').reverse().join('') .replace(/(\\d{3})/g, '$1,').replace(/\\,$/, '') .split('').reverse().join('') // Really want String.prototype.revese! $("#annual_sales").on('keyup', function () { $(this).val( addCommas($(this).val().replace(/\\,/g, '')) ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

（通過轉換為數組String.prototype.reverse反向操作真的讓我想要一個String.prototype.reverse方法。）

如果您必須支持超過兩位小數的數字，則必須在此功能上進行額外的工作。

Answer 5

老實說，我認為最好和最直接的方法不是直接使用正則表達式替換來添加逗號。 因為正則表達式從左到右運行，在這種情況下我們想從右到左解析，真的沒有簡單的方法可以做到這一點。

相反，我建議使用 javascript 來完成繁重的工作：

 $("#annual_sales").on('keyup', function () { var value = $(this).val(); var match = value.match(/[0-9,.$]+/); // Match any chars seen in currency var new_value = ""; if (match) { var digits = match[0].match(/\\d/g); // Match single digits into an array if (digits.length > 3) { for (var i = digits.length - 3; i > 0; i = i - 3) { // Start at 3 less than the length, // continue until we reach the beginning, // step down at intervals of 3 digits.splice(i, 0, ","); // Insert a comma } new_value = digits.join(""); $(this).val(new_value); } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="annual_sales" type="text" />

使用此函數，您可以擴展其對貨幣值的處理，例如在該值前加上美元符號，或者分割小數點並強制在其后跟隨兩位數字。

編輯：斯科特的回答是我在這里建議的一個更短的版本（順便說一句，非常好）。

Answer 6

好吧，你可以使用這個簡單的技巧：

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            let label = data.labels[tooltipItem.index];
            let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            return ' ' + label + ' : ' + value.replace(/(.)(?=(.{3})+$)/g,"$1,");
        }
    }
}