【前端】JavaScript入门及实战86-90

文章目录

86 正则表达式
87 字符串和正则相关的方法
88 正则表达式语法(1)
89 正则表达式语法(2)
90 邮件的正则

86 正则表达式

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	
	/*
		使用字面量来创建正则表达式
		语法：var 变量 = /正则表达式/匹配模式
		
		使用字面量的方式创建更加简单，但是使用构造函数创建的更加灵活			  
	*/
	var reg = new RegExp("a", "i"); // "a" / "A"
	
	var reg = /a/i;
	
	// 创建一个正则表达式，检查一个字符串中是否有a或b
	/*
		使用|表示或者的意思
	*/
	res = /a|b|c/;
	
	/*
		创建一个正则表达式检查一个字符串中是否有字母
	*/
	console.log(res.test("abds"));
	
	/*
		[]里的内容也是或的关系
		[ab] == a|b
		[a-z]：任意小写字母
		[A-Z]：任意大写字母
		[A-z]：任意字母
		[0-9]：任意数字
	*/
	reg = /[abcdshjk]/;
	
	reg = /[a-z]/;
	reg = /[A-Z]/;
	reg = /[A-Z]/i; // 忽略大小写
	reg = /[A-z]/;
	
	// 检查一个字符串中是否含有abc或adc或aec
	reg = /abc|adc|aec/;
	rsg = /a[bde]c/;
	
	/*
		[^]除了
	*/
	rsg = /[^ab]/;
	rsg = /[^abc]/; // true
	rsg = /[^0-9]/; // 除了数字
</script>
<style>
</style>
</head>
<body>
</body>
</html>

87 字符串和正则相关的方法

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
		
	var str = "1a2b3c4d5e6f7";
	
	/*
		split()：将字符串拆分为一个数组
				 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
				 
				 这个方法即使不指定全局匹配，也会全部拆分
	*/
	var res = str.split("c");
	
	/*
		根据任意字母将字符串拆分
	*/
	res = str.split(/[A-z]/); // 1, 2, 3, 4, 5, 6, 7
	
	/*
		search()：可以搜索字符串中是否含有指定内容，
				  如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，
				  他可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
				  
				  search()只会查找第一个，即使设置全局匹配也没用
	*/
	str = "hello abc hello abc";
	res = str.search("abc"); // 6
	
	/*
		搜索字符串中是否含有abc或aec或afc
	*/
	res = str.search(/a[bef]c/);
	
	/*
		match()：可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，
				 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索，
				 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，
				 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
				 
				 match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
	*/
	str = "1a2b3c4d5e6f7";
	res = str.match(/[A-z]/); // a
	res = str.match(/[A-z]/g); // a
	res = str.match(/[A-z]/gi); // a
	
	/*
		replace()：可以将字符串中指定内容替换为新的内容
				   参数：1. 被替换的内容
						 2. 新的内容
				   默认值只替换第一个
	*/
	res = str.replace(/a/, "@_@");
	res = str.replace(/a/g, "@_@");
	res = str.replace(/a/gi, "@_@");
	res = str.replace(/[a-z]/gi, "@_@");
	res = str.replace(/[a-z]/gi, "");	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

88 正则表达式语法(1)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		创建一个正则表达式检查一个字符串中是否含有aaa
	*/
	var reg = /aaa/;
	
	/*
		量词：通过量词可以设置一个内容出现的次数
			  {n}正好出现n次
			  量词只对它前面的一个内容起作用
			  {m, n}：出现m-n次
			  {m, }：出现m次以上
			  
			  +：至少一个，相当于{1, }
			  *：0个或多个，相当于{0, }
			  ?：0个或1个，相当于{0, 1}
	*/	
	var reg = /a{3}/; // 找有没有连续出现的三个a
	reg.test("aaaa"); // true
	
	// ababab
	reg = /(ab){3}/;
	reg = /ab{3}c/; // abbbc
	reg = /ab{1, 3}c/; // b出现1-3次
	reg = /ab{3，}c/; // b出现3次以上
	reg = /ab+c/; // 至少一个b
	reg = /ab*c/;
	reg = /ab?c/;
	
	/*
		检查一个字符串中是否以a开头
		^表示开头
		$表示结尾
		
		如果在正则表达式中同时使用^和$则要求字符串必须完全符合正则表达式
	*/
	reg = /^a/; // 匹配开头的a
	reg = /a$/; // 匹配结尾的a
	reg = /^a$/; // aaa-false
	reg = /^a|a$/; // aaa-true
	
	/*
		创建一个正则表达式，用来检查一个字符串是否是一个合法的手机号
		手机号规则：11位
					1. 以1开头
					2. 第二位3-9任意数字
					3. 三位以后任意数字
					
					   ^1   [3-9]   [0-9]{9}$
	*/
	var phoneStr = "123567890123";
	var phoneReg = /^1[3-9][0-9]{9}$/;
	console.log(phoneReg.test(phoneStr));	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

89 正则表达式语法(2)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		检查一个字符串中是否含有.
		.表示任意字符
		在正则表达式中使用\作为转义字符
		\.来表示
		\\：\
		
		注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
		如果要使用\则需要使用\\来代替
	*/
	var reg = /./;
	console.log(reg.test("b")); // true
	
	var reg = /\./;
	var reg = /\\/;
	console.log(reg.test("b.\\")); // true，在字符串中也得使用两个\\
	
	reg = new RegExp("\.");
	reg = new RegExp("\\.");
	
	/*
		\w：任意字母、数字、_ [A-z0-9_]
		\W：除了字母、数字、_ [^A-z0-9_]
		\d：任意数字 [0-9]
		\D：除了数字 [^0-9]
		\s：空格
		\S：除了空格
		\b：单词边界
		\B：除了单词边界
	
	*/
	
	/*
		创建一个正则表达式检查一个字符串中是否含有单词child
	*/
	reg = /\bchild\b/;
	reg.test("hello children"); // false
	
	// 接收一个用户的输入
	//var str = prompt("请输入用户名");
	
	var str = "    hello";
	// 去掉字符串中的空格（前后）
	// 去除空格就是使用""来替换空格
	str = str.replace(/\s/g, "");
	str = str.replace(/^\s/g, ""); // 只去掉了开头一个空格
	str = str.replace(/^\s*/, ""); // 开头0或多个空格
	str = str.replace(/\s*$/, ""); // 结尾0或多个空格
	str = str.replace(/^\s*|\s*$/g, ""); // 匹配开头和结尾空格
	str = str.replace(/^\s+|\s*$/g, ""); // 匹配开头和结尾空格
</script>
<style>
</style>
</head>
<body>
</body>
</html>

90 邮件的正则

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		电子邮件：hello  .nihao  @  abc  .com  .cn
		
		1. 开头（hello）：任意字母、数字、_
		2. .任意字母、数字、_（有没有都行*）
		3. @
		4. 任意字母、数字
		5. .任意字母（2-5位）
		6. .任意字母（2-5位），可写可不写
		
		\w{3, }  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2, 5}){1, 2}
	*/
	var emailReg = /\w{3, }(\.\w+)*@[A-z0-9]+(\.[A-z]{2, 5}){1, 2}/;
	var email = "[email protected]";
	console.log(emailReg.test(email)); // true
	
	var emailReg = /^\w{3, }(\.\w+)*@[A-z0-9]+(\.[A-z]{2, 5}){1, 2}$/;
	var email = "[email protected]";
	console.log(emailReg.test(email)); // false
</script>
<style>
</style>
</head>
<body>
</body>
</html>

【前端】JavaScript入门及实战86-90

文章目录

86 正则表达式

87 字符串和正则相关的方法

88 正则表达式语法(1)

89 正则表达式语法(2)

90 邮件的正则

悦读