使用敲除读写选项的输入屏蔽（千位分隔符/小数）答案

【问题标题】：Input masking ( thousand separator / decimal-us) using Knock out read & write options使用敲除读写选项的输入屏蔽（千位分隔符/小数）
【发布时间】：2014-07-07 12:19:42
【问题描述】：

我要求将十进制值格式化为美元格式（即每个十进制数都应在开头附加一个 $ 符号并在每 3 位数字后引入逗号。

例如：999999999 应转换为 $999,999,999.00 用于显示目的，而应保留原始值以供进一步计算。

        self.MonthlyAppliedEmployerContributionAmount = ko.observable(MonthlyAppliedEmployerContribution);

        self.MonthlyAppliedEmployerContributionAmountFormatted = ko.computed({
            read: function () {
                return '$' + parseFloat(self.MonthlyAppliedEmployerContributionAmount()).toFixed(2);
            },
            write: function (value) {
                // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
                value = parseFloat(value.replace(/[^\.\d]/g, ""));
                self.MonthlyAppliedEmployerContributionAmount(isNaN(value) ? 0 : value); // Write to underlying storage
            }
        });

在阅读 observable 属性时，我在开头附加了 $ & .toFixed(2) 帮助我实现了限制 2 位小数。

但我不知道如何在每三个数字后引入逗号。

注意：在 KO 写入方法中，我将删除读取方法中引入的所有格式。

我不想使用 Jquery 掩码插件，因为它们中的大多数不是直接来自 Jquery lib，而是由一些第三方制作的，可能会在某个时间点中断。

感谢您的早期响应。

【问题讨论】：

标签： regex jquery-plugins knockout.js knockout-mapping-plugin knockout-validation

【解决方案1】：

您可以使用这个正则表达式插入千位分隔符：

function addThousandSeparator(s) { 
  return s.replace(/(\d)(?:(?=\d+(?=[^\d.]))(?=(?:\d{3})+\b)|(?=\d+(?=\.))(?=(?:\d{3})+(?=\.)))/gm, '$1,');
}

如果您需要另一个千位分隔符，请将'$1,' 中的逗号替换为您的分隔符。

所以你会：

read: function () {
            return '$' + addThousandSeparator(parseFloat(self.MonthlyAppliedEmployerContributionAmount())
                         .toFixed(2));

        }

【讨论】：

感谢您的快速响应。您能否解释一下您的意思：如果您需要另一个千位分隔符，请将“$1”中的逗号替换为您的分隔符。
在法国，千位分隔符是一个空格 (10 000 000)，您似乎需要一个逗号 (10,000,000)，但如果您需要其他内容，您可以将 '$1,' 替换为 '$1[yourseparatorhere ]' 在replace 的末尾
非常好，它按预期工作:) 只是想理解你复杂的正则表达式......这里 /gm 的意义是什么以及'$1，'如何帮助这里实现我们想要的格式?
老实说，我自己也完全不明白。我在一个项目中需要这个，并在网上搜索了很长时间。这就是说，我可以回答你的问题： /gm 是告诉正则表达式在哪里查找的标志； $1 返回第一组。 javascripter.net/faq/regularexpressionsyntax.htm
我还可以告诉你这个正则表达式使用了前瞻developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…

【解决方案2】：

您应该使用现有的本地化库之一来为您进行解析和格式化。例如：

这些是最受欢迎的，可以轻松解决您的问题。

【讨论】：