千位分隔符的完整攻略

千位分隔符^[1]是很常见的需求，可是输入文本变幻无穷，如何才能准确添加千分符呢？

纯整数状况

纯整数大概是全部状况里最简单的一种，咱们只要正确匹配出千分位就行了。

观察上面的数字，咱们能够得出千分位的特征是到字符串终止位有 3n 个数字，不包括起始位。因而能够获得这样的函数：

javascriptlet milliFormat = (num) => {
    return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')
}

可是每每现实没有那么乐观：

小数的状况

遇到小数时，咱们的但愿只针对整数部分添加千分符，这时问题就变得稍稍有些棘手了。

若是正则引擎支持逆序环视^[2]，咱们能够这样构造正则表达式：

javascript(?<=^\d+)(?=(\d{3})+\b)

可是多数语言并不支持逆序环视，因此咱们要变通一下：

1. 拿到小数的整数部分

也就是起始位到小数点（非数字）之间的部分，能够这样实现：

javascript^\d+

2. 为整数部分添加千分符

这一步能够利用咱们以前的实现，整合在一块儿以下：

javascriptlet milliFormat = (num) => {
    return num && num.toString()
        .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
}

这个函数对整、小数都能正确处理：

但在实际中，咱们还可能传入一个整、小数混合的字符串：

整、小数混合字符串

这时咱们就不能继续用字符串起终点 ^$ 来断定边界了，若是改为单词边界 \b 会发生什么呢：

哦不！连小数部分也被添上千分符了！怎样才能避开小数部分？

从新审视咱们捕获整数部分所用到的正则：

javascript\b\d+

\b 的界定是 (?<!\w)(?=\w)|(?<=\w)(?!\w)^[3]，因此小数点也被视为单词边界了！因此咱们不该该用单词边界做为界定条件，从新看刚才的字符串 12345678 1234.5678，能够发现整数部分的起始点都有一个特征：要么位于字符串起点，要么跟在空白符后。基于这点咱们修改捕获整数部分的正则以下：

javascript(^|\s)\d+

咦，多出来一个空白符？别着急，看看咱们用来匹配千分位的正则：

javascript(?=(?!^)(\d{3})+$)

判断条件是非起点、到结尾有 3n 个数字的位置，如今为了去掉这多出来的一个空格，咱们应将起始条件改为单词边界：

javascript(?=(?!\b)(\d{3})+$)

完整函数以下：

javascriptlet milliFormat = (input) => {
    return input && input.toString()
        .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

酷炫！咱们已经能自如应付各类数值的混合了！这是耳边幽幽飘来产品经理的声音：若是我传入含有非数字的字符串呢……

复杂字符串

在上一个例子中，咱们只判断了起始边界，因而 1234ww 中的数字部分也会被捕获。为了解决这个问题，咱们要加上终止界定。来看看整、小数成立的条件：

字符串中仅包含有数字 0-9 或小数点

依据这个咱们能够这样作：

javascript(^|\s)\d+(?=\.?\d*($|\s))

这个正则表示匹配目标应以字符串起始位或空白符开始，紧接着是数字，数字的右边只容许继续是数字或者一个小数点、直到字符串结尾或下一个空格处。来看看它的匹配效果：

好样的！咱们已经能精确匹配出正确的部分了！继续用以前的千分位模式封装：

javascriptlet milliFormat = (() => {
    const DIGIT_PATTERN = /(^|\s)\d+(?=\.?\d*($|\s))/g
    const MILLI_PATTERN = /(?=(?!\b)(\d{3})+$)/g

    return (input) => input && input.toString()
        .replace(DIGIT_PATTERN, (m) => m.replace(MILLI_PATTERN, ','))
})()

酷炫！所有都正确处理了！回家睡觉！

更复杂的世界

谢 @vc1 指出，在现实中可能还会有更加复杂的状况，如：

'1234 1234.56 $1234 $-1234 $-1234.56e+7 123...e3'

容我先去买根上吊绳……

（全文完）

参考资料

1. 小數點 - 维基百科
2. 正则基础之——环视 - 雁过无痕
3. 正则基础之——\b 单词边界 - 雁过无痕

重编自个人博客，原文地址：https://idiotwu.me/milli-formatting-digitals-with-regex/