前端常用正则

简介: 在做项目的过程中,使用正则表达式来匹配一段文本中的特定种类字符,是比较常用的一种方式,下面是对常用的正则匹配与替换做了一个归纳整理。

常用正则表达式

匹配开头:^
匹配结尾:$
匹配中文:[\u4e00-\u9fa5]
匹配英文字母:[a-zA-Z]
匹配数字:[0-9]
手机号:^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$
身份证:(^\d{15}$)|(^\d{17}([0-9]|X|x)$)
匹配网址URL:[a-zA-z]+://1*
匹配国内电话号码:d{3}-d{8}|d{4}-d{7}
匹配ip地址:d+.d+.d+.d+

根据给定规则,编写正则

1.或

匹配数字或下划线:[0-9_]
匹配1开头或2开头的3位数字: ^(1|2)\d{2}$

2.限定字符数

匹配任意数量数字:^\d*$
匹配0或1位数字:^\d?$
匹配至少1位数字:^\d+$
匹配2位数字: ^\d{2}$
匹配2-4位数字: ^\d{2, 4}$

3.最小匹配

有时候,匹配规则可能会有多种匹配方式

const r1 = 'abcababcaab'.replace(/a.*c/g, '123')
const r2 = 'abcababcaab'.replace(/a(.*?)c/g, '123')
// r1与r2结果是不同的
// r1 = "123aab"
// r2 = "123123aab"

4.$变量的简单运用

// '<span class="abc">我是标签内容</span>'
// 在不确定这里就是abc的情况下,如何把abc替换成defg?
const html = '<span data-key="id" class="abc">我是标签内容</span>'
const newHtml = html.replace(/^<(.*?)class="(.*?)"(.*?)>/, '<$1class="defg"$3>')
// 这里,小括号将匹配到的内容划分为一个组,可按顺序依次作为变量$1,$2,$3...
// 在'<$1class="defg"$3>'中,$1就是前面/^<(.*?)class=括号内匹配到的内容

  1. s
相关文章
|
前端开发
前端切图:用正则替换手机号码
前端切图:用正则替换手机号码
52 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
67 0
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
36 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
39 0
|
前端开发 JavaScript
前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.
在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。
134 0
|
前端开发
前端学习案例4-正则概述-字符组的简写
前端学习案例4-正则概述-字符组的简写
56 0
前端学习案例4-正则概述-字符组的简写
|
前端开发
前端学习案例7-正则-括号的用法
前端学习案例7-正则-括号的用法
80 0
前端学习案例7-正则-括号的用法
|
前端开发
前端学习案例8-正则-括号的用法
前端学习案例8-正则-括号的用法
79 0
前端学习案例8-正则-括号的用法
|
前端开发
前端学习案例10-正则-选择1
前端学习案例10-正则-选择1
68 0
前端学习案例10-正则-选择1
|
前端开发
前端学习案例9-正则-非捕获反向引用
前端学习案例9-正则-非捕获反向引用
64 0
前端学习案例9-正则-非捕获反向引用