正则表达式(基础篇)

前言:对正则表达式一直都很向往觉得他很神奇,尤其是在处理前端页面表单的时候,实在不想写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我暂时用到的不多,后面在做说明。

二、分解正则表达式

CEBB49BB-B1AD-4539-AC7A-B40DDC62D1B2.jpg

意思:匹配一段字符串是以数字开头abc结尾,列:1abc、123abc都可以

^:匹配输入字符串的开始位置

+:匹配前面的子表达式一次或多次

$:为匹配输入字符串的结束位置

[0-9+]:匹配一个数字或多个数字

abc$:字符串结尾必须是abc


regexp-cn.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+$/.test("123456")  // true
/^\d+$/.test("123456abc") // false

2、/^[a-zA-Z\d]{6,16}$/ 匹配字母和数字,且不能小于6位大于16位字符串

/^[a-zA-Z\d]{6,16}$/.test("abc123ABC")  // true
/^[a-zA-Z\d]{6,16}$/.test("abc123ABC*")  // false(不能匹配特殊字符)

3、/^([1-9]\d*)(.\d{2})$/ 匹配保留两位小数的实数

/^([1-9]\d*)(\.\d{2})$/.test("5.25")  // true
/^([1-9]\d*)(\.\d{2})$/.test("5.256")  // false(只能保留两位小数) 

4、/^(?=.\d)(?=.[a-z])(?=.*[A-Z])\w{12,18}$/ 匹配字符串中必须包含数字,大小写字母。且只能输入数字,字母,下划线。长度不能小于12大于18。

/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,18}$/.test("wu1500421902YU") // true
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{12,18}$/.test("wuyu1500421902") // false(没有匹配到大写字母)

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容