js学习-16（正则）

最新推荐文章于 2023-03-18 20:43:47 发布

琦遇前端ing~

最新推荐文章于 2023-03-18 20:43:47 发布

阅读量193

点赞数

分类专栏：前端学习文章标签：正则表达式 javascript js 前端

本文链接：https://blog.csdn.net/qq_42760119/article/details/107678559

版权

前端学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

RegExp对象（正则对象）

RegExp对象表示正则表达式，是对字符串执行模式匹配的强大工具。

创建RegExp对象的方法：

1、直接字面量方式

/pattern/attributes

例：

var reg = /hello/i;    //i代表的是忽视大小写。
console.log(reg);

2、构造函数创建RegExp对象的方式：

new  RegExp(pattern,attributes)

例：

var reg1 = new RegExp("xiaoming","i");
console.log(reg1);

参数：

pattern：是一个字符串，制定了正则表达式的模式或其他正则表达式。

attributes：

是一个可选的字符串，包含属性”g“、”i“、”m“，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

ECMAScript标准化之前，不支持m属性。

如果pattern是正则表达式，而不是字符串，则必须省略该参数。

修饰符	描述
i	执行对大小写不敏感的匹配。即有”i“则忽视大小写
g	执行全局匹配。即查找所有匹配而非在第一个匹配后停止。
m	执行多行匹配。

方括号：

表达式	描述
[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符
[0-9]	查找任何0至9的数字
[a-z]	查找任何从小写a到小写z的字符
[A-Z]	查找任何从大写A到大写Z的字符
[A-z]	查找任何从大写A到小写z的字符
[adgk]	查找给定集合内的任何字符
[^adgk]	查找给定集合外的任何字符
(red\|blue\|green)	查找任何指定的选项

元字符：metacharacter

元字符是拥有特殊含义的字符。

元字符	描述
.	查找单个字符，除了换行和行结束符
\w	用于匹配字母，数字或下划线字符；
\W	用于匹配所有与\w不匹配的字符；
\d	查找数字
\D	查找非数字
\s	用于匹配单个空格符，包括tab键和换行符；
\S	用于匹配除单个空格符之外的所有字符；
\b	匹配单词边界
\B	匹配非单词边界
\0	查找null字符
\n	查找换行符
\f	查找换页符
\r	查找回车符
\t	查找列表符
\v	查找垂直制表符
\xxx	查找以八进制数xxx规定的字符
\xdd	查找以十六进制数dd规定的字符
\uxxxx	查找以十六进制数xxxx规定的Unicode字符

量词

量词	描述
n+	匹配任何包含至少一个n的字符串
n*	匹配任何包含零个或多个n的字符串
n？	匹配任何包含零个或一个n的字符串
n{X}	匹配包含X个n的序列的字符串
n{X,Y}	匹配包含X至Y个n的序列的字符串
n{X,}	匹配包含至少x个n的序列的字符串
n$	匹配任何结尾为n的字符串
^n	匹配任何开头为n的字符串
?=n	匹配任何其后紧接指定字符串n的字符串（匹配指定字符串n前面的字符串）
?!n	匹配任何其后没有紧接指定字符串n的字符串

RegExp对象属性

属性	描述	FF	IE
global	RegExp对象是否具有标志g	1	4
ignoreCase	RegExp对象是否具有标志i	1	4
lastindex	一个整数，标识开始下一次匹配的字符位置	1	4
multiline	RegExp对象是否具有标志m	1	4
source	正则表达式的源文本	1	4

注意：FF =1代表的是支持firefox1.0版本及以上，IE=4代表的是支持Internet Explorer4.0版本及以上。

RegExp对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值，返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值，返回true或false	1	4

支持正则表达式的String对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值	1	4
match	找到一个或多个正则表达式的匹配值	1	4
replace	替换与正则表达式匹配的子串	1	4
split	把字符串分割为字符串数组	1	4

正则表达式是一种通用的工具，正则表达式的语法体现在字符模式上，字符模式是一组特殊格式的字符串，它由一系列的特殊字符和普通字符构成，其中每个特殊字符都包含一定的语义和功能。根据正则表达式语法规则，大部分字符仅能够描述自身，这些字符被称为普通字符，如所有的字母、数字等。

声明词量

声明表示条件。声明词量包括正向声明和反向声明两种模式。

声明词量	描述
（?=pattern）	正向肯定模式
(?!pattren)	正向否定模式
(?<=pattern)	反向肯定模式
(?<!pattern)	反向否定模式

例子：

<script type="text/javascript">
   //正向肯定模式
   var str = "hello abc world"
   var reg = /\w+\s(?=abc)/
   var result = str.match(reg);
   console.log(result);
   
   //正向否定模式
   var reg1 = /\w+\s(?!abc)/
   var result1 = str.match(reg1);
   console.log(result1);
   
   //反向肯定模式
   var reg2 = /(?<=abc)\s\w+/
   var result2 = str.match(reg2);
   console.log(result2);
   
   //反向否定模式
   var reg3 = /(?<!abc)\s\w+/
   var result3 = str.match(reg3);
   console.log(result3);
   
  </script>

结果：

在这里插入图片描述

正则练习与应用：

<script type="text/javascript">
   //1、匹配整数或者小数（包括正数和负数）
   //1，-1，1.1，-1.3，1.12232434
   var reg1 = /^-?\d+(\.\d+)?$/ 
   console.log(reg1.test("1.1"));
   
   
   //2、匹配年月日日  格式为2020-7-29或者2020-07-09
   var reg2 = /^[1-9]\d{0,3}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2][1-9]|3[0-1])$/
   console.log(reg2.test("2020-07-29"));
   
   
   //3、匹配qq号（6位-12位）第一位不能是0
   var reg3 = /^[1-9]\d{5,11}$/
   console.log(reg3.test("34589485454"));
   
   //4、匹配11位的手机号码
   var reg4 = /^[1-9]\d{10}$/
   console.log(reg4.test("12344345689"));
   
   
   //5、密码   长度为5-8   可以是数字、字母、下划线
   var reg5 = /^\w{8,}$/
   console.log(reg5.test("34545cfffg_efefe"))
   
   //6、验证码
   var reg6 = /[0-9A-z]{4}/
   console.log(reg6.test("456d"))
   
   //7、匹配邮箱地址
   var reg7 = /\w+@\w+(\.[A-z]+)+/
   console.log(reg7.test("7344345@qq.com"))
    
  </script>

表单校验：

<body>
		<form action="" method="post">
			<div id="">
				<label for="">电话</label>
			<input type="text" name="mobile" id="mobile" value=""/>
			</div>
			<div id="">
				<label for="">邮箱</label>
			<input type="text" name="mail"  id="mail" value=""/>
			</div>
			<div id="">
				<label for="">密码</label>
			<input type="password" name="password" id="password" value=""/>
			</div>
			<div id="">
				<input type="submit" value="提交"/>
			</div>
		</form>
		
		
		<script type="text/javascript">
			var mobile = document.querySelector("#mobile");
			mobile.onchange = function(){
				var regMobile = /^1\d{10}$/;
				if (!regMobile.test(mobile.value)) {
					alert("您输入的电话号码格式不正确，请重新输入")
				}
			}
			
			var mail = document.querySelector("#mail")
			mail.onchange = function(){
				var regMail = /^\w+@[A-z0-9]+(\.[A-z]+)+$/
				if (!regMail.test(mail.value)) {
					alert("您输入的邮箱格式不正确，请重新输入")
				}
			}
			
			
			var pwd = document.querySelector("#password");
			pwd.onchange = function(){
				var regPwd = /^\w{8,}$/
				if (!regPwd.test(pwd.value)) {
					alert("您输入的密码格式有误，密码只能包含数字字母下划线且长度至少为8，请重新输入");
				}
			}
			
		</script>
	</body>

琦遇前端ing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习-16（正则）

RegExp对象（正则对象）RegExp对象表示正则表达式，是对字符串执行模式匹配的强大工具。创建RegExp对象的方法：1、直接字面量方式/pattern/attributes例：var reg = /hello/i; //i代表的是忽视大小写。console.log(reg);2、构造函数创建RegExp对象的方式：new RegExp(pattern,attributes)例：var reg1 = new RegExp("xiaoming","i");console.l
复制链接

扫一扫

专栏目录