正则回顾总结|博客系列

# 一、简介

# 1.1 正则表达式的web常见场合

邮箱验证
用户名验证
替换字符串某一部分
信息采集用来分析有效的代码段

# 1.2 字符串应用正则

string.match(reg) 正则查找字符串
string.search(reg) 正则查找位置
string.replace(reg,'newstr')正则替换
string.split（reg）正则拆分

# 1.3 正则表达式3句话

# 1.3.1 要找什么字符？（5中方法）

字面值比如：hi就是找hi
字符的集合[abcd] 匹配abdc任意一个
用范围来表示字符[0-9] [a-z][A-Z]
字符簇就是系统为常用的字符集合创建的一个简写
- 例如：\d 表示[0-9] \w代表[0-9a-zA-Z_] \s代表[\t\v\f\r\n]（空白符）
补集的形式来表示字符集合
- 例如：[0-9] 补集 [^0-9]
- 对于字符簇只需把字母大写即可表示补集 \d -->\D（非数字） \w–>\W （代表a-z0-9A-Z之外的东西） \s -->\S(代表非空白字符)
点代表任意字符 (不包括换行符)

# 1.3.2 从哪里找,找到哪？

\b 单词边界 \bhi 从单词边界开始匹配hi
\B 单词的非边界把单词的中间某一部分取出来把中间含有hi的单词取出来即hi不能再两端
^ 从字符串的起始位置开始匹配
$ 匹配到字符串的额结束位置

# 1.3.3 找多少

*表示匹配0-无穷==等价(0,)
+表示匹配1-无穷 ==等价(1,)
?表示[0,1] == 等价(0,1)
a(n): 字符a准确出现n次
a(n,):字符a至少出现n次
a(n,m):n到m次

# 1.3 贪婪模式

个数修饰符默认是贪婪模式尽量多找
是指在上面的个数修饰符后面加?，则为非贪婪模式，尽量少的找

模式：

以匹配为例默认情况 match找到一次就结束能否告诉匹配过程一直找在全文范围内一直找
g 表示全局模式 global 找所有的而不是就找一行就结束
i ignore 忽略大小写
s 单行模式（把整篇文章看成一行）js不支持单行模式
m 多行模式

# 二、语法

# 2.1 基本元字符

. ：匹配除了换行符之外的任何单个字符
\ ：在非特殊字符之前的反斜杠表示下一个字符是特殊的
| ：逻辑或操作符
[] ：定义一个字符集合，匹配字符集合中的一个字符，在字符集合里面像 .，\这些字符都表示其本身
[^]：对上面一个集合取非
- ：定义一个区间，例如[A-Z]，其首尾字符在 ASCII 字符集里面

# 2.2 数量元字符

{m,n} ：匹配前面一个字符至少 m 次至多 n 次重复，还有{m}表示匹配 m 次，{m,}表示至少 m 次
+ ：匹配前面一个表达式一次或者多次，相当于{1,}，记忆方式追加(+)，起码得有一次
* ：匹配前面一个表达式零次或者多次，相当于{0,}，记忆方式乘法(*)，可以一次都没有
? ：单独使用匹配前面一个表达式零次或者一次，相当于 {0,1}

# 2.3 位置元字符

^ ：单独使用匹配表达式的开始
\$ ：匹配表达式的结束
\b：匹配单词边界
\B：匹配非单词边界
(?=p)：匹配 p 前面的位置
(?!p)：匹配不是 p 前面的位置

# 2.4 特殊元字符

\d：[0-9]，表示一位数字，记忆方式 digit
\D：[^0-9]，表示一位非数字
\s：[\t\v\n\r\f]，表示空白符，包括空格，水平制表符（\t），垂直制表符（\v），换行符（\n），回车符（\r），换页符（\f），记忆方式 space character
\S：[^\t\v\n\r\f]，表示非空白符
\w：[0-9a-zA-Z]，表示数字大小写字母和下划线，记忆方式 word
\W：[^0-9a-zA-Z]，表示非单词字符

# 2.5 标志字符

g : 全局搜索记忆方式global
i ：不区分大小写记忆方式 ignore
m ：多行搜索

# 三、match，test，exec，search的返回值

# 3.1 match的用法

在不加全局“g”的情况下

var str="wo shi zhong guo ren";

console.log(str.match(/o/));

// 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]；

@前端进阶之旅: 代码已经复制到剪贴板

在加全局“g”的情况下

var str="wo shi zhong guo ren";

console.log(str.match(/o/g));

返回的结果是：["o", "o", "o"]；

@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 exec的用法

var str="wo shi zhong guo ren";

var re=/o/;

console.log(re.exec(str));

// 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]；
// exec返回的和match不加全局“g”’一样

@前端进阶之旅: 代码已经复制到剪贴板

# 3.3 test的用法

var str="wo shi zhong guo ren";

var re=/o/;

console.log(re.test(str));

// 返回的结果是：true（如果找不到返回的则是false）

@前端进阶之旅: 代码已经复制到剪贴板

# 3.4 search的用法

