![79f9548181fe5b3e2a17de650977f37a.png](https://i-blog.csdnimg.cn/blog_migrate/d34dd0c839e3fc6f4156dcdcb7178888.jpeg)
前言:对正则表达式一直都很向往觉得他很神奇,尤其是在处理前端页面表单的时候,实在不想写if else判断,所以抽了点时间简单学习了一下,总结下学习成果。
我在处理表单验证和页面数据渲染的时候会用到正则表达式,对正则表达式也不是很熟悉。
一、正则表达式方法,我们现在看看正则表达式有那些方法
1、test:匹配字符串如果匹配到,包含返回true,不包含返回false
/ho/.test("Hi hollo") // true
/ho/.test("I am not good") // false
2、match:匹配字符串如果匹配到,返回匹配结果,如匹配不到返回null
"Hi hollo".match(/ho/g) // [ho]
"I am not good".match(/ho/g) // null
3、search:匹配字符串如果匹配到,返回下标索引,如匹配不到返回-1
"Hi hollo".search(/ho/g) // 3
"I am not good".search(/ho/g) // -1
4、replace:匹配字符串如果匹配到,则替换Hi为hey,如匹配不到不做任何处理
"Hi hollo".replace(/Hi/g,'hey') // hey hollo
"Hi hollo".replace(/Tony/g,'Tom') // Hi hollo
5、split和exec我暂时用到的不多,后面在做说明。
二、分解正则表达式
![353440a98047623a323ae76e542bc6f3.png](https://i-blog.csdnimg.cn/blog_migrate/8823f421f92bd98d30143e3c91126b5e.png)
意思:匹配一段字符串是以数字开头abc结尾,列:1abc、123abc都可以
^:匹配输入字符串的开始位置
+:匹配前面的子表达式一次或多次
$:为匹配输入字符串的结束位置
[0-9+]:匹配一个数字或多个数字
abc$:字符串结尾必须是abc
![b3b2b0f1a8591a50a35cbe328e079429.png](https://i-blog.csdnimg.cn/blog_migrate/17f1e49e4c840c63bf0600e01e67446d.png)
三、正则表达式个人简单理解白话文。
1、/^[1-9]d*$/ 匹配开头不为0的整数
^[1-9]:必须有一个以1~9的开头数字
d:匹配任意0~9数字
*:前面d可以匹配0个数字也可以匹配多个数字。
$:必须已0~9数字结束
2、/^(-)?[1-9]+(.d{1,2})?$/ // 匹配正数、负数、和小数
^:字符串的开始位置
^(-)?:字符串可以匹配 - 开头也可以匹配 - 开头。
[1-9]:匹配任意1-9的数字
[1-9]+:必须是一位或多位1-9的数字
.:能输入一个 .
d:任意0~9的数字
{1,2}:1位获两位
(.d{1,2}):匹配一个 . 和1位或是2位的0~9的数字
(.d{1,2})?:可以匹配 . 和1位或是2位的0~9的数字也可以不匹配
$:匹配字符串结束位置
四、常用的正则表达式
1、/^d+$/ 只能匹配数字
/^d+$/
2、/^[a-zA-Zd]{6,16}$/ 匹配字母和数字,且不能小于6位大于16位字符串
/^[a-zA-Zd]{6,16}$/
3、/^([1-9]d*)(.d{2})$/ 匹配保留两位小数的实数
/^([1-9]d*)(.d{2})$/
4、/^(?=.*d)(?=.*[a-z])(?=.*[A-Z])w{12,18}$/ 匹配字符串中必须包含数字,大小写字母。且只能输入数字,字母,下划线。长度不能小于12大于18。
/^(?=.*d)(?=.*[a-z])(?=.*[A-Z])w{6,18}$/
5、replace(/(d{3})d{4}(d{4})/,'$1***$2') 匹配11位手机号中间4位替换成*
"15921739208".replace(/(d{3})d{4}(d{4})/,'$1****$2') // 159****9208
"15921739208".replace(/(d{3})d{8}/,'$1********') // 159********
6、replace(/(?=(d{4})+$)/g,'-') 还没有彻底领悟,语言组织不好。
"15921739208".replace(/(?=(d{4})+$)/g,'-') // 159-2173-9208
"50000".replace(/(?=(d{3})+$)/g,',') // 50,000