正则回顾总结

一、简介

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

<html>
<head>
	<meta charset="UTF-8">
	<title>74-从哪里开始匹配</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开头及hi开头的单词" onclick="t2();"></p>
	<p><input type="button" value="匹配hi开头的单词但不是hi" onclick="t3();"></p>
	<p><input type="button" value="匹配进行时的单词" onclick="t4();"></p>
	<p><input type="button" value="匹配un前缀的反义词" onclick="t5();"></p>
	<p><input type="button" value="匹配单词中间的hi部分" onclick="t6();"></p>
	<p><input type="button" value="匹配输入的名字是不是lisi" onclick="t7();"></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.+/;// 错误1 匹配hi开头的单词
            	////var reg = /\bhi\w+/;// 错误2
            	var reg = /\bhi\w*/; 
            	alert(reg.exec(cv));//exec返回一个对象  没找到返回none
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bhi/;//正则测试hi开头的单词但不是hi
            	alert(reg.exec(cv));//exec返回一个对象  没找到返回none
            } 
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\b[\w]+ing\b/;//*表示匹配0-无穷  +表示匹配1-无穷
            	alert(reg.exec(cv));
            } 
            function t5(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bun[\w]+\b/;//匹配un前缀的反义词
            	alert(reg.exec(cv));
            }
            function t6(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\Bhi\B/;//匹配单词中间的hi部分
            	alert(reg.exec(cv));
            }
            function t7(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /^lisi$/;//匹配输入的名字是不是lisi
            	alert(reg.exec(cv));
            }
	</script>
</body>
</html>

4.4 例4 正则应用字符串

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

<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="查找中间含有hi的单词" onclick="t1();"></p>
	<p><input type="button" value="查找所有中间含有hi的单词" onclick="t2();"></p>
	<p><input type="button" value="查找所有中间含有hi的单词，不区分大小写" onclick="t3();"></p>
	<p><input type="button" value="替换JavaScript标签" onclick="t4();"></p>
	<p><input type="button" value="把连接换成空连接" onclick="t5();"></p>
	<p><input type="button" value="把每一行的结尾的数字换成#" onclick="t6();"></p>
	<p><input type="button" value="替换goods中多余的O" onclick="t7();"></p>

    <script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\Bhi\B/;//查找中间含有hi的单词
            	alert(cv.match(reg));
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\Bhi\B/g;//查找所有中间含有hi的单词
            	alert(cv.match(reg));
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\Bhi\B/gi;//查找所有中间含有hi的单词  g是全局 i ignore 忽略大小写
            	alert(cv.match(reg));
            }
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var  reg = /<script.*<\/script>/;//替换JavaScript标签
            	alert(cv.replace(reg,'哈哈哈'));
            }
            function t5(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	  /*
                        . 代表任意,但不包括换行
                        可以用一对反义词来匹配所有. \d\D等
                        不能跨行（贪婪模式）
                  */
                 
            	var reg = /<a[\s]+[\d\D]*<\/a>/; //正则替换链接
                    alert(cv.replace(reg,'<a href="#">文字</a>')); 
            }
            function t6(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var  reg = /\d+$/gm;//把每一行的结尾的数字换成#   m 多行模式
            	alert(cv.replace(reg,'#'));
            }
            function t7(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var  reg = /go{3,}?ds/;//替换goods中多余的O
            	alert(cv.replace(reg,'goods'));
            }
	</script>
</body>
</html>

4.5 例5-预查

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

<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="查找winxp,负向预查" onclick="t3();"></p>
	<p><input type="button" value="找出un*系列单词的词根" onclick="t4();"></p>

	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\b[\w]+ing\b/;
            	alert(cv.match(reg));
            } 
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\b[\w]+(?=ing)/g;//匹配进行时的单词的词根部分  不要ing结尾  预查不消耗字符
            	alert(cv.match(reg));
            } 
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\bwin(?!95)/g;//win98 win97 win95 win32 winxp win2003要求把win95过滤
            	alert(cv.match(reg));
            } 
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	//var reg = /\w+(?<=un)/g;//找出un*系列单词的词根  js不支持向前正向预查
            	alert(cv.match(reg));
            } 
 
	</script>
</body>
</html>

4.6 例6-反向引用

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

<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>

	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /<a[\s]+[^>]+>([^<>]+)<\/a>/; //链接表达式  这个一部分是子表达式 ([^<>]+)
                    // alert(reg.exec(cv)); 
                    
                alert(cv.replace(reg,'<a href="#"">$1</a>'));
            }
	</script>
</body>
</html>

4.7 例7-正则练习

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

