博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
千位分隔符的完整攻略
阅读量:5127 次
发布时间:2019-06-13

本文共 1877 字,大约阅读时间需要 6 分钟。

千位分隔符是很常见的需求,但是输入文本千变万化,如何才能准确添加千分符呢?

纯整数情况

纯整数大概是所有情况里最简单的一种,我们只要正确匹配出千分位就好了。

观察上面的数字,我们可以得出千分位的特征是到字符串终止位有 3n 个数字,不包括起始位。于是可以得到这样的函数:

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

但是往往现实没有那么乐观:

小数的情况

遇到小数时,我们的希望只针对整数部分添加千分符,这时问题就变得稍稍有些棘手了。

如果正则引擎支持逆序环视,我们可以这样构造正则表达式:

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

但是多数语言并不支持逆序环视,所以我们要变通一下:

1. 拿到小数的整数部分

也就是起始位到小数点(非数字)之间的部分,可以这样实现:

^\d+

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

这一步可以利用我们之前的实现,整合在一起如下:

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

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

但在实际中,我们还可能传入一个整、小数混合的字符串:

整、小数混合字符串

这时我们就不能继续用字符串起终点 ^$ 来判定边界了,如果改成单词边界 \b 会发生什么呢:

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

重新审视我们捕获整数部分所用到的正则:

\b\d+

\b 的界定是 (?<!\w)(?=\w)|(?<=\w)(?!\w),所以小数点也被视为单词边界了!所以我们不应该用单词边界作为界定条件,重新看刚才的字符串 '12345678 1234.5678',可以发现整数部分的起始点都有一个特征:要么位于字符串起点,要么跟在空白符后。基于这点我们修改捕获整数部分的正则如下:

(^|\s)\d+

咦,多出来一个空白符?别着急,看看我们用来匹配千分位的正则:

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

判断条件是非起点、到结尾有 3n 个数字的位置,现在为了去掉这多出来的一个空格,我们应将起始条件改成单词边界:

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

完整函数如下:

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

酷炫!我们已经能自如应付各种数值的混合了!这时耳边幽幽飘来产品经理的声音:如果我传入含有非数字的字符串呢……

复杂字符串

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

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

依据这个我们可以这样做:

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

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

好样的!我们已经能精确匹配出正确的部分了!继续用之前的千分位模式封装:

let 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, ',')) })()

酷炫!全部都正确处理了!

复杂的现实世界

但是!这还远远不够!我们看这样一个字符串:

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

容我先去买一根上吊绳……

转载于:https://www.cnblogs.com/alantao/p/9374021.html

你可能感兴趣的文章
Vue_(组件通讯)子组件向父组件传值
查看>>
STM32单片机使用注意事项
查看>>
js window.open 参数设置
查看>>
032. asp.netWeb用户控件之一初识用户控件并为其自定义属性
查看>>
移动开发平台-应用之星app制作教程
查看>>
leetcode 459. 重复的子字符串(Repeated Substring Pattern)
查看>>
springboot No Identifier specified for entity的解决办法
查看>>
浅谈 unix, linux, ios, android 区别和联系
查看>>
51nod 1428 活动安排问题 (贪心+优先队列)
查看>>
Solaris11修改主机名
查看>>
latex for wordpress(一)
查看>>
如何在maven工程中加载oracle驱动
查看>>
Flask 系列之 SQLAlchemy
查看>>
aboutMe
查看>>
【Debug】IAR在线调试时报错,Warning: Stack pointer is setup to incorrect alignmentStack,芯片使用STM32F103ZET6...
查看>>
一句话说清分布式锁,进程锁,线程锁
查看>>
FastDFS使用
查看>>
服务器解析请求的基本原理
查看>>
[HDU3683 Gomoku]
查看>>
下一代操作系统与软件
查看>>