JavaScript学习笔记（十一）——正则表达式

最新推荐文章于 2024-04-28 18:31:02 发布

小狐狸ya

最新推荐文章于 2024-04-28 18:31:02 发布

阅读量449

点赞数

文章标签：正则表达式 javascript 学习

本文链接：https://blog.csdn.net/qq_56607109/article/details/125331588

版权

本文详细介绍了JavaScript中的正则表达式，包括语法规则、创建方式、方括号用法、匹配方法、元字符、量词、正则实例属性、贪婪与非贪婪匹配，以及在实际应用中的示例，帮助读者掌握正则表达式的核心概念和用法。

摘要由CSDN通过智能技术生成

文章目录

- 正则表达式
- - 语法规则

正则表达式

什么是正则表达式？

正则表达式RegExp(Regular Expression)：匹配特殊字符或有特殊搭配原则的字符的最佳选择，也就是说他是属于字符串的相关操作。

首先我们要知道：

转义字符\，在反斜杠\后边放的紧挨着得字符被强制转化成文本

eg:
	\"   实现在双引号里再放双引号
	\r   行结束符,即回车
	\t   制表符，键盘得tab键

多行字符串

eg:	
	\    还可以转义回车（换行）符号，实现js语法上的多行字符串

换行的转义字符
```
eg：	
	\n   实现换行
```

语法规则

1、三个属性i，g，m

修饰符	功能描述
i	不区分大小写的匹配
g	全局匹配（查找所有匹配的，而不是在匹配第一个之后就结束）
m	多行匹配

例子说明：

i：不区分大小写的匹配

var  reg=/abce/i;
var  str="ABCEd";
var re = reg.test(str);
console.log(re);   //true

g：全局匹配（查找所有匹配的，而不是在匹配第一个之后就结束）

var reg=/ab/;
var str="ababababab";
str.match(reg);//["ab"]，只查找到第一个匹配值便返回
reg=/ab/g;
str.match(reg);//["ab","ab","ab","ab","ab"]，全局查找，把所有匹配值均返回

m：多行匹配

var reg = /a/;
str = "abcde\na";
var re1=str.match(reg); 
console.log(re1); //["a"]，还没有多行匹配属性

reg = /^a/gm; //全局多行匹配
var re2 = str.match(reg);
console.log(re2); //["a","a"]

2、创建方式

正则表达式有两种创建方式：

直接量和构造方法RegExp( )

直接量

本身是一个对象，是一种规则

在两个斜杠中间写规则。

var  reg=/abc/;
var  str="abcd";
reg.test(str)  ;	//test，检查在字符串str中有没有符合reg规则得字符

在正则表达式得双斜杠后边还可以加字母i、g、m，表达其属性。
```
var  reg=/abce/i;
var  str="ABCEd";
reg.test(str)  ; //true
```

构造方法RegExp( )

使用new操作符，new RegExp();

var reg=new RegExp("abc");
var str="abcd";
reg.test(str);

在new RegExp(“abc”)函数里边也可以添加属性i、g、m

var reg=new RegExp("abc","im");//在括号后面用，隔开并且用引号引起来
var str="abcd";
reg.test(str);  //true

若去除new操作符，将已经存在的正则表达式用来给函数RegExp()传参，只是传递引用，不能构建新的正则表达式，极少的用法。

//reg与reg1只是对同一个正则表达式的引用
//eg：
var reg=/abce/m;
var reg1=RegExp(reg);
reg.abc=3;
console.log(reg1.abc);//3

3、方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找反括号之间的任意字符
[0-9]	查找任何从0到9的数字
(x\|y)	查找任何以\|分割的选项
^	插入符^放到[]里边表示"非"的意思
\|	在括号里加入"\|"表示或的意思，“\|”两边放匹配规则

简单理解就是：一个中括号代表一位，中括号里边的内容代表的是这一位可以取值的范围