<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="1-找首尾相同的单词" onclick="t1();"></p>
	<p><input type="button" value="2-手机号第4位到第七位换成*" onclick="t2();"></p>
	<p><input type="button" value="3-统一空格" onclick="t3();"></p>
	<p><input type="button" value="4-把名字中的,去掉" onclick="t4();"></p>
	<p><input type="button" value="5-把aaabb换成ab" onclick="t5();"></p>

        <script type="text/javascript">
           function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /\b([\w])[\w]*\1\b/g;// \1注意引用方式 [\w]任意一个 [\w]*任意多个 找首尾相同的单词
            	/**
            	 *  *如何引用子表达式所匹配的结果？
             *
             * 答： 在表达式内部 反向引用时 \n来匹配第N个子表达式的结果 子表达式当成变量来传递时，$N来匹配第N个子表达式的匹配结果
             * 
            	 */
            	alert(cv.match(reg));
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /(1(3|5|8|)\d)\d{4}(\d{4})/;//字表达式(3|5|8|)  (\d{4})  {4}代表任意4个  
            	// alert(cv.match(reg));//打印结果18878553070，188，3070
            	alert(cv.replace(reg,'$1****$3'));//188****4070
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /[ \t\u3000]+/g;//找空白符  第一个是半角的空格  \s包含所有空白符  \u3000表示 全角空格的16进制Unicode编码
            	alert(cv.replace(reg,','));//
            }
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            var reg = /([\u4E00-\u9FA0]),([\u4E00-\u9FA0])/g;  // 找中文用Unicode编码表的中文范围
            	alert(cv.replace(reg,','));
            }
            function t5(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            var reg = //;  
            	alert(cv.replace(reg,','));
            }
	</script>
</body>
</html>

4.8 例8-常用正则

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

<html>
<head>
	<meta charset="UTF-8">
	<title>常用正则解答</title>
	<script type="text/javascript">
            function t1(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /(\w)\1+/g; //查找连续多个字符  把aaabbccdd换成abcd这个格式
            						/**\1 后向引用，表示表达式中，从左往右数，第一个左括号对应的括号内的内容。
            以此类推，\2表示第二个，\0表示整个表达式**/
            	alert(cv.replace(reg,'$1'));
            }
            function t2(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	//手机号正则：
            	//1开头
            	//358第二位
            	//后九位
            	var reg = /1[358]\d{9}/g; // 这种情况适合在一段文本中分析出手机号
            	alert(cv.match(reg));//分析手机号
            }
            function t3(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /^1[358]\d{9}$/g;
            	alert(reg.test(cv));// test 验证手机号
            }
            function t4(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /^\s+|\s+$/g; // | 并列 或者 去除两端空格
            	alert('--'+cv.replace(reg,'')+'--');
            }
            //借助正则限制在一个有限范围内 防止sql注入
            function t5(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /^[\w\u4E00-\u9FA0]{4,16}$/; // \u4E00-\u9FA0 中文对应的Unicode编码 验证由字母数字下划线中文组合的4-16位用户名 
            	alert(reg.test(cv));
            }
            function t6(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = /^[0-9a-zA-Z]\w*(\.[\w]+)*@[0-9a-zA-Z\-]+(\.[\w]+)+$/;
            	alert(reg.test(cv));
            }
            function t7(){
            	var cont = document.getElementById('cont');
            	var cv = cont.value;
            	var reg = //;
            	alert(cv.replace(reg,''));
            }
	</script>
</head>
<body>
	<textarea id='cont'></textarea>
	<p><input type="button" value="1-替换相同字符串" onclick="t1();"></p>
	<p><input type="button" value="2-分析出手机号" onclick="t2();"></p>
	<p><input type="button" value="3-验证手机号" onclick="t3();"></p>
	<p><input type="button" value="4-去除两端空格" onclick="t4();"></p>
	<p><input type="button" value="5-验证由字母数字下划线中文组合的4-16位用户名" onclick="t5();"></p>
	<p><input type="button" value="6-验证邮箱" onclick="t6();"></p>
	<p><input type="button" value="7-清空script代码" onclick="t7();"></p>

</body>
</html>

前端系统进阶指南

关注公众号

正则回顾总结

一、简介

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

1.2 字符串应用正则

1.3 正则表达式3句话

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

1.3.2 从哪里找,找到哪？

1.3.3 找多少

1.3 贪婪模式

二、语法

2.1 基本元字符

2.2 数量元字符

2.3 位置元字符

2.4 特殊元字符

2.5 标志字符

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

3.1 match的用法

3.2 exec的用法

3.3 test的用法

3.4 search的用法

四、应用

4.1 例1

4.2 例2-要找什么字符串

4.3 例3-从哪里开始匹配

4.4 例4 正则应用字符串

4.5 例5-预查

4.6 例6-反向引用

4.7 例7-正则练习

4.8 例8-常用正则

五、总结

六、扩展阅读