关于search用法其实很简单，它和indexOf是一样的，就是找到index，而且是从前往后数的。

var str="wo shi zhong guo ren";
var re=/o/;

console.log(str.search(re));

返回的结果是：1；

@前端进阶之旅: 代码已经复制到剪贴板

# 四、应用

# 4.1 例1

在线演示 https://codepen.io/poetries/pen/xWMRxR

<html>
<head>
	<meta charset="UTF-8">
	<title>正则-例子1</title>
	<style type="text/css">
		textarea{
			width: 400px;
			height: 200px; 
		}
	</style>
</head>
<body>
	<textarea id='cont'></textarea>
	<p><input type="button" value="匹配hi" onclick="t1();"></p>
	<p><input type="button" value="正匹配单词hi" onclick="t2();"></p>
	<p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p>
	
	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /hi/;//仅仅是看字符串中有没有hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bhi\b/;//正则测试单词hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bhi\b/;//正则测试hi开头的单词但不是hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            } 
    </script>
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# 4.2 例2-要找什么字符串

在线演示 https://codepen.io/poetries/pen/oqmYNw

<html>
<head>
	<meta charset="UTF-8">
	<title>要找什么字符</title>

    <style type="text/css">
    	textarea{
    	width: 400px;
    	height: 200px; 
    	}
    </style>
</head>
<body>
	<textarea id='cont'></textarea>
	<p><input type="button" value="找不好的数字" onclick="t1();"></p>
	<p><input type="button" value="有没有数字" onclick="t2();"></p>
	<p><input type="button" value="有没有大写字母" onclick="t3();"></p>
	<p><input type="button" value="是否全为数字" onclick="t4();"></p>
	
	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[347]/;// 匹配347任意一个字符的集合[abcd] 匹配abdc任意一个
            	alert(reg.test(cv));
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	//var reg = /[0123456789]/;
            	//var reg = /[0-9]/;// 匹配有没有数字
            	var reg = /\d/;// \d 表示[0-9]
            	alert(reg.test(cv));
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[A-Z]/;// 匹配有没有数字
            	alert(reg.test(cv));
            }
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[^0-9]/;// 匹配非数字 0-9之外的字符  对于网上发布手机号之类的很有用 比如1300 把00换成OO 就没法认出
            	if(reg.test(cv)){
            		alert('有非数字存在');
            	}else{
            		alert('全是数字');
            	}
            }
	</script>
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# 4.3 例3-从哪里开始匹配

在线演示 https://codepen.io/poetries/pen/jzdVOo

# 一、简介

# 1.1 正则表达式的web常见场合

邮箱验证
用户名验证
替换字符串某一部分
信息采集用来分析有效的代码段

# 1.2 字符串应用正则

string.match(reg) 正则查找字符串
string.search(reg) 正则查找位置
string.replace(reg,'newstr')正则替换
string.split（reg）正则拆分

# 1.3 正则表达式3句话

# 1.3.1 要找什么字符？（5中方法）

字面值比如：hi就是找hi
字符的集合[abcd] 匹配abdc任意一个
用范围来表示字符[0-9] [a-z][A-Z]
字符簇就是系统为常用的字符集合创建的一个简写
- 例如：\d 表示[0-9] \w代表[0-9a-zA-Z_] \s代表[\t\v\f\r\n]（空白符）
补集的形式来表示字符集合
- 例如：[0-9] 补集 [^0-9]
- 对于字符簇只需把字母大写即可表示补集 \d -->\D（非数字） \w–>\W （代表a-z0-9A-Z之外的东西） \s -->\S(代表非空白字符)
点代表任意字符 (不包括换行符)

# 1.3.2 从哪里找,找到哪？

\b 单词边界 \bhi 从单词边界开始匹配hi
\B 单词的非边界把单词的中间某一部分取出来把中间含有hi的单词取出来即hi不能再两端
^ 从字符串的起始位置开始匹配
$ 匹配到字符串的额结束位置

# 1.3.3 找多少

*表示匹配0-无穷==等价(0,)
+表示匹配1-无穷 ==等价(1,)
?表示[0,1] == 等价(0,1)
a(n): 字符a准确出现n次
a(n,):字符a至少出现n次
a(n,m):n到m次

# 1.3 贪婪模式

个数修饰符默认是贪婪模式尽量多找
是指在上面的个数修饰符后面加?，则为非贪婪模式，尽量少的找

模式：

以匹配为例默认情况 match找到一次就结束能否告诉匹配过程一直找在全文范围内一直找
g 表示全局模式 global 找所有的而不是就找一行就结束
i ignore 忽略大小写
s 单行模式（把整篇文章看成一行）js不支持单行模式
m 多行模式

# 二、语法

# 2.1 基本元字符

. ：匹配除了换行符之外的任何单个字符
\ ：在非特殊字符之前的反斜杠表示下一个字符是特殊的
| ：逻辑或操作符
[] ：定义一个字符集合，匹配字符集合中的一个字符，在字符集合里面像 .，\这些字符都表示其本身
[^]：对上面一个集合取非
- ：定义一个区间，例如[A-Z]，其首尾字符在 ASCII 字符集里面