var reg=/[ab][cd][d]/g;  //全局匹配三位数，第一位取值范围为ab，第二位取值范围为cd之间任意一个，第三位为d。
var str="abcd";
str.match(reg); //['bcd']

再来看个例子：

var reg=/[0-9A-Za-z][cd][d]/g;//相当于var reg=/[0-9A-z][cd][d]/g
var str="ab1cd"; 
str.match(reg);//['1cd']  匹配三位数，第一位范围为0到9的数字或者大小写字母，第二位范围为cd中任意一个，第三位为d 。

插入符 ^ 放到[]里边表示"非"的意思

例子：

var reg=/[^a][^b]/g;//插入符^放到[]里边表示"非"的意思
var str="ab1cd";
str.match(reg);  //['b1', 'cd']

在括号里可以加入"|“表示"或"的意思，”|"操作符两边放匹配规则

	var reg=/(abc|bcd)/g;
	var str="abc";
	str.match(reg);//["abc"];//该规则既能匹配出字符串"abc"

	str="bcd";
	str.match(reg);//["bcd"];//该规则又能匹配出字符串"bcd"
	reg=/(abc|bcd)[0-9]/g;  //匹配规则可以任意组合
	str="bcd2";
	str.match(reg); //['bcd2']

4、三种检测匹配方法

检测字符串中符合正则表达式规则常用的三方法test( )、exec( )和match( )。

test( ):

语法：正则表达式规则.test(字符串)；返回值为布尔值：true / false
```
var  reg=/abce/i;
var  str="ABCEd";
reg.test(str)  ;
```

match( )：

语法：字符串.match(正则表达式规则)；以数组形式返回匹配的值

var  reg=/[1234567890][1234567890][1234567890]/g;
var  str="12309u98723zpoixcuypiouqwer";
str.match(reg);  //['123', '987']

exec( ):

语法：正则表达式规则.exec(字符串); 以数组的形式返回匹配的值

var reg = /[1234567890][1234567890][1234567890]/g;
var str = "12309u98723zpoixcuypiouqwer";
console.log(reg.exec(str));  //['123']

此外还有方法可以实现字符串匹配：

方法	描述
search	检索与正则表达式相匹配的值，返回匹配字符串的位置
match	找到一个或多个正则表达式的匹配
replace	替换与正则表达式匹配的字串
split	把字符串分割为字符串数组

5、元字符

元字符是拥有特殊含义的字符，元字符也可以组合放进中括号里去使用，一个元字符代表一位(\d|\D)

元字符	描述
\w --word	查找单词字符(字母+数字+下划线)
\W	查找非单词字符==[^\w]
\d --data	查找数字
\D	查找非数字字符
\s --space	查找空白字符
\S	查找非空白字符
\b --border	匹配单词边界 “today is friday”
\B	匹配非单词边界
\t	查找制表符
\r	回车符
\n	查找换行符
\f	查找换页符
\v	查找垂直制表符
\uXXXX	查找以十六进制规定的Unicode字符借助“Unicode在线编码转换器
. --必记	（点号）查找单个字符，除了换行和行结束符

unicode编码，\uXXXXXX，一般为6位16进制码

不需要记住哪个字符对应是哪个Unicode编码，要用到的时候可借助“Unicode在线编码转换器”

在这里插入图片描述

“\s”---->匹配空白字符
空白字符包括：空格符[ ]、制表符\t、回车符\r、换行符\n、垂直换行符\v、换页符\f

“\b”---->匹配单词边界（border）

	var reg=/\bcde/g;//单词边界前边是cde字符串
	var str="abc cde fgh";
	str.match(reg);  //['cde']

“\t”---->匹配制表符

//eg：
	var reg=/\tc/g;
	var str="ab		cde";//c字母前有一个tab键
	str.match(reg);//  null，无法匹配视觉效果上的一个tab

	str="ab\tcde";	
	str.match(reg);//["	c"]
	//即"\t"只能匹配字符"\t"，控制台对\t的打印以转义序列制表符"\t"的方式打印
	//所以最后结果是["	c"]
	

	//其他"\n"、"\f"、"\v"类似于"\t"的使用
	//"."---->[^/r/n]，匹配"非"行结束符和换行符

