分享好友 站长动态首页 网站导航

JavaScript最后分水岭——正则表达式

2022-03-31 09:41 · 头闻号编程技术

文章目录

一、认识正则表达式

🍅什么是正则表达式

⭐️正则表达式（Regular expression，简称regexp）

应用：在项目开发中，手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能，都可以利用正则表达式来实现。

适用领域：在操作系统（Unix、Linux等）、编程语言（C、C++、Java、PHP、Python、Javascript等）。

举例：以文本查找为例，若在大量的文本中找出符合某个特征的字符串（如手机号码），就将这个特征按照正则表达式的语法写出来，形成一个计算机程序识别的模式（Pattern），然后计算机程序就会根据这个模式到文本中进行匹配，找出符合规则的字符串。


⭐正则表达式的发展史
在这里插入图片描述


⭐正则表达式的表现形式


🍅如何使用正则

在开发中，经常需要根据正则匹配模式完成对指定字符串的搜索和匹配。

在这里插入图片描述


🍑exec()方法

在这里插入图片描述


🍑match()方法

String对象中的match()方法除了可在字符串内检索指定的值外，还可以在目标字符串中根据正则匹配出所有符合要求的内容，匹配成功后将其保存到数组中，匹配失败则返回false。

在这里插入图片描述



🍅获取正则对象

在Javascript应用中，使用正则表达式之前首先需要创建正则对象。除了前面讲解过的字面量方式创建外，还可以通过RegExp对象的构造函数的方式创建。

在这里插入图片描述

在这里插入图片描述

为了让读者更好的理解正则对象的获取，以匹配特殊字符“^”、“$”、“*”、“.”和“”为例进行对比讲解。

在这里插入图片描述

📌注意

构造函数方式与字面量方式创建的正则对象，虽然在功能上完全一致，但它们在语法实现上有一定的区别，前者的pattern在使用时需要对反斜杠（）进行转义。而后者的pattern在编写时，要放在定界符“/”内，flags标记则放在结尾定界符之外



二、字符类别与集合

🍅字符类别

好处：有效的使用字符类别可以使正则表达式更加简洁，便于阅读。

举例1：大写字母、小写字母和数字可以使用“w”直接表示。

案例2：若要匹配0到9之间的数字可以使用“d”表示。

在这里插入图片描述

下面为了方便读者理解字符类别的使用，以“.”和“s”为例进行演示.

在这里插入图片描述



🍅字符集合

字符集合的表示方式：“[]”可以实现一个字符集合。

字符范围：与连字符“-”一起使用时，表示匹配指定范围内的字符。

反义字符：元字符“^”与“[]”一起使用时，称为反义字符。

不在某范围内： “^”与“[]”一起使用，表示匹配不在指定字符范围内的字符。

以字符串 ‘get好TB6’.match(/pattern/g) 为例演示其常见的用法。

在这里插入图片描述


📌注意

字符“-”在通常情况下只表示一个普通字符，只有在表示字符范围时才

作为元字符来使用。“-”连字符表示的范围遵循字符编码的顺序，如“a-Z”、“z-a”、“a-9”都是不合法的范围。


【案例】限定输入内容

在这里插入图片描述

代码实现思路：

编写HTML，设置一个年（份）和月（份）的文本框，以及一个查询按钮。

获取操作的元素对象，对表单的提交进行验证。

验证年份， 正则：/^d{4} / 。 验 证 月 份 ， 正 则 ： / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /。验证月份，正则： /^((0?[1-9])|(1[012])) /。验证月份，正则：/((0?[1−9])∣(1[012]))/ 。

文本框获取焦点，去除提示框的颜色。文本框失去焦点，去除输入内容的两端的空白，并进行验证。


代码实现

	<!DOCTYPE html>	<html>	<head>	<meta charset="UTF-8">	<title>限定输入内容</title>	<style>	input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}	input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}	input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}	input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}	input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }	</style>	</head>	<body>	<form id="form">	年份 <input type="text" name="year">	月份 <input type="text" name="month">	<input type="submit" value="查询">	</form>	<div id="result"></div>	<script>	function checkYear(obj) {	if (!obj.value.match(/^d{4}$/)) {	obj.style.borderColor = 'red';	result.innerHTML = '输入错误，年份为4位数字表示';	return false;	}	result.innerHTML = '';	return true;	}	function checkMonth(obj) {	if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {	obj.style.borderColor = 'red';	result.innerHTML = '输入错误，月份为1~12之间';	return false;	}	result.innerHTML = '';	return true;	}	var form = document.getElementById('form'); // <form>元素对象	var result = document.getElementById('result'); // <div>元素对象	var inputs = document.getElementsByTagName('input'); // <input>元素集合	form.onsubmit = function() {	return checkYear(inputs.year) && checkMonth(inputs.month);	};	inputs.year.onfocus = function() {	this.style.borderColor = '';	};	inputs.month.onfocus = function() {	this.style.borderColor = '';	};	if (!String.prototype.trim) {	String.prototype.trim = function() {	return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, '');	// uFEFF字节顺序标记；xA0不换行空白	};	}	inputs.year.onblur = function() {	this.value = this.value.trim();	checkYear(this);	};	inputs.month.onblur = function() {	this.value = this.value.trim();	checkMonth(this);	};	</script>	</body>	</html>



三、与正则相关的方法

