前端点滴（JS基础）（四）---- RegExp 对象

最新推荐文章于 2024-04-06 11:11:17 发布

全干丶

最新推荐文章于 2024-04-06 11:11:17 发布

阅读量436

点赞数

分类专栏：前端总结文章标签： javascript 前端

本文链接：https://blog.csdn.net/Errrl/article/details/103880657

版权

前端总结专栏收录该内容

27 篇文章 1 订阅

订阅专栏

前端点滴（JS基础）（四）----倾尽所有

JavaScript 内置对象（三）
- RegExp 对象

JavaScript 内置对象（三）

RegExp 对象

正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

1. RegExp 对象实例

var patt=new RegExp(pattern,modifiers);
//或者更简单的方式:
var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

var re = new RegExp("\\w+");
var re = /\w+/;

2. RegExp 对象—— modifiers（修饰符）

修饰符用于执行区分大小写和全局匹配：

（1）i 执行对大小写不敏感的匹配。

/* 以String对象方法 match() 查询与正则匹对的字符串为例 */
var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /myblog/i;
var res = str.match(rex);
console.log(res);  //=> ["MyBlog"]

（2）g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

/* 以String对象方法 match() 全局查询与正则匹对的字符串为例 */
var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /myblog/g;
var res = str.match(rex);
console.log(res);  //=> ["myblog"]

（3）m 执行多行匹配。

/* 以String对象方法 match() 多行查询与正则匹对的字符串为例 */
/* \n为换行符 */
var str = "Visit MyBlog,visit\n myblog";
/* 定义正则表达式 */
var rex = new RegExp('myblog','m');
var res = str.match(rex);
console.log(res);  //=> ["myblog"]

3. RegExp 对象—— pattern（模式）

表示/ /内正则表达式的定义

（1）RegExp 对象方括号

1. [abc] 查找方括号之间的任何字符。

实例一：

/* 以String对象方法 match() 全局查询与正则匹对的字符串为例 */
var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /[a-d]/g;
var res = str.match(rex);
console.log(res);  //=> ["b"]

表示在字符串中查找 a-d 间的字符，包括 a 和 d 。
Visit MyBlog,visit myblog

实例二：

/* 以String对象方法 match() 全局查询与正则匹对的字符串为例 */
var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /[abcdefghijklmn]/g;   // 实际上就是[a-n]
var res = str.match(rex);
console.log(res);  //=> ["i", "i", "l", "g", "i", "i", "m", "b", "l", "g"]

Visit MyBlog,visitmyblog

2. [ ^ abc] 查找任何不在方括号之间的字符。

实例：

var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /[^a-d]/g;
var res = str.match(rex);
console.log(res);  //=>  ["V", "i", "s", "i", "t", " ", "M", "y", "B", "l", "o", "g", ",", "v", "i", "s", "i", "t", " ", "m", "y", "l", "o", "g"]

表示在字符串中查找 a-d 间的字符，包括 a 和 d 。
Visit MyBlog,visit my b log

注意： 符号也算是字符。

3. 常规的方括号[A-Z]、[a-z]、[0-9]、[A-z]

[A-Z] 实例：

var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /[A-Z]/g;
var res = str.match(rex);
console.log(res);   //=> ["V",  "M", "B"]

V isit M y B log,visit myblog

[a-z] 实例：

var str = "Visit MyBlog,visit myblog";
/* 定义正则表达式 */
var rex = /[a-z]/g;
var res = str.match(rex);
console.log(res);   //=> ["V",  "M", "B"]

Visit M y B log,visit myblog

[0-9] 实例：

var str = "Visit MyBlog,visit myblog11";
/* 定义正则表达式 */
var rex = /[0-9]/g;
var res = str.match(rex);
console.log(res);    //=> ["1",  "1"]

Visit MyBlog,visit myblog11

[A-z] 实例：

var str = "Visit MyBlog,visit myblog11";
/* 定义正则表达式 */
var rex = /[A-z]/g;
var res = str.match(rex);
console.log(res);    //=> ["V", "i", "s", "i", "t", "M", "y", "B", "l", "o", "g", "v", "i", "s", "i", "t", "m", "y", "b", "l", "o", "g"]

Visit MyBlog,visit myblog 11

（2）RegExp 对象元字符

元字符（Metacharacter）是拥有特殊含义的字符

1. . 查找单个字符，除了换行和行结束符。javascript

var str = "Visit MyBlog,visit myblog,b\ng";
/* 定义正则表达式 */
var rex = /l.g/g;
var res = str.match(rex);
console.log(res);   //=> ["log", "log"]

2. \w 查找单词字符。

/* 查找单词字符 */
var str = "Visit MyBlog,visit myblog,b\ng";
/* 定义正则表达式 */
var rex = /\w/g;
var res = str.match(rex);
console.log(res);   //=> ["V", "i", "s", "i", "t", "M", "y", "B", "l", "o", "g", "v", "i", "s", "i", "t", "m", "y", "b", "l", "o", "g", "b", "g"]

/* 查找非单词字符 */
var str = "Visit MyBlog,visit myblog,b\ng";
/* 定义正则表达式 */
var rex = /[^\w]/g;
var res = str.match(rex);
console.log(res);  //=> [" ", ",", " ", ",", "
"]

3. \W 查找非单词字符。

/* 查找非单词字符 */
var str = "Visit MyBlog,visit myblog,b\ng";
/* 定义正则表达式 */
var rex = /\W/g;
var res = str.match(rex);
console.log(res);  //=> [" ", ",", " ", ",", "
"]

4. \d 查找数字。

/* 查找数字 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /\d/g;
var res = str.match(rex);
console.log(res);    //=> ["1","2","3"]

/* 查找非数字 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /[^\d]/g;
var res = str.match(rex);
console.log(res);   //=>  ["V", "i", "s", "i", "t", " ", "M", "y", "B", "l", "o", "g", ",", "v", "i", "s", "i", "t", " ", "m", "y", "b", "l", "o", "g", ",", "b", "
", "g"]

5. \D 查找非数字字符。

/* 查找非数字 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /\D/g;
var res = str.match(rex);
console.log(res);   //=>  ["V", "i", "s", "i", "t", " ", "M", "y", "B", "l", "o", "g", ",", "v", "i", "s", "i", "t", " ", "m", "y", "b", "l", "o", "g", ",", "b", "
", "g"]

6. \s 查找空白字符。

/* 查找空白字符 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /\s/g;
var res = str.match(rex);
console.log(res);   //=> [" ", " ", "
"]

/* 查找非空白字符 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /[^\s]/g;
var res = str.match(rex);
console.log(res);   //=> ["V", "i", "s", "i", "t", "M", "y", "B", "l", "o", "g", ",", "v", "i", "s", "i", "t", "m", "y", "b", "l", "o", "g", ",", "b", "g", "1", "2", "3"]

注意： 换行后也会存在空白字符

7. \S 查找非空白字符。

/* 查找非空白字符 */
var str = "Visit MyBlog,visit myblog,b\ng123";
/* 定义正则表达式 */
var rex = /\S/g;
var res = str.match(rex);
console.log(res);   //=> ["V", "i", "s", "i", "t", "M", "y", "B", "l", "o", "g", ",", "v", "i", "s", "i", "t", "m", "y", "b", "l", "o", "g", ",", "b", "g", "1", "2", "3"]

8. \b 匹配单词边界。

/* 匹配单词边界 */
/* 匹配 blog 为边界的字符串 */
var str = "Visit MyBlog,visit myblog,blo\ng123";
/* 定义正则表达式 */
var rex = /\bblog/g;
var res = str.match(rex);
console.log(res);  //=>  null

9. \B 匹配非单词边界。

/* 匹配非单词边界 */
/* 匹配非 blog 为边界的字符串 */
var str = "Visit MyBlog,visit myblog,blo\ng123";
/* 定义正则表达式 */
var rex = /\Bblog/g;
var res = str.match(rex);
console.log(res);  //=>  ["blog"]

Visit MyBlog,visit myblog,blo\ng123

注意： 对字符串中不位于单词开头或结尾的 “blog” 进行全局搜索

（2）RegExp 对象量词

1. n+ 匹配任何包含至少一个 n 的字符串。

var str="Hellooo World! Hello MyBloog!"; 
var rex =/o+/g;
var res = str.match(rex);
console.log(res);  //=>  ["ooo", "o", "o", "oo"]

注意： 包含一个。

/* 匹配所有字符，不包活符号，空白字符 */
var str="Hellooo World! Hello MyBlog!"; 
var rex =/\w+/g;
var res = str.match(rex);
console.log(res);  //=>  ["Hellooo", "World", "Hello", "MyBlog"]

2. n* 匹配任何包含零个或多个 n 的字符串。

var str="Hellooo World! Hello MyBloog!"; 
var rex =/lo*/g;
var res = str.match(rex);
console.log(res);  //=> ["l", "looo", "l", "l", "lo", "loo"]

解释说明：只要匹配到 l 开头，存不存 o ，存在多少个 o 无关紧要。

3. n? 匹配任何包含零个或一个 n 的字符串。

var str="Hellooo World! Hello MyBloog!"; 
var rex =/lo?/g;
var res = str.match(rex);
console.log(res);  //=>  ["l", "lo", "l", "l", "lo", "lo"]

解释说明：只要匹配到 l 开头，后面可以跟着至多一个 o，也可以没有。

4. n{X} 匹配包含 X 个 n 的序列的字符串。

/* 匹配包含三个 o 的字符串 */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/o{3}/g;
var res = str.match(rex);
console.log(res);  //=>  ["ooo"]

/* 匹配三位数字 */
var str  = "100,200,1000,10000";
var rex =/\d{3}/g;
var res = str.match(rex);
console.log(res);  //=>  ["100", "200", "100", "100"]

注意： 换行过后会产生空白字符串。

5. n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。

/* 匹配 o 两个或以上的字符串 */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/o{2,}/g;
var res = str.match(rex);
console.log(res);  //=>  ["ooo", "oo"]

/* 匹配三位或以上数字 */
var str  = "100,200,1000,10000";
var rex =/\d{3,}/g;
var res = str.match(rex);
console.log(res);  //=>  ["100", "200", "1000", "10000"]

6. n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。

/* 匹配 1 位到 4 位数数字 ，包含 1 ，4 位*/
var str  = "100,200,1000,10000";
var rex =/\d{1,4}/g;
var res = str.match(rex);
console.log(res);   //=>  ["100", "200", "1000", "1000", "0"]

7. n$ 匹配任何结尾为 n 的字符串

/* 匹配结尾为空的字符串 */
var str="Hellooo World! Hello MyBloo\nog!          "; 
var rex =/\s$/g;
var res = str.match(rex);
console.log(res);   //=> [" "]

/* 匹配结尾为 ! 的字符串 */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/!$/g;
var res = str.match(rex);
console.log(res);   //=>  ["!"]

8. ^n 匹配任何开头为 n 的字符串。

/* 匹配开头为空的字符串 */
var str="        Hellooo World! Hello MyBloo\nog!"; 
var rex =/^\s/g;
var res = str.match(rex);
console.log(res);   //=> [" "]

/* 匹配开头为 H 的字符串 */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/^H/g;
var res = str.match(rex);
console.log(res);   //=>  ["H"]

9. ?=n 匹配任何其后紧接指定字符串 n 的字符串。

/* 匹配后面跟着 o 的 l */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/l(?=o)/g;
var res = str.match(rex);
console.log(res);   //=>  ["l", "l", "l"]

10. ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

/* 匹配后面没有跟着 o 的 l */
var str="Hellooo World! Hello MyBloo\nog!"; 
var rex =/l(?!o)/g;
var res = str.match(rex);
console.log(res);   //=>  ["l", "l", "l"]

4. 支持正则表达式的 String 对象的方法

1. String 对象中的search() 方法

检索与正则表达式相匹配的值。返回值是首次匹对成功的 index（下标）

2. String 对象中的match() 方法

找到一个或多个正则表达式的匹配。返回值是具有一个或多个匹对成功的元素组成的数组。

3. String 对象中的replace() 方法

替换与正则表达式匹配的子串。默认情况下（非使用正则表达式）只替换一次最先配对成功的字符串。使用正则表达式后可以实现多次（前提还是得配对成功）。返回的是一个全新的字符串，因此不会改变原有的字符串。

4. String 对象中的split() 方法

因为在String 对象中split() 方法可以使用一个字符作为分隔符，所以可以使用正则表达式进行字符的配对。返回的是一个字符串数组。

5. RegExp 对象方法

1. global 判断是否设置了 “g” 修饰符

语法：RegExpObject.global

定义：
global 属性用于返回正则表达式是否具有 “g” 。
如果 g 标志被设置，则该属性为 true，否则为 false。

实例：

