🤔️你们开发时候,会使用正则表达式解决问题吗?

这篇文章主要介绍一些正则表达式在开发中的用处--字符串转换。主要内容有千分号,电话号码划分,电子邮件名称获取等等。主要思想是匹配特征字符串,然后用replace对匹配的字符串做转换。

这篇文章只写了一部分,后续会更新,json转TS类型,大小驼峰的转换等等,敬请期待。

千分号

javascript 复制代码
const regex = /(\d)(?=(\d{3})+)/;
const result = '12345678'.replace(regex, "$1,"); // 12,345,678

解释: 上面定义了一个名为 regex 的正则表达式。 其中,(\d)这是一个捕获组,用于匹配单个数字字符。(?=(\d{3})+):这是一个正向查找断言,它匹配一个后面紧随的条件。含义是匹配到数字的后面数字的个数一定是3的倍数,1倍、或者2倍等等,但不能是0倍

这个正则表达式的目的是在数字字符之间插入逗号,以实现千位分隔符的效果。

第二行就开始替换了,'12345678' 是要处理的输入字符串,"$1," 是替换字符串,其中 <math xmlns="http://www.w3.org/1998/Math/MathML"> 1 表示正则表达式中 ' 第一个捕获组 ' 所匹配的内容, ' " 1 表示正则表达式中`第一个捕获组`所匹配的内容,`" </math>1表示正则表达式中'第一个捕获组'所匹配的内容,'"1,"`就表示在匹配到的数字背后加一个逗号。

上面代码中,只有数字2,数字5满足匹配条件,也就是这两个数字背后加了逗号

下面是添加千分号的其它例子:

javascript 复制代码
const negativeNumber = '-1234567.89';
const regex1 = /(\d)(?=(\d{3})+)/;
const result1 = negativeNumber.replace(regex, '$1,'); // 结果为 '-1,234,567.89'

const percentage = '0.987654321';
const regex2 = /(\d)(?=(\d{3})+)/;
const result2 = percentage.replace(regex, '$1,'); // 结果为 '0.987,654,321'

电话号码划分

javascript 复制代码
const regex = /(\d)(?=(\d{4})+)/;
const result = '12345678900'.replace(regex, "$1-"); // 123-4567-8900

这段代码的目的是在数字中的每四个数字之间插入短横线 -

解释:

第一行定义了一个正则表达式 regex,其中(\d)这是一个捕获组,用于匹配单个数字字符。(?=(\d{4})+)这是一个正向查找断言,(\d{4})+匹配一个或多个连续的四个数字的组合。那整体就表示匹配到的数字后面需要跟着的数字个数为4的倍数,可以是1倍、2倍等等,不能是0倍。

第二行使用字符串的 replace 方法来将匹配正则表达式的部分替换为指定的字符串。其中'12345678900' 是要处理的输入字符串,"$1-" 是替换字符串,其中 $1 表示正则表达式中第一个捕获组所匹配的内容(即单个数字字符),"$1-"就表示匹配到的数字背后加一个短横线 -。

电子邮件名字获取

javascript 复制代码
const supportSpecializeSymbol = [^@^.^\s]
const regex = /([\w\d])([\w\d]*)\.?([\w\d])([\w\d]*)@.*/
const result = 'jingjie.fu@foxmail.com'.replace(regex,($0,$1,$2,$3,$4)=>{
	return $1.toUpperCase()+$2 + " "+ $3.toUpperCase() +$4
}) //Jingjie Fu

这段代码的目的是从一个电子邮件地址中提取名字的部分

解释:

第一行定义了一个正则表达式 regex,其模式如下:

  • ([\w\d]):这是一个捕获组,用于匹配一个字母或数字字符。
  • ([\w\d]*):这是另一个捕获组,用于匹配零个或多个字母或数字字符。
  • \.?:这部分匹配可选的点号(.),点号前后可以有零个或一个字母或数字字符。
  • @.*:这部分匹配电子邮件地址中的 @ 符号后的任何字符。

整个正则表达式用于匹配电子邮件地址的一部分,其中包括名字、点号、姓氏,以及 @ 符号后的其余部分。

第二行使用字符串的 replace 方法来将匹配正则表达式的部分替换为一个新的字符串。其中 'jingjie.fu@foxmail.com' 是要处理的电子邮件地址字符串。

其中,回调函数接收匹配到的部分和捕获组中的内容作为参数。

每个参数的含义是:

  • $0:整个匹配到的字符串,即 'jingjie.fu@foxmail.com'
  • $1:正则表达式中的第一个捕获组所匹配到的内容,即电子邮件地址中的名字的首字母 'j'
  • $2:正则表达式中的第二个捕获组所匹配到的内容,即电子邮件地址中的名字的其余部分 'ingjie'
  • $3:正则表达式中的第三个捕获组所匹配到的内容,即电子邮件地址中点号后的第一个字母 'f'
  • $4:正则表达式中的第四个捕获组所匹配到的内容,即电子邮件地址中点号后的其余部分 'u'

在这个回调函数中,名字的首字母被转换为大写,然后名字和姓氏被合并为一个字符串,中间以空格分隔。

最终的结果是 'Jingjie Fu',名字的首字母大写,姓氏的首字母大写,两者以空格分隔。

总结

这篇文章主要介绍一些正则表达式在开发中的用处--字符串转换。主要内容有千分号,电话号码划分,电子邮件名称获取等等。主要思想是匹配特征字符串,然后用replace对匹配的字符串做转换。

这篇文章只写了一部分,后续会更新,json转TS类型,大小驼峰的转换等等,敬请期待。

相关推荐
We་ct几秒前
LeetCode 1. 两数之和:两种高效解法(双指针 + Map)
前端·算法·leetcode·typescript·哈希算法
LYFlied6 分钟前
边缘智能:下一代前端体验的技术基石
前端·人工智能·ai·大模型
1024小神7 分钟前
用css的clip-path裁剪不规则形状的图片展示
前端·css
铅笔侠_小龙虾12 分钟前
Flutter 组件层级关系
前端·flutter·servlet
梵得儿SHI15 分钟前
Vue 高级特性:渲染函数与 JSX 精讲(h 函数语法、JSX 在 Vue 中的应用)
前端·javascript·vue.js·jsx·模板语法·渲染函数·底层视图生成机制
GGGG寄了16 分钟前
CSS——文字控制属性
前端·javascript·css·html
菜鸟茜22 分钟前
ES6核心知识解析01:什么是ES6以及为什么需要ES6
前端·javascript·es6
David凉宸23 分钟前
Vue 3 项目的性能优化策略:从原理到实践(页面展示)
javascript·vue.js·性能优化
C澒28 分钟前
FE BLL 架构:前端复杂业务的逻辑治理方案
前端·架构·前端框架·状态模式
摘星编程28 分钟前
在OpenHarmony上用React Native:ImageGIF动图播放
javascript·react native·react.js