🍅RegExp类中的方法

test()方法：检测正则表达式与指定的字符串是否匹配。

在这里插入图片描述

匹配成功时，test()方法的返回值为true，否则返回false。

⭐️检测正则对象的模式修饰符

RegExp类中还有一些属性，用于检测当前正则对象使用的模式修饰符，以及指定下一次匹配的起始索引等。

在这里插入图片描述


下面为了读者更好的理解这些属性的使用，以实现空格的匹配为例进行演示。

在这里插入图片描述



🍅String类中的方法

⭐️search()方法：可以返回指定模式的子串在字符串首次出现的位置，相对于indexOf()方法来说功能更强大。

在这里插入图片描述

⭐️split()方法：用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

当分隔符不只一个时，需要定义正则对象才能够完成字符串的分割操作。

在这里插入图片描述

📌 注意

当字符串为空时，split()方法返回的是一个包含一个空字符串的数组“[“”]”，如果字符串和分隔符都是空字符串，则返回一个空数组“[]”。

在这里插入图片描述


动手实践

密码强度验证

密码强度验证条件：

① 长度<6位，无密码强度。

②长度>6位，而且包含数字、字母或其他字符中的一种，密码强度为“低”。

③长度>6位，而且包含数字、字母或其他字符中的二种，密码强度为“中”。

④长度>6位，而且包含数字、字母或其他字符中的三种及以上，密码强度为“高”。



四、字符限定与分组

🍅字符限定


🍑字符限定——限定符

提出问题：匹配一个连续出现的字符，如 6个连续出现的数字“458925”。

解决方案1：正则对象/dddddd/gi。

存在的问题：重复出现的“d”既不便于阅读，书写又繁琐。

解决方案2：使用限定符（?、+、*、{ }）完成某个字符连续出现的匹配。正则对象/d{6}/gi。

在这里插入图片描述


🍑字符限定——贪婪与懒惰匹配

当点字符（.）和限定符连用时，可以实现匹配指定数量范围的任意字符。

正则在实现指定数量范围的任意字符匹配时，支持贪婪匹配和惰性匹配两种方式。

在这里插入图片描述



🍅括号字符

在正则表达式中，被括号字符“()”括起来的内容，称之为“子表达式”。

在这里插入图片描述

🍑作用

在这里插入图片描述

小括号实现了匹配catch和cater，而如果不使用小括号，则变成了catch和er


在这里插入图片描述

未分组时，表示匹配2个c字符；而分组后，表示匹配2个“bc”字符串。


🍑捕获与非捕获

捕获：将子表达式匹配到的内容存储到系统的缓存区的过程。

非捕获：不将子表达式的匹配内容存放到系统的缓存中，使用(?:x)实现。

在这里插入图片描述


String对象的replace()方法，可直接利用$n（n是大于0的正整数）获取捕获内容，完成对子表达式捕获的内容进行替换的操作。

在这里插入图片描述


可以使用”(?:x)”的方式实现非捕获匹配

在这里插入图片描述


🍑反向引用

在编写正则表达式时，若要在正则表达式中，获取存放在缓存区内的子表达式的捕获内容，则可以使用“n”（n是大于0的正整数）的方式引用，这个过程就是“反向引用”。

在这里插入图片描述


🍑零宽断言

零宽断言：指的是一种零宽度的子表达式匹配，用于查找子表达式匹配的内容之前或之后是否含有特定的字符集。

分类：分为正向预查和反向预查，但是在Javascript中仅支持正向预查，即匹配含有或不含有捕获内容之前的数据，匹配的结果中不含捕获的内容。

在这里插入图片描述



🍅正则运算符优先级

正则表达式中的运算符有很多。在实际应用时，各种运算符会遵循优先级顺序进行匹配。正则表达式中常用运算符优先级，由高到低的顺序如下表。

在这里插入图片描述

【案例】内容查找与替换

在这里插入图片描述

代码实现思路：


代码实现

	<!DOCTYPE html>	<html>	<head>	<meta charset="UTF-8">	<title>内容查找与替换</title>	<style>	div{float:left;}	input{margin:0 20px;}	</style>	</head>	<body>	<div>过滤前内容:<br>	<textarea id="pre" rows="10" cols="40"></textarea>	<input id="btn" type="button" value="过滤">	</div>	<div>过滤后内容:<br>	<textarea id="res" rows="10" cols="40"></textarea>	</div>	<script>	document.getElementById('btn').onclick = function () {	// 定义查找并需要替换的内容规则，[u4e00-u9fa5]表示匹配任意中文字符	var reg = /(bad)|[u4e00-u9fa5]/gi;	var str = document.getElementById('pre').value;	var newstr = str.replace(reg, '*');	document.getElementById('res').innerHTML = newstr;	};	</script>	</body>	</html>

如果觉得这篇文章对你有一丢丢启发的话，不妨 点赞👍、收藏⭐、留言💬支持一下，你的支持将是我继续创作的最大动力❤️❤️❤️

由于作者水平有限，如有错误和不准确之处在所难免，本人也很想知道这些错误，恳望读者批评指正！

if (学会了）{
点赞收藏给个好评，我祝福您学啥会啥；
}else{
点赞收藏给个好评，我相信您定能学会；
}

免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报

举报
反对 0
打赏 0
更多相关文章

评论

0

收藏

点赞