速成js正则

前言

对于正则我相信无论是学习前端还是后端的小伙伴们肯定都是**知道**这个名词的,但是确有很多小伙伴对这项有点**晦涩难懂**的语言是既熟悉又陌生.今天那由小编和大家一起去学习一下这个***复杂*** 的语言吧.

1. 正则的作用是什么呢?

对于正则其实也就是让计算机能够读懂人类的规则 ;

简而言之就是用来校验一些用户操作是否合理的. 常见的场景有表单验证,或者敏感词过滤; 

2.正则的用法

正则简写 / / , //只写两斜杠，浏览器会认为是注释，所以尽量不要给他为空，注意两斜杠之间不要有引号. 全称 var re=new RegExp(); //Reg是正则的简写，Exp是表达式的简写

一般情况下正则都采用简写的方式,当需要传参的时候才会采用全称的写法;

一.常用的新建正则的俩种方法

通过构造函数来创建:

let reg1 = new RegExp()

直接创建:

let reg2 = /^我是正则/;

二.正则中的元字符(重点)

元字符	含义
*	零次到多次
+	一次到多次
?	零到一次
{n}	n次
{n,}	n次以上
{n,m}	n到m次
\	转义字符
.	任意字符(除了\n(换行符))
\d	0-9之间的一个数字(包含0和9)
\D	除0-9之间的一个数字
\w	数字,字母,下划线中的任意一个字符
\s	一个空白字符(包含空格,制表符,换页符)
\t	一个制表符(一个tab键,四个空格)
\b	匹配一个单词的边界
x|y	x或y中的一个字符
[xyz]	x或y或z中的一个字符
[^xy]	除了x和y以外的任意一个字符
[a-z]	指定a-z这个范围的任意字符
[^a-z]	上一个的取反"非"
()	正则中的分组符号
(?:)	只匹配不捕获
(?=)	正向预查
(?!)	反向预查
^	以哪一个字符开头
$	以哪一个字符结尾

三.正则的修饰符

修饰符	含义
i	忽略大小写匹配
m	可以进行多行匹配
g	全局匹配
u	用来正确处理大于\uFFF的Unicode字符
y	粘连
s	让'.'能匹配任意字符,包含\n \r

四.正则的方法

1.test方法 : 在字符串中匹配正则是否存在 , 如果存在返回true, 如果不存在就返回false

var str = "How are you";

var box = /how/i;   修饰符i忽略大小写匹配
 
alert(box.test(str));

2.exec方法: 在字符串中匹配正则是否存在,如果存在返回一个数组,数组里面存放这匹配的内容,如果不存在,返回null

var str = "What are you doing";
var box = /what/i;

alert(box.exec(str).length);

五.正则的字符串函数

1.match: 在字符串中匹配这个正则是否存在,如果存在，返回一个数组，数组中包含匹配到的子串
如果不存在，返回null (字符串.match(正则))

var str = "how are Are ARE you";
var box = /are/ig;
            
alert(str.match(box)); //are,Are,ARE

2.search: 在字符串,查找正则表达式,第一次出现的位置,如果查找到，返回，查找到的下标 查找不到，返回-1 (字符串.search(正则) )

var str = "how ARE are you";
var box = /are/i;
            
alert(str.search(box)); //4

3.replace:在字符串中找到正则，并且将他替换成新字符串。返回替换成功的新字符串.(字符串.replace(正则, newStr))

var str = "how are Are ARE you";
            
var box = /are/ig;
            
var newStr = str.replace(box, "two");
            
alert(newStr); //how two two two you

4.split: 使用正则对字符串进行字符串分割 , 返回分割完的子串组成的数组。(字符串.split(正则))

var str = "how are Are ARE you";
            
var box = /are/i;
            
var arr = str.split(box);
            
alert(arr); //how , , , you

六.常见的正则表达式

1. 要求返回11位的数字,第一位的数字是1,第二位是数字3-9中的任意一位

/^1[3-9]\d{9}$/

2.验证是否为有效数字,开头可有有+- , 整数位:如果是一位数可以是0-9任意数;如果是多位数,首位不可以是0; 小数位: 如果有小数位,那么小数位后面至少有一位数字,也可以没有小数位

/^[+-]?(\d | [1-9]\d+)(\.\d+)?$/


分解:

^[+-]?     以+-开头, ?代表0位和1位, 代表+-可有可无

\d         代表当为一位数的时候可以是任意数

|          代表或

[1-9]\d+   代表当为多位数时第一位是1-9,后面是1位到很多位  ( + 代表1位以上)  

(\.\d+)?   \. 因为.本身属于元字符 所以需要\将.转意成普通字符. ()? 代表小数位可有可无     

3.qq号正则

//QQ号正则，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("927184040"));

4.微信号正则验证

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//输出 true
console.log(wxPattern.test("caixukun_com"));

5.中文正则验证

//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("肖战"));

6.Email正则

//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test(<a href="mailto:99154507@qq.com" rel="external nofollow">99154507@qq.com</a>));

---------------------------------------------------------------------------------------------------------------------------------

对于前端来说,对正则的要求其实没有特别的高,我们平时遇到一般都会选择复制现有的,避免自己写出现的错误, 如果小伙伴想成为爬虫大佬正则就得学好啦~

到此小编对于正则的整理就到这里啦 , 如果对小伙伴们有帮助就给小编点个双击么么哒~❤️