# 2.2 数量元字符

{m,n} ：匹配前面一个字符至少 m 次至多 n 次重复，还有{m}表示匹配 m 次，{m,}表示至少 m 次
+ ：匹配前面一个表达式一次或者多次，相当于{1,}，记忆方式追加(+)，起码得有一次
* ：匹配前面一个表达式零次或者多次，相当于{0,}，记忆方式乘法(*)，可以一次都没有
? ：单独使用匹配前面一个表达式零次或者一次，相当于 {0,1}

# 2.3 位置元字符

^ ：单独使用匹配表达式的开始
\$ ：匹配表达式的结束
\b：匹配单词边界
\B：匹配非单词边界
(?=p)：匹配 p 前面的位置
(?!p)：匹配不是 p 前面的位置

# 2.4 特殊元字符

\d：[0-9]，表示一位数字，记忆方式 digit
\D：[^0-9]，表示一位非数字
\s：[\t\v\n\r\f]，表示空白符，包括空格，水平制表符（\t），垂直制表符（\v），换行符（\n），回车符（\r），换页符（\f），记忆方式 space character
\S：[^\t\v\n\r\f]，表示非空白符
\w：[0-9a-zA-Z]，表示数字大小写字母和下划线，记忆方式 word
\W：[^0-9a-zA-Z]，表示非单词字符

# 2.5 标志字符

g : 全局搜索记忆方式global
i ：不区分大小写记忆方式 ignore
m ：多行搜索

# 三、match，test，exec，search的返回值

# 3.1 match的用法

在不加全局“g”的情况下

var str="wo shi zhong guo ren";

console.log(str.match(/o/));

// 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]；

@前端进阶之旅: 代码已经复制到剪贴板

在加全局“g”的情况下

var str="wo shi zhong guo ren";

console.log(str.match(/o/g));

返回的结果是：["o", "o", "o"]；

@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 exec的用法

var str="wo shi zhong guo ren";

var re=/o/;

console.log(re.exec(str));

// 返回的结果是：["o", index: 1, input: "wo shi zhong guo ren"]；
// exec返回的和match不加全局“g”’一样

@前端进阶之旅: 代码已经复制到剪贴板

# 3.3 test的用法

var str="wo shi zhong guo ren";

var re=/o/;

console.log(re.test(str));

// 返回的结果是：true（如果找不到返回的则是false）

@前端进阶之旅: 代码已经复制到剪贴板

# 3.4 search的用法

关于search用法其实很简单，它和indexOf是一样的，就是找到index，而且是从前往后数的。

var str="wo shi zhong guo ren";
var re=/o/;

console.log(str.search(re));

返回的结果是：1；

@前端进阶之旅: 代码已经复制到剪贴板

# 四、应用

# 4.1 例1

在线演示 https://codepen.io/poetries/pen/xWMRxR

<html>
<head>
	<meta charset="UTF-8">
	<title>正则-例子1</title>
	<style type="text/css">
		textarea{
			width: 400px;
			height: 200px; 
		}
	</style>
</head>
<body>
	<textarea id='cont'></textarea>
	<p><input type="button" value="匹配hi" onclick="t1();"></p>
	<p><input type="button" value="正匹配单词hi" onclick="t2();"></p>
	<p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p>
	
	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /hi/;//仅仅是看字符串中有没有hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bhi\b/;//正则测试单词hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bhi\b/;//正则测试hi开头的单词但不是hi
            	alert(reg.test(cv));//满足 返回true  不满足 返回false
            } 
    </script>
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# 4.2 例2-要找什么字符串

在线演示 https://codepen.io/poetries/pen/oqmYNw

<html>
<head>
	<meta charset="UTF-8">
	<title>要找什么字符</title>

    <style type="text/css">
    	textarea{
    	width: 400px;
    	height: 200px; 
    	}
    </style>
</head>
<body>
	<textarea id='cont'></textarea>
	<p><input type="button" value="找不好的数字" onclick="t1();"></p>
	<p><input type="button" value="有没有数字" onclick="t2();"></p>
	<p><input type="button" value="有没有大写字母" onclick="t3();"></p>
	<p><input type="button" value="是否全为数字" onclick="t4();"></p>
	
	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[347]/;// 匹配347任意一个字符的集合[abcd] 匹配abdc任意一个
            	alert(reg.test(cv));
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	//var reg = /[0123456789]/;
            	//var reg = /[0-9]/;// 匹配有没有数字
            	var reg = /\d/;// \d 表示[0-9]
            	alert(reg.test(cv));
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[A-Z]/;// 匹配有没有数字
            	alert(reg.test(cv));
            }
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[^0-9]/;// 匹配非数字 0-9之外的字符  对于网上发布手机号之类的很有用 比如1300 把00换成OO 就没法认出
            	if(reg.test(cv)){
            		alert('有非数字存在');
            	}else{
            		alert('全是数字');
            	}
            }
	</script>
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# 4.3 例3-从哪里开始匹配

在线演示 https://codepen.io/poetries/pen/jzdVOo