var str="Visit MyBlog!";
var rex =/\s/g;
if(rex.global){
    console.log("g 模式有设置!");
}
else{
	console.log("g 模式没有设置!");
}

输出：“g 模式有设置!”

2. ignoreCase 判断是否设置了 “i” 修饰符

语法：RegExpObject.ignoreCase

定义：
ignoreCase 属性用于返回正则表达式是否具有 “i” 。
如果 i 标志被设置，则该属性为 true，否则为 false。

实例：

var str="Visit MyBlog!";
var rex =/myblog/i;
if(rex.ignoreCase){
    console.log("i 模式有设置!");
}
else{
	console.log("i 模式没有设置!");
}

输出：“i 模式有设置!”

3. multiline 判断是否设置了 “m” 修饰符

语法：RegExpObject.multiline

定义：
multiline 属性用于返回正则表达式是否具有 “m” 。
如果 m 标志被设置，则该属性为 true，否则为 false。

实例：

var str="Visit MyBlog\nmyblog!";
var rex =/myblog/m;
if(rex.multiline){
    console.log("m 模式有设置!");
}
else{
	console.log("m 模式没有设置!");
}

输出：“m 模式有设置!”

4. source 返回正则表达式的匹配模式

语法：RegExpObject.source

定义：
source 属性用于返回模式匹配所用的文本。

实例：

var str="Visit MyBlog\nmyblog!";
var rex =/\s/g;
console.log(rex.source);   //=>  "\s"

5. lastIndex 用于规定下次匹配的起始位置

语法：RegExpObject.lastIndex

定义：
lastIndex 属性用于规定下次匹配的起始位置。

注意： 该属性只有设置标志 g 才能使用。

上次匹配的结果是由方法 RegExp.exec() 和 RegExp.test() 找到的，它们都以 lastIndex 属性所指的位置作为下次检索的起始点。这样，就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本。

注意： 该属性是可读可写的。只要目标字符串的下一次搜索开始，就可以对它进行设置。当方法 exec() 或 test() 再也找不到可以匹配的文本时，它们会自动把 lastIndex 属性重置为 0。
注意： 返回值是匹对成功后的末尾 index+1。

实例：

var str="The rain in Spain stays mainly in the plain";
var rex =/ain/g;
 /* 循环遍历 */
while (rex.test(str)==true) {
    console.log("'ain' found. Index now at: "+patt1.lastIndex);
}

输出结果：
在这里插入图片描述

6. RegExp 对象属性

1. test 检索字符串中指定的值。返回 true 或 false。

语法：RegExpObject.test(string)

定义：
test() 方法用于检测一个字符串是否匹配某个模式.
如果字符串中有匹配的值返回 true ，否则返回 false。

实例：

var str="The rain in Spain stays mainly in the plain";
var rex =/ain/g;
console.log(rex.test(str));  //=> true

2. exec 检索字符串中指定的值。返回找到的值，并确定其位置。

语法：RegExpObject.exec(string)

定义：
exec() 方法用于检测一个字符串是否匹配某个模式。返回值只有一个元素组成的数组。
如果字符串中有匹配的值返回该值，否则返回 null。

实例：

var str="The rain in Spain stays mainly in the plain";
var rex =/ain/g;
console.log(rex.exec(str));   //=> ["ain"]

总结

正则表达式通常是一种组合形式（不同的组合有不同的表现），明白正则表达式的的定义方法很关键，常会结合于String对象方法的使用。
比如说：

/* 用户名的验证 */

/* *
* 要求：
* 1，不能纯字母
* 2，开头不能是数字
* 3，长度范围5-9
* 4，没有符号
*/
/* 正则表达式 */

/(?!^[A-z]+$)^[A-z][A-z0-9]{4,8}$/g


/* 验证手机格式 */
/**
*要求：
*1，1开头
*2，厂商代号
*3，11位数全数字
*/
/* 正则表达式 */

/^1(56|59|50|57|36|89|58)\d{8}$/g


/* 验证邮箱格式 */
/**
*要求：
*1，@ 前6-14位数字与字母的组合，允许有符号比如 . - 等合法符号至多2个，@前一位不能是符号
*2，@ 后直接跟.com，也可以163.com，也可以163.com.cn
*/
/* 正则表达式 */

/^[A-z0-9][\w\.\-]{2}[A-z0-9]{3-11}@[a-z0-9]+(\.[A-z]+)+/g