6、量词

量词，代表数量的词（下面表达式的n代表的是一个匹配规则，n后边符号的符号定义量词规则）。

量词	描述
n+	匹配任何包含至少一个n的字符串
n*	匹配任何包含零个或多个n的字符串
n？	匹配任何包含零个或一个n的字符串
n{X}	匹配包含X 个n 的序列的字符串十个单词：/\w{10}/
n{X,Y}	匹配任何包含X 个至Y 个n 的序列的字符串 /\w{6,16}/
n{X,}	匹配包含至少X 个n 的序列的字符串
n$	匹配任何结尾为n 的字符串
^n	匹配任何开头为n 的字符串
S(?=n)	匹配任何其后紧接指定字符串n 的字符串S abc(?=d)：abc后面紧接d
S(?!n)	匹配任何其后没有紧接指定字符串n 的字符串S abc(?!d)

S(?=n)：匹配任何其后紧接指定字符串n 的字符串S

var reg = /abc(?=d)/g;
var str = "abcdecde   abcd"; 
console.log(str.match(reg)); //['abc', 'abc']

S(?!n):匹配任何其后没有紧接指定字符串n 的字符串S

var reg = /abc(?!d)/g;
var str = "abcdecde   abcd"; 
console.log(str.match(reg)); //null  没有找到

7、正则实例属性

1、ignoreCase 是否设置了i

2、global 是否设置了g

3、multiline 是否设置了m

4、source 字面量形式对应的字符串

5、lastIndex 开始搜索下一个匹配项的字符位置，默认0

var reg=/^\d[\s\S]*\d$/g;
reg.ignoreCase;//false，检测是否含有i 属性

reg.global;//true，检测是否含有g 属性

reg.multiline;//false，检测是否含有m 属性

reg.source;//"^\d[\s\S]*\d$"，匹配内容体

补充：“\num” 反向引用，指的是要引用的第num个括号里的表达式值

var str="aaaa";
var reg=/(\w)\1/g;//括号"()"后边的"\1"为反向引用第一个括号的值
reg=/(\w)\1\1\1/g;//3个"\1"代表后边还要引用第一个括号里的值3次

8、贪婪匹配与非贪婪匹配

贪婪匹配即照着**“量词”**规则中要求的更多个的情况去做匹配

	var str="aaaaa";
	var reg=/a+/g;
	str.match(reg);//["aaaaa"]

非贪婪匹配，在**“量词”**规则后边多加一个问号"?"

	var str="aaaaa";
	var reg=/a+?/g;
	str.match(reg);//["a","a","a","a","a"]

	var str="aaaaa";
	var reg=/a??/g;//第一个问号代表0~1个，第二个问号代表能取0就不取1去做匹配
	str.match(reg);//["","","","","",""]

	//实用：匹配用双大括号括起来的字符
	var l=/\{\{(.+)\}\}/g;
    var r=/\{\{(.+?)\}\}/g;
    var str=`{{name}}--{{msg}}`
    
    str.match(l);//["{{name}}--{{msg}}"]
	str.match(r);//["{{name}}", "{{msg}}"]

学习了正则表达式后，我们可以很容易就实现以下功能的描述：

是否带有小数
```
var objRegExp= /^\d+\.\d+$/;
```
校验是否中文名称组成
```
var reg=/^[\u4E00-\u9FA5]{2,4}$/;
```
校验是否全由8位数字组成
```
var reg=/^[0-9]{8}$/;
```

校验电话码格式

var reg= /^((0\d{2,3}-\d{7,8})|(1[35847]\d{9}))$/;

校验邮件地址是否合法

9391493618639@qq.com

var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;