转载

正则回顾总结

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

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>
原文  http://blog.poetries.top/2018/04/10/js-reg-review/
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：677 人
  • 运行天数：4,439天
  • 最后更新：2024年12月22日17点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG