六、js正则表达式

最新推荐文章于 2023-10-07 18:00:49 发布
最新推荐文章于 2023-10-07 18:00:49 发布
阅读量1k 收藏
点赞数 1
分类专栏： 小白 - JAVA前端（初）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/106186960
版权

一、正则表达式

1.1 正则表达式创建方式
		
		语法1：
				
				/正则表达式/模式

		语法2：

			 re=new RegExp("正则表达式"，"模式")
1.2 js中的正则和java中的正则区别
	java中的正则表达式是写在双引号中，
	js中的正则表达式是写在双斜杠中的。
1.3 正则表达式常用的方法
1.3.1 test()

		test   使用正则对象去匹配字符串，  如果匹配成功返回true  ，
		       匹配失败返回false
1.3.2 exec()
		
		exec   根据正则表达式去查找字符串中符合规则的字符串
>>>>>> 查找字符串中相符的字符串
			var str="da  jia hao hao xue xi a";
			var reg=/\b[A-Z]{3}\b/ig;    //忽略大小写

			var line=reg.exec(str)
			alert(line)// jia

在这里插入图片描述

>>>>>> 查找字符串中所有相符的字符串
<body>
	
</body>

<script type="text/javascript">

			var str="da  jia hao hao xue xi a";
			var reg=/\b[A-Z]{3}\b/ig;    //忽略大小写

			var line="";
			while((line=reg.exec(str))!=null){
				document.write(line)
				document.write("<br/>")

			}


</script>

在这里插入图片描述

1.4 单词边界匹配器
			
    	\b正则表达式\b  表示这个正则为一个单词  
				
	     eg：var reg=/\b[A-Z]{3}\b/ig;    //忽略大小写
1.5 模式
				g  全文查找出现的所以的正则
				i  忽略大小写

没有加模式i，则匹配为false。如例1。加上模式i，匹配为true，如例2
例1：


			var str="121212asd";
			var reg=/^[A-Z0-9]+$/;

			var b=reg.test(str)
			alert(b)// false

在这里插入图片描述
例2

			var str="121212asd";
			var reg=/^[A-Z0-9]+$/i;    //忽略大小写

			var b=reg.test(str)
			alert(b)// true

在这里插入图片描述

1.6 正则细节
>>>>>> 正则只要匹配到字符串的一部分就返回true，而不是匹配整个字符串相符才返回true。
			var str="121212asd";
			var reg=/[0-9]+/;
			
			var b=reg.test(str)
			alert(b)// true

在这里插入图片描述

>>>>>> 如果正则想匹配整个字符串则要加上边界匹配器
	
					^  表示字符串的开始
				    $  表示字符串的结束
				    

	        var str="121212asd";
			var reg=/^[0-9]+$/;

			var b=reg.test(str)
			alert(b)// false

在这里插入图片描述
常用的正则

					验证邮箱：
					var reg=/^[a-z0-9]\w+@[a-z0-9]+(\.[a-z0-9]+){1,2}$/ig

二、正则表达式的应用 – 表单验证

2.1 表单的onsubmit事件的应用
	
	表单提交时，会触发onsubmit事件，如果onsubmit事件的方法返回的是true，		
	那么该表单提交成功，否则失败。
    onsubmit绑定函数时，要return该方法
				
	<form action="success.html" method="get" onsubmit="return test()">

onsubmit绑定的方法返回false，点击提交按钮时，提交失败。

<body>
	<form action="success.html" method="get" onsubmit="return test()">
		<input type="text" name="k"/>
		<input type="submit" />
	</form>

</body>	
	<script type="text/javascript">
		
		function test(){
			return false;
		}

	</script>

obsubmit绑定的方法返回true，点击提交按钮时，提交失败。

<body>
	<form action="success.html" method="get" onsubmit="return test()">
		<input type="text" name="k"/>
		<input type="submit" />
	</form>

</body>
	
	<script type="text/javascript">
		function test(){
			return true;
		}
	</script>
2.2 表单验证

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8" />

	<style type="text/css">
			.t{
				text-align:center;
				width:100px;
			}

		
			input{
				margin-left:10px;
			}

			

	</style>
</head>	
<body>
	
	<table width="500px" height="400px"style="margin:100px auto; table-layout:fixed;    word-break:break-all;
"  border="1" cellspacing="0" cellpadding="0">

		<form action="success.html" method="get"  onsubmit="return checkAll()">
				<tr>
					<td class="t">用户名:</td>
					<td><input type="text" name="username" onblur="checkName()"/><span></span></td>
				</tr>
				<tr>
					<td class="t">密码:</td>
					<td><input type="password" name="pwd"  onblur="checkPwd()"/><span></span></td>
				</tr>
				<tr>
					<td class="t">确认密码:</td>
					<td><input type="password" name="pwd" onblur="checkPwd2()"/><span></span></td>
				</tr>
				<tr>
					<td class="t">邮箱:</td>
					<td><input type="text" name="email"   onblur="checkEmail()" /><span></span></td>
				</tr>
				<tr>
					<td class="t">性别:</td>
					<td> <input type="radio" name="sex" value="man" />男 <input type="radio" value="woman" name="sex" />女<span></span></td>
				</tr>	
				<tr>
					<td class="t">爱好:</td>
					<td><input type="checkbox" name="like"/>篮球 <input type="checkbox" name="like"/>足球<span></span></td>
				</tr>
				<tr>
					<td class="t">城市:</td>
					<td>
						<select name="city">
							<option value="nj">南京</option>
							<option value="bj">北京</option>
						</select>
						<span></span>
					</td>
				</tr>
				<tr>
					<td class="t">自我描述:</td>
					<td><input type="textarea" rows="4" cols="8" name="self"/><span></span></td>
				</tr>
				<tr>
					<td colspan="2" style="padding-left:400px"><input type="submit" /></td>
				</tr>
	
		</form>
	</table>
</body>

<script type="text/javascript">

		//校验用户名
		function checkName(){
				var obj=document.getElementsByName("username")[0];
				var  username=obj.value
				var reg=/^[A-Z0-9]{6,9}$/ig
				var flag=reg.test(username);
				console.log(flag)
				var p=obj.parentNode;
				var s=p.childNodes[1]
				if(flag){s.innerHTML="正确".fontcolor("green") ;return true}

				s.innerHTML="&nbsp;&nbsp;&nbsp;用户名错误".fontcolor("red")

		}

		//校验密码
		function checkPwd(){
				var obj=document.getElementsByName("pwd")[0];
				var  pwd=obj.value
				var reg=/^[A-Z0-9]{6,9}$/ig
				var flag=reg.test(pwd);
				console.log(flag)
				var p=obj.parentNode;
				var s=p.childNodes[1]
				if(flag){s.innerHTML="正确".fontcolor("green") ;return true}

				s.innerHTML="&nbsp;&nbsp;&nbsp;密码错误".fontcolor("red")
		}

		function checkPwd2(){
				var obj=document.getElementsByName("pwd")[0];
				var obj1=document.getElementsByName("pwd")[1];

				var  pwd=obj.value
				var  pwd1=obj1.value


				var p=obj1.parentNode;
				var s=p.childNodes[1]

				if(pwd==""||pwd!=pwd1){
					s.innerHTML="&nbsp;&nbsp;&nbsp;密码不一致".fontcolor("red")
				}else{
					s.innerHTML="正确".fontcolor("green");return true
				}


			}

			//检验邮箱
			function checkEmail(){
				var obj=document.getElementsByName("email")[0];
				var email=obj.value
				//5454@qq.com  23323232@123.123.com.cn   匹配邮箱正则
				var reg=/^[a-z0-9]\w+@[a-z0-9]+(\.[a-z0-9]+){1,2}$/ig
				var flag=reg.test(email);
				console.log(flag)
				var p=obj.parentNode;
				var s=p.childNodes[1]
				if(flag){s.innerHTML="正确".fontcolor("green") ;return true}

				s.innerHTML="&nbsp;&nbsp;&nbsp;邮箱格式错误".fontcolor("red")

			}

			//表单提交时，重新检查表单项
			function checkAll(){
				
				var f=checkName();
				var f1=checkPwd();
				var f2=checkPwd2();
				var f3=checkEmail();

				return f&&f1&&f2&&f3?true:false;
			}


</script>


</html>		

</script>


</html>

在这里插入图片描述

二旬、
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript正则表达式
01-08
JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...
JS正则表达式验证端口范围(0-65535)
01-19
javascript正则表达式验证IP地址的端口合法性 if (!(/^[1-9]\d*$/.test(port) && 1 <= 1 * port && 1 * port <= 65535)){ return false } 提示文案： 您的端口不符合范围：0-65535 PS：下面看下JavaScript...
Auto.js 正则匹配match replace
qq_25226575的博客
03-05 3401
zfc="abcde123456abcde123456" //获取这里面一个数字 jg=zfc.match(/\d/) log(jg[0]) // 1 //获取里面一个数字串 jg=zfc.match(/\d+/) log(jg[0]) // 123456 //获取里面所有数字串 jg=zfc.match(/\d+/g) log(jg) // [ '123456', '123456' ] //获取4位数字 jg=zfc.match(/\d{4}/) log(jg[0]) // 1234 //获取全部4位数
auto.js B0033 javascript正则表达式 输出匹配的字符串
weixin_33595571的博客
10-17 1983
// 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象 // 。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、 // replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。 // . （小数点）默认匹配除换行符之外的任何单个字符。 // * 匹配前一个表达式 0 次或多次 var re = /ab+c/; var re =
javascript 正则
weixin_30501857的博客
06-12 87
javascript 正则 1 //test方法,测试字符串,符合模式时返回true,否则返回false 2 var re = /he/;//最简单的正则表达式,将匹配he这个单词 3 var str = "he"; 4 alert(re.test(str));//true 5 st...
javascript正则表达式之$1...$9
热门推荐
xxb2008的专栏
08-14 1万+
一直不明白JS正则$1...$9是什么用途。 写个小例子，频频报错： 1、引用 $1...$9 ，是通过 RegExp 来的，而不是新建立的RegExp对象名； 2、你创建的正则对象，被 括弧 括起来的部分，从左到右，依次是$1...$9 ，     这说明，没有括弧，你也甭想通过，RegExp.$1...$9，拿到任何东西； 下面例子是从javascript帮助文档摘抄的：
JS正则表达式 验证邮箱登入 分析
01-08
js正则表达式 验证邮箱登入 #emailError { color: red; } [removed] = function() { /* 分析： 0.给提交按钮绑定时间 1.先获取 用户输入框的值 2.写正则表达式 3.用正则表达式...
2019手机号码JS正则表达式验证实例代码
12-13
概念 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一...前端的正则表达式验证往往是最繁多最复杂的，所以整理了一些最近自己常用的正则表达式，希望能对大家
javascript正则表达式基础篇
10-27
主要是介绍javascript正则表达式的一些基础知识，主要是介绍javascript的正则书写方法与常用实例，需要的朋友可以参考下
js正则表达式之$1$2$3$4$5$6$7$8$9属性，返回子匹配的结果
12-13
功能：$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果，这些结果按照子匹配的出现顺序依次排列。 基本语法RegExp.$n 注意：这些属性是静态的，除了replace中的第二个参数可以省略RegExp之外，其他地方使用都要加上RegExp。案例讲解：demo1 代码如下: <html> [removed] //创建要进行匹配的字符串 var objStr=”这是我的手机号13100000000″ //创建正则表达式匹配手机号码 var re=/(13)(/d)(/d{8})/;//该正则表达式可
Auto.js正则匹配字符串是否含有中文
ccvv_ss的博客
12-08 2498
js正则匹配字符串是否含有中文 //验证字符串是否含有中文 function checkChinese(obj_val) { var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); if (reg.test(obj_val)) { return true } return false; } 如果含有中文返回true,否则返回false; ...
auto.js B0015 python 正则表达式匹配内容
weixin_33595571的博客
10-04 146
# encoding: UTF-8 import re pattern = re.compile(r'\d+') # 查找数字 result1 = pattern.findall('runoob google ') result2 = pattern.findall('run88oob123google456', 0, 10) print(result1) print(result2)
金猪脚本--Auto.js 正则匹配match replace
2301_79070714的博客
08-13 187
喜欢auto.js 的小伙伴们可以一起交流学习,我们的裙:741。
Javascript中正则表达式$1探讨
replayb的博客
10-07 505
好了，下面只需将所有"x"代替为",“就行了。可是"x"仅仅是几个空位置，可视化不强，所以再做一点变形加上”(\d)“，表示为匹配正向预查结果之前的一个数字，分别为1，4，7。上面的”$1“是个什么鬼呢，它表示捕获模式下从左向右第一个(表达式)的匹配结果，此例中”$1“是(\d)，这没什么可说的，我要说的是下面这个表达式中”$1“表示什么。但是问题来了，你不是说这个会输出三个，分别是”890“，”567890“，”234567890“，到底是哪一个？最后用上面的JS语句将"1”，“4”，“7"替换为"
js正则表达式replace中参数为$1、$2、...、$99、函数等用法以及常用的正则表达式
sxww_zyt的博客
04-20 2775
js正则表达式replace中参数为$1、$2、...、$99、函数等用法以及常用的正则表达式
js正则对象RegExp的$1...$9 属性
Inuyasha1121的专栏
06-25 3676
返回在模式匹配期间找到的，所存储的最近的九个部分。 只读。 RegExp.$n 参数 RegExp 始终为全局 RegExp 对象。 n 1 至 9 之间的任意整数。 备注 每当产生一个带括号的成功匹配时，$1...$9 属性的值就被修改。
JavaScript的RegExp中的$1含义
wgf1997的博客
03-13 1227
RegExp 是javascript中的一个内置对象。为正则表达式。 RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串， 以此类推，RegExp.$2，RegExp.$3，..RegExp.$99总共可以有99个匹配 var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)...
javascript 正则表达式 转换 java 正则表达式
最新发布
04-08
JavaScript正则表达式和Java正则表达式在语法上有一些差异，但是它们的基本概念和用法是相似的。下面是将JavaScript正则表达式转换为Java正则表达式的一些常见规则： 1. 语法差异： - JavaScript正则表达式使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值