介绍一下顺序环视 (?=...) 和逆序环视 (?<=...) 
方便不想看长文的人,如果在支持 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 正则中环视(断言)应用 -- 数字千分符的更多相关文章

  1. js解决千分符问题

    js脚本function: //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3}) ...

  2. js解决千分符问题[收藏下]

    //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3})/ while (re.te ...

  3. 排坑&#183;IPhone&IOS中不兼容正则中的断言匹配

    阅文时长 | 1.14分钟 字数统计 | 1834.4字符 主要内容 | 1.问题切入 2.什么是断言匹配 3.断言匹配的替换方案 4.声明与参考资料 『排坑·IPhone&IOS中不兼容正则 ...

  4. JS数字千分

    JS数字千分: 1.例子:1000--->1,000 2.实现如下: salesToFormat: function (num) { var num = (num || 0).toString( ...

  5. JavaScript千分符---正则实现

    一般在JavaScript中实现千分符,是使用切割+连接一顿操作 这里尝试一下使用正则快速实现千分符 let num0 = '12' let num1 = '123' let num2 = '1234 ...

  6. js-格式化数字保留两位小数-带千分符

    很多时候发现有时候js会提示自带函数不能使用,所以自己找了很多资料实现了个 html <input type="text" class="input_text in ...

  7. JS实现数字千位符格式化方法

    /** * [number_format 参数说明:] * @param {[type]} number [number:要格式化的数字] * @param {[type]} decimals [de ...

  8. JS 正则中的命名捕获分组

    假设你在一段陌生的代码中看到这样一个函数: function toLocalDate(date) { return date.replace(/(\d{2})-(\d{2})-(\d{4})/, &q ...

  9. js正则判断实现18位数字

    js实现18位数字 var stuCardReg = /^[0-9]{18}/; var stuCard = $('.inp).val();//获取input框中的数值 if (!stuCardReg ...

随机推荐

  1. margin重叠与穿透问题

    margin重叠是指两个同级元素之间.margin穿透指的是,子元素margin超出父元素而未被父元素包含的现象. 出现margin重叠的原因: 同一个BFC里面两个块级元素会出现margin折叠. ...

  2. 学习Python第一天 ---Hello World

    引言 人生苦短,请用 Python(3.+) 越来越多的情况下使用Python语言进行"代码粘合"和"数据分析"变得非常方便,而且Python 在"爬 ...

  3. django查询中模糊的知识点,filter(blog=blog),filter(username=username).first()--这两者只需一招让你分清QuerySet对象,和用户字典对象

    只需一招让你分清QuerySet对象,和用户字典对象 article_list = models.Article.objects.filter(blog=blog) user_obj = models ...

  4. HTML语法简要总结

    HTML基本语法 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 常见浏览器内核介绍 浏览器是网页运行的平台,常用的浏览器有IE.火 ...

  5. 运算符副作用总结与例子(js)

    js中运算符副作用总结与例子 js中赋值运算符,递增递减运算符,delete运算符具有副作用,简单地说就是前后表达式的值会相互影响,除此之外其它的js运算符都没有副作用. 但函数表达式和对象创建表达式 ...

  6. .NET Core使用RabbitMQ

    RabbitMQ简介 RabbitMQ是一个开源的,基于AMQP(Advanced Message Queuing Protocol)协议的完整的可复用的企业级消息队,RabbitMQ可以实现点对点, ...

  7. C# (转载)webbrowser专题(参考资料:https://www.cnblogs.com/blogpro/p/11458390.html)

    C# .Net 2.0实例学习:WebBrowser页面与WinForm交互技巧 2 Study Case :高亮显示 上一个例子中我们学会了查找文本——究跟到底,对Web页面还是只读不写.那么,如果 ...

  8. 区块链技术驱动金融.mobi

    链接:https://pan.baidu.com/s/1yY8f_PglsPoudb76nru9Ig 提取码:c58o 想一起学习区块链的朋友可以加好友一个学习哦,共同进步

  9. GIT实用操作指令(更新中)

    提取多次提交的文件 git archive --format=zip HEAD `git diff --name-only 较早的提交ID 较晚的提交ID` > diff.zip

  10. oopday01(面向对象-类&private&this)

    面向对象基本概述.封装 01_面向对象(面向对象思想概述) * A:面向过程思想概述    * 第一步    * 第二步 * B:面向对象思想概述    * 找对象(第一步,第二步) * C:举例   ...