学习javascript第三天（正则表达式）加es6

重庆李豪

已于 2023-05-26 18:56:23 修改

阅读量70

点赞数

文章标签：学习

于 2022-05-27 14:40:56 首次发布

本文链接：https://blog.csdn.net/qq_66579387/article/details/125002806

版权

1.正则表达式

// 边界符

// 字符类

//量词符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//    *相当于>=0
	var s1 = /^a*$/;
	console.log(s1.test(''));
	console.log(s1.test('a'));
	console.log(s1.test('aaa'));
	console.log('------------*');
	//    +相当于>=1
	var s1 = /^a+$/;
	console.log(s1.test(''));
	console.log(s1.test('a'));
	console.log(s1.test('aaa'));
	console.log('------------+');
	//    ?相当于 0||1
	var s1 = /^a?$/;
	console.log(s1.test(''));
	console.log(s1.test('a'));
	console.log(s1.test('aaa'));
	console.log('------------？');
	//    {2}重复两次
	var s1 = /^a{2}$/;
	console.log(s1.test(''));
	console.log(s1.test('a'));
	console.log(s1.test('aaa'));
	console.log('------------{2}');
	//    {2,}大于两次
	var s1 = /^a{2,}$/;
	console.log(s1.test(''));
	console.log(s1.test('a'));
	console.log(s1.test('aaa'));
	console.log('------------{2,}');
	//{2,16}  2到16次
	var s1 = /^a{2,16}$/;
	console.log(s1.test('aaa'));
</script>

2.正则预定义类和座机号码验证

3.正则表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrap{
				width: 100%;
				height: 300px;
				background-color: aqua;
				margin:300px auto;
				font-size: 60px;
				line-height: 300px;
			}
			input{
				height: 70px;
				font-size: 60px;
			}
			.aa{
				color: red;
				padding-left: 160px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			手机号 : <input type=text/>
			<a></a>
		</div>
	</body>
	<script>
		var num = /^1[3|5]\d{9}$/;
		var input = document.querySelector('input');
		var a = document.querySelector('a');
		input.onblur = function(){    //鼠标移出并点击
			if(num.test(this.value)){
				this.nextElementSibling.className='aa';
				this.nextElementSibling.innerHTML='<i>验证成功</i>';
			}
			else{
				this.nextElementSibling.className='aa';
				this.nextElementSibling.innerHTML='<i>验证失败</i>';
			}
		}

	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				margin-top:100px;
				width: 100%;
				height: 200px;
				background-color: aqua;
				margin:100px auto;
				font-size: 60px;
				line-height: 200px;
			}
			input{
				height: 70px;
				font-size: 60px;
			}
			.aa{
				color: red;
				padding-left: 160px;
			}
		</style>
	</head>
	<body>
		<main>
		<div id="wrap">
			<span>手机号:</span> <input type=text/ id="num">
			<a></a>
		</div>
		<div id="wrap1">
			<span>QQ号:</span> <input type=text/ id="qq">
			<a></a>
		</div>
		<div id="wrap2">
			<span>昵称:</span><input type=text/ id="nicheng">
			<a></a>
		</div>
		</main>
	</body>
	<script>
		var num = /^1[3|5]\d{9}$/;
		var qqnum = /^[0-9]\d{4}$/;
		var nicheng = /^[\u4e00-\u9fa5]{2,8}$/   //2到8位的中文
		var num1 = document.querySelector('#num');
		var qq1 = document.querySelector('#qq');
		var nicheng1 = document.querySelector('#nicheng');
		var a = document.querySelector('a');
		regexp(num1,num);
		regexp(qq1,qqnum);
		regexp(nicheng1,nicheng);
		function regexp(shijian,zhengze){
			shijian.onblur = function(){    //鼠标移出并点击
				if(zhengze.test(this.value)){
					this.nextElementSibling.className='aa';
					this.nextElementSibling.innerHTML='<i>验证成功</i>';
				}
				else{
					this.nextElementSibling.className='aa';
					this.nextElementSibling.innerHTML='<i>验证失败</i>';
				}
			}
		}

	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			textarea,#xinwenben{
				width: 500px;
				height: 270px;
				border: 5px solid greenyellow;
				margin-top: 10px;
				font-size: 50px;
			}
			button{
				position: relative;
				top:-21px;
				right: 105px;
				width: 100px;
				height: 50px;
				font-size: 20px;
				border: 0;
			}		
		</style>
	</head>
	<body>
		<textarea id="wenben"></textarea><button>提交</button>
		<div id="xinwenben"></div>
	</body>
	<script>
		var wenben = document.querySelector("textarea");
		var btn = document.querySelector("button");
		var xinwenben = document.querySelector("#xinwenben");
		btn.onclick=function(){
			//  replace(正则，新内容)是一个替换方法
			xinwenben.innerHTML=wenben.value.replace(/cb|rp/gi,'**');
		}
	</script>
</html>

4.ES6（let关键字）