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 ...
随机推荐
- Linux搭建Java环境(JDK+Tomcat+MySQL)
目录 一.项目环境: 二.安装JDK1.8 三.安装Tomcat8.5 四.安装MySQL数据库 五.配置JAVA项目 一.项目环境: 开发环境 生产环境 测试环境 硬件环境: web服务器:cpu: ...
- 用心整理 | Spring AOP 干货文章,图文并茂,附带 AOP 示例 ~
Spring AOP 是 Java 面试的必考点,我们需要了解 AOP 的基本概念及原理.那么 Spring AOP 到底是啥,为什么面试官这么喜欢问它呢?本文先介绍 AOP 的基本概念,然后根据 A ...
- mysql #1062 - Duplicate entry '2147483647' for key '*'
一.当我看到这报错的时候,第一眼是认为存在重复记录,但是找了很久没找到2147483647 二.一条条的插入数据(有一批数据),直到找到报错的数据,发现是长度超了,定义了int插入的值却有11位长,哭 ...
- 优先队列与TopK
一.简介 前文介绍了<最大堆>的实现,本章节在最大堆的基础上实现一个简单的优先队列.优先队列的实现本身没什么难度,所以本文我们从优先队列的场景出发介绍topK问题. 后面会持续更新数据结构 ...
- c++-继承的学习
继承的基本概念 继承和派生 继承概念 派生类的访问控制(继承三种方式.类三种访问控制.三看原则)综合训练 继承中的构造和析构 类型兼容性原则 继承中的构造和析构 继承中同名成员函数.成员变量处理方法 ...
- AI: Web: 2 Vulnhub Walkthrough
靶机下载链接: https://www.vulnhub.com/entry/ai-web-2,357 主机端口扫描: 尝试SQL注入,未发现有注入漏洞,就注册创建于一账户 http://10.10.2 ...
- Android 程序分析环境搭建-开发环境搭建
1.1 JDK 安装 JDK 的配置,初学java 开发,那是必须会的. 下载,遇到的问题就是要注册oracle 的账号,还有你要下载特定版本,比如jdk 1.7,jdk 1.6,很难找到在哪里.解 ...
- 在IIS中部署.net core应用
在IIS中部署 .NET Core应用 对于熟悉IIS的程序员来说,将 .NET Core Web应用部署在IIS中,无疑是方便统一管理的事情.网上给出很多如何在IIS中部署 .NET Core 应用 ...
- C语言笔记 03_常量&存储类
常量 常量是固定值,在程序执行期间不会改变.这些固定的值,又叫做字面量. 常量可以是任何的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量. 整数常量 整数常量可以是十进制 ...
- [转载] redis学习入门 Redis 3.2.100
参考博客: https://blog.csdn.net/flyer_tang/article/details/80320974 https://blog.csdn.net/weixin_3077313 ...