JS 正则中环视(断言)应用 -- 数字千分符
介绍一下顺序环视 (?=...) 和逆序环视 (?<=...)
方便不想看长文的人,如果在支持 ES2018 的环境中整数可以这样使用:
String(12345678).replace(/(?<=\d)(?=(\d{3})+\b)/g, ',') // "12,345,678"
其中最关键的是肯定顺序环视(?=...),也叫零宽度正预测先行断言。
添加千分符麻烦的地方在于只有在从右到左 3 的倍数的位数和前面的数字中间需要添加逗号
而正则是从左到右匹配的,这时候就需要用到顺序肯定环视。
环视不占用字符,能匹配到符合要求的位置
比如,`/Java(?=Script)/` 只会匹配后面有 Script 的 Java 字符
'Java or JavaScript'.replace(/Java(?=Script)/, 'Type'); // "Java or TypeScript"
我们知道匹配连续的 3 个数字的方法是 /\d{3}/ 3 的倍数的位数的数字就是 /(\d{3})+/
再结合顺序肯定环视,我们就能匹配到后面有 3 的倍数的位数前面的位置 /(?=(\d{3})+)/
这样我们就成功一半了,下面的问题是 `` 这样的 6 位数,前面不需要加分隔符。
所以我们还需要匹配前面有数字的位置,这就需要肯定逆序环视 /(?<=\d)/
逆序环视和顺序环视相反,是指定模式后面的位置比如:
'Adding subscripts using Javascript'.replace(/(?<=Java)script/, 'Script'); // "Adding subscripts using JavaScript"
上面两个加起来就可以匹配到前面有数字,且后面有 3 的倍数的位置,但如果你这样子写:
String(12345678).replace(/(?<=\d)(?=(\d{3})+)/g, ','); // "1,2,3,4,5,678"
会发现和预期不同,右边三位数字前面的每个数字后都加了逗号。
我们可以使用单词分隔符 `\b` 来解决这个问题
String(12345678).replace(/(?<=\d)(?=(\d{3})+\b)/g, ',') // "12,345,678"
如果你是在支持 ES2018 环境下运行那到这里就可以了,但目前很多浏览器还不支持逆序环视。好在我们可以稍微变通,不使用逆序环视来解决
String(12345678).replace(/(\d{1,3})(?=(\d{3})+\b)/g, '$1,') // "12,345,678"
为了方便可以添加一个函数
function formatNumber(number) {
if (typeof number !== 'number') {
throw new Error('formatNumber parameter must be number');
}
if (Number.isNaN(number)) {
return '0';
}
let result;
const [integerNum, decimalNum] = String(number).split('.');
return integerNum.replace(/(\d)(?=(\d{3})+\b)/g, '$1,') + (decimalNum ? `.${decimalNum}` : '');
}
如果想用国内的习惯,按万位划分,把 3 改 4 即可
JS 正则中环视(断言)应用 -- 数字千分符的更多相关文章
- js解决千分符问题
js脚本function: //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3}) ...
- js解决千分符问题[收藏下]
//js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3})/ while (re.te ...
- 排坑·IPhone&IOS中不兼容正则中的断言匹配
阅文时长 | 1.14分钟 字数统计 | 1834.4字符 主要内容 | 1.问题切入 2.什么是断言匹配 3.断言匹配的替换方案 4.声明与参考资料 『排坑·IPhone&IOS中不兼容正则 ...
- JS数字千分
JS数字千分: 1.例子:1000--->1,000 2.实现如下: salesToFormat: function (num) { var num = (num || 0).toString( ...
- JavaScript千分符---正则实现
一般在JavaScript中实现千分符,是使用切割+连接一顿操作 这里尝试一下使用正则快速实现千分符 let num0 = '12' let num1 = '123' let num2 = '1234 ...
- js-格式化数字保留两位小数-带千分符
很多时候发现有时候js会提示自带函数不能使用,所以自己找了很多资料实现了个 html <input type="text" class="input_text in ...
- JS实现数字千位符格式化方法
/** * [number_format 参数说明:] * @param {[type]} number [number:要格式化的数字] * @param {[type]} decimals [de ...
- JS 正则中的命名捕获分组
假设你在一段陌生的代码中看到这样一个函数: function toLocalDate(date) { return date.replace(/(\d{2})-(\d{2})-(\d{4})/, &q ...
- js正则判断实现18位数字
js实现18位数字 var stuCardReg = /^[0-9]{18}/; var stuCard = $('.inp).val();//获取input框中的数值 if (!stuCardReg ...
随机推荐
- Java实现数列的排列组合
定义: 排列:从给定个数的元素中取出指定个数的元素,进行排序 组合:从给定个数的元素中仅取出指定个数的元素,不考虑排序 公式: 从n个元素中取出m个元素进行排序的个数: A(m,n)=n(n-1)(n ...
- 【HTTP】402- 深入理解http2.0协议,看这篇就够了!
本文字数:3825字 预计阅读时间:20分钟 导读 http2.0是一种安全高效的下一代http传输协议.安全是因为http2.0建立在https协议的基础上,高效是因为它是通过二进制分帧来进行数据传 ...
- 《JavaScript 正则表达式迷你书》知识点小抄本
介绍 这周开始学习老姚大佬的<JavaScript 正则表达式迷你书> , 然后习惯性的看完一遍后,整理一下知识点,便于以后自己重新复习. 我个人觉得:自己整理下来的资料,对于知识重现,效 ...
- JS四种判断数据类型的方法:typeof、instanceof、constructor、Object.prototype.toString.call()
1.typeof 1 console.log(typeof ""); //string 2 console.log(typeof 1); //number 3 console.lo ...
- 201871010119-帖佼佼《面向对象程序设计(java)》第十周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- Django序列化时间报错
一.前言 当利用models模块从数据库获取数据时,当获的取数据序列化时,如果获取的数据中有关于时间类型的字段,则会报错,错误如下: TypeError: datetime.datetime(2018 ...
- JSP请求是如何被处理的?jsp的执行原理
客户端通过浏览器发送jsp请求,服务器端接受到请求后,判断是否是第一次请求该页面,或者该页面是否改变,若是,服务器将jsp页面翻译为servlet,jvm将servlet编译为.class文件,字节码 ...
- 什么是cookie?什么是session?session和cookie有什么区别?
在技术面试中,经常被问到“说说Cookie和Session的区别”,大家都知道,Session是存储在服务器端的,Cookie是存储在客户端的,然而如果让你更详细地说明,你能说出几点?今天个推君就和大 ...
- Dynamics 365中使用计算字段自动编号字段实时工作流自动生成分组编码加流水号的自动编号字段值
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- 2.Redux学习2----redux-thunk
UI组件:只展示UI,不处理业务逻辑,又称傻瓜组件,因为只需要展示UI,没有状态,我们通常用函数组件(无状态组件)作为UI组件 容器父组件:只处理业务逻辑,不展示UI,又称聪明组件 redux-thu ...