JS学习日记--正则基础语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104093096

一、正则表达式

正则表达式是由普通字符及特殊字符组成的对字符串进行过滤的逻辑公式

创建方式

字符量的方式：
var reg = /abc/；
构造函数
var reg = new RegExp(“abc”);

二、正则表达式方法

方法名	作用	返回值
test	检测是否有符合表达式规则的子串	有返回true，否则返回false
match	检索指定的值	这些值组成的数组
search	查找符合规则的子串	第一个匹配成功的位置
split	分割	返回数组
replace	替换	返回替换后的值
exec	将匹配成功的放到数组里	匹配成功的值，没有成功则返回null

注：exec如果要全部输出，需要多次调用，一次只能输出一个

		<script type="text/javascript">
			/*创建方法*/
			var reg=/abc/;//1.字面量的方式
			var  reg=new RegExp("abc");//2.构造函数
			/*方法*/
			 //test方法 用来检测是否有符合表达式规则的子串，有返回true，无返回false
			var str="aabcd";
			console.log(reg.test(str));
			//修饰符 g  i 
			//g表示全局匹配
			//i不区分大小写
		//match方法 检索指定的值 返回值也是这些指定的值组成的数组
			var reg=/abc/ig;
			var str="aAbcabc";
			console.log(str.match(reg));
			//seach方法，查找符合规则的子串的位置，只返回第一个匹配的位置
			var reg=/abc/;
			var str="12abc4";
			console.log(str.search(reg));
			//split  分割 返回数组
			var reg=/ /;
			var str="good good study";
			console.log(str.split(reg));
			//replace 替换
			var reg=/aaa/ig;
			var str="aaa aaa study";
			console.log(str.replace(reg,"good"));
			//exe方法，将匹配成功的方法放到数组里，如果没有匹配成功，返回null
			//如果要全部输出 则需要多次调用，一次只能输出一个
			var reg=/good/g;
			var str="good good study";
			console.log(reg.exec(str));
			console.log(reg.exec(str));
			console.log(reg.exec(str));
		</script>

输出：
true
Array(2)
2
Array(3)
good good study
Array(1)
Array(1)
nul

三、正则表达式中的特殊字符

字符	作用
.	代表除了换行符外的所有单个字符
*	重复多次匹配（0-n）
+	至少一次重复匹配
？	进行零次或者一次匹配
[ ]	表示可以匹配到的范围
\w	数字字母下划线
\W	非数字字母下划线
\d	表示数字
\D	非数字
\s	匹配空格
{m,n}	至少匹配m次，最多匹配n次
/^	匹配开始
$/	匹配结束
（）	分组将内容作为一个整体进行匹配
$1,$2	代表分组的元素

		<script type="text/javascript">
			//. 除了换行符外的所有单个字符
			var reg=/g..d/gi;
			var str="goodg--dg/-d";
			console.log(reg.test(str),str.match(reg));
			//* 重复多次匹配，匹配任意次（0-n）,只作用于前一个字符
			var reg=/go*d/gi;
			var str="goodgogod";
			console.log(reg.test(str),str.match(reg));
			//+ 至少有一次重复匹配
			var reg=/go+d/gi;
			var str="goodgdgodgoooood";
			console.log(reg.test(str),str.match(reg));
			//? 进行零次或者一次匹配
			var reg=/go?d/gi;
			var str="gdgodgood";
			console.log(reg.test(str),str.match(reg));
			//[] 表示可以匹配到的范围
			var reg=/[a-z]+/gi;
			var str="asjfij";
			console.log(reg.test(str),str.match(reg));
			//\w 代表数字字母下划线 等同于[0-9a-zA-Z_] W\非数字字母下划线
			var reg=/\w+/ig;
			var str="s4989_*";
			console.log(reg.test(str),str.match(reg));
			//\d 表示数字  \D非数字
			var reg=/\d+/gi;
			var str="1234s4";
			console.log(reg.test(str),str.match(reg));
			//\s 匹配空格
			var reg=/\s+/gi;
			var str="good good      study";
			console.log(str.replace(reg,""));
			//{m,n} 至少匹配m次，至多匹配n次
			var reg=/go{3,6}d/ig;
			var str="goooodgoodgoooooood";
			console.log(reg.test(str),str.match(reg));
			// /^ 匹配开始 $/ 匹配结束
			var reg=/^g.*g$/gi;
			var str="goodgd";
			console.log(reg.test(str),str.match(reg));
			// | 或
			var reg=/google|baidu|yahoo/gi;
			var str="www.baidu.com";
			console.log(reg.test(str),str.match(reg));
			// () 分组 将内容作为一个整体进行匹配
			var reg=/(good){2,3}/gi
			var str="goodgoodagood"
			console.log(reg.test(str),str.match(reg));
			console.log(RegExp.$1);
			//$1 $2 代表分组的元素
			var reg=/(.*)\s(.*)/;
			var str="taobao baidu";
			console.log(str.replace(reg,"$2 $1"));
		</script>

输出：
true Array(3) 0:"good" 1:"g--d" 2:"g/-d"
true Array(2) 0:"good" 1:"god"
true Array(3) 0:"good" 1:"god" 2:"goooood"
true Array(2) 0:"gd" 1:"god"
true Array(1) 0:"asjfij"
true Array(1) 0:"s4989_"
true Array(2) 0:"1234" 1:"4"
goodgoodstudy
true Array(1) 0:"gooood"
false null
true Array(1) 0:"baidu"
true Array(1) 0:"goodgood"
good
baidu taobao

四、一个小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>用户名规范</title>
		<script type="text/javascript">
			window.onload=function()
			{
				var oInput=document.getElementById("username");
				oInput.onchange=function()
				
				{
					var str=this.value;
					var reg=/^[a-zA-Z_]\w{5,14}$/;
					if(reg.test(str))
					{
						alert("格式正确");
					}else{
						alert("用户名由数字，字母下划线组成的 6-15位字符，且不能以数字开头");
					}
				}
			}
		</script>
	</head>
	<body>
		用户名：<input type="text" id="username" />
		
	</body>
</html>