JavaScript高级总结(3)

最新推荐文章于 2024-04-18 09:00:00 发布
最新推荐文章于 2024-04-18 09:00:00 发布
阅读量186 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WildKingxue/article/details/120119180
版权

一.Array（数组） 对象

1.什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

2.数组对象的作用？

使用单独的变量名来存储一系列的值。

3.创建数组和数组赋值

length--length属性---数组元素的个数

创建一个数组，有三种方法。

1: 常规方式:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组创建</title>
		<script type="text/javascript">
		//创建一个数组【第一种】
			var shao=new Array(4);
			//赋值
			shao[0]="l";
			shao[1]="love";
			shao[2]="you";
			//访问
			alert(shao.length);//数组空间长度
		</script>
	</head>
	<body>
	</body>
</html>

2: 简洁方式:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title数组创建</title>
		<script type="text/javascript">
		//创建一个数组【第二种】
			var shao=new Array("l","love","you");
			//访问
			alert(shao.length);//数组空间长度
		</script>
	</head>
	<body>
	</body>
</html>

3: 字面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组创建</title>
		<script type="text/javascript">
		//创建一个数组【第三种】
			var shao=["l","love","you"];
			//访问
			alert(shao.length);//数组空间长度
		</script>
	</head>
	<body>
	</body>
</html>

4.数组的访问/取值

1.通过数组名可以访问数组内的全部元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组赋值</title>
		<script type="text/javascript">
			//创建数组  赋值
			var shao=["I","am","a","wild","wing"];
			//访问
			alert(shao);
		</script>
	</head>
	<body>
	</body>
</html>

2. 通过指定数组名以及索引号码，你可以访问某个特定的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组取值</title>
		<script type="text/javascript">
		//创建数组  赋值
			var shao=["Apple","Apricot","Arbutus","Almond","Avocado"];
			//找出在第三个小标的值，下标从0开始
			alert(shao[3]);//Almond
		</script>
	</head>
	<body>
	</body>
</html>

5.数组的遍历

1.for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的遍历</title>
		<script type="text/javascript">
		//创建数组   赋值
			var shao=["Banana","Bennet","Black brin","Blueberry","Bryony"];
			//当i小于数组空间长度使，使出这个值并加一 再次循环
			for(var i=0;i<shao.length;i++){
				alert(shao[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.for  in 循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的遍历</title>
		<script type="text/javascript">
		//创建数组   赋值
			var shao=["Banana","Bennet","Black brin","Blueberry","Bryony"];
			//使用for in  来访问
			for(var index in shao){
				alert(shao[index]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.forEach循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的遍历</title>
		<script type="text/javascript">
			//创建数组   赋值
			var shao = ["Banana", "Bennet", "Black brin", "Blueberry", "Bryony"];
			//使用forEach来访问
			shao.forEach(function(element) {
				alert(element);
			});
		</script>
	</head>
	<body>
	</body>
</html>

6.数组的常用方法

concat() 合并数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>合并数组</title>
		<script type="text/javascript">
		//创建三个数组 赋值
			var a = ["Apple","Apricot"];
			var b = ["Banana","Bennet"];
			var c = ["Cantaloupe","Carambola"];
			//让数组合并
			var shao=a.concat(b);
			var shao1=shao.concat(c);
			//数组长度
			alert(shao1.length);
			//访问
			alert(shao1);
		</script>
	</head>
	<body>
	</body>
</html>

  

includes() 包含

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>includes() 包含</title>
		<script type="text/javascript">
			//创建一个数组
			var shao = ["l", "love", "you"];
			//访问
			alert(shao.length); //数组空间长度
			alert(shao.includes("love"));//true 包含
			alert(shao.includes("hate"));//false 不包含
		</script>
	</head>
	<body>
	</body>
</html>

 包含为true，不包含为false。

数组放入字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组放入字符串</title>
		<script type="text/javascript">
			//创建数组  赋值
			var shao=new Array("my","name","is","xiaoshao");
			//访问
			alert(shao.join(" "));//使用 变成字符串
		</script>
	</head>
	<body>
	</body>
</html>

 

返回位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回位置</title>
		<script type="text/javascript">
			//indexOf()	搜索数组中的元素，并返回它所在的位置。
			//lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
			var shao = ["Blueberry", "Banana", "Bennet", "Black brin", "Bennet", "Blueberry", "Bryony"];
			alert(shao.indexOf("Bennet"));//2   最先出现的位置
			alert(shao.lastIndexOf("Blueberry"));//5  最后一次出现的位置
		</script>
	</head>
	<body>
	</body>
</html>

 第一次出现的位置

 最后一次出现的位置

 

添加元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加元素</title>
		<script type="text/javascript">
			//push()	向数组的末尾添加一个或更多元素，并返回新的长度。
			//unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
			//创建数组
			var shao=["xian","hangzhou","guangdong","shnaghai","beijing"];
			alert(shao.push("shenzhen"));//末尾添加元素 6
			alert(shao.unshift("chengdu","chongqing"));//开头添加元素 8
			//返回新的长度。
		</script>
	</head>
	<body>
	</body>
</html>

最初的元素个数是5个，给末尾添加一个变6个，给开头添加两个变8个。

删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
		<script type="text/javascript">
			//shift()	删除并返回数组的第一个元素。
			//pop()	删除数组的最后一个元素并返回删除的元素。
			//reverse()	反转数组的元素顺序。
			var shao=["a","b","c","d","e","f","g"];
			alert(shao.shift());//删除第一个元素，并返回删除的元素
			alert(shao.pop());//删除最后一个元素，并返回删除的元素
			alert(shao.reverse());//删除后剩下的元素到这排
		</script>
	</head>
	<body>
	</body>
</html>

删除第一个，并返回删除的元素

 

删除最后一个，并返回删除的元素

 使剩下的元素反正排序

 

slice(开始下标，结束下标)---选取数组的一部分，并返回一个新数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Array（数组） 对象</title>
		<script type="text/javascript">
			//slice(开始下标，结束下标)
			//创建一个数组
			var shao = ["l", "love", "you"];
			//访问
			alert(shao.slice(1,3)); //开始下标从0开始【1】，结束下标【3】，【3】第三个元素结束  从1开始
		</script>
	</head>
	<body>
	</body>
</html>

  

数组 排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组 排序</title>
		<script type="text/javascript">
		//numarr.sort(function(a,b){return a-b;}); //升序
		//numarr.sort(function(a,b){return b-a;}); //降序
			var num=[32,212,74,5,88];
			var num1=num.sort(function(a,b){return a-b;});
			alert(num1);
			var num2=num.sort(function(a,b){return b-a;});
			alert(num2);
			var shao=["s","j","b","g","v"];
			var shao1=shao.sort(); //升序
			alert(shao1);
			alert(shao1.reverse());//反转  降序
		</script>
	</head>
	<body>
	</body>
</html>

数字升序

 

数字降序

 

字符串升序

 

字符串降序

 

7.数组属性

属性

描述

constructor

返回创建数组对象的原型函数。

length

设置或返回数组元素的个数。

prototype

允许你向数组对象添加属性或方法。

8. 数组对象方法

方法

描述

concat()

连接两个或更多的数组，并返回结果。

copyWithin()

从数组的指定位置拷贝元素到数组的另一个指定位置中。

entries()

返回数组的可迭代对象。

every()

检测数值元素的每个元素是否都符合条件。

fill()

使用一个固定值来填充数组。

filter()

检测数值元素，并返回符合条件所有元素的数组。

find()

返回符合传入测试（函数）条件的数组元素。

findIndex()

返回符合传入测试（函数）条件的数组元素索引。

forEach()

数组每个元素都执行一次回调函数。

from()

通过给定的对象中创建一个数组。

includes()

判断一个数组是否包含一个指定的值。

indexOf()

搜索数组中的元素，并返回它所在的位置。

isArray()

判断对象是否为数组。

join()

把数组的所有元素放入一个字符串。

keys()

返回数组的可迭代对象，包含原始数组的键(key)。

lastIndexOf()

搜索数组中的元素，并返回它最后出现的位置。

map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

pop()

删除数组的最后一个元素并返回删除的元素。

push()

向数组的末尾添加一个或更多元素，并返回新的长度。

reduce()

将数组元素计算为一个值（从左到右）。

reduceRight()

将数组元素计算为一个值（从右到左）。

reverse()

反转数组的元素顺序。

shift()

删除并返回数组的第一个元素。

slice()

选取数组的一部分，并返回一个新数组。

some()

检测数组元素中是否有元素符合指定条件。

sort()

对数组的元素进行排序。

splice()

从数组中添加或删除元素。

toString()

把数组转换为字符串，并返回结果。

unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

valueOf()

返回数组对象的原始值。

二. Boolean（布尔） 对象

Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

1.创建布尔对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//创建布尔对象
		var  boo=new Boolean(true);
		var boo1=boo.toString();
		var boo2=boo.valueOf();
		alert(typeof(boo));//object 对象型
		alert(typeof(boo1));//string字符串型
		alert(typeof(boo2));//boolean 布尔型
		</script>
	</head>
	<body>
	</body>
</html>

 boo为object对象型，boo1为string字符串型，boo2为boolean布尔型。

2.注意事项

var num1=10; // 0==false 非0数字---true

var str="hello"; // 空字符串==false 非空字符串==true

var test1=null; // null==false

3.Boolean 对象属性

属性

描述

constructor

返回对创建此对象的 Boolean 函数的引用

prototype

使您有能力向对象添加属性和方法。

4.Boolean 对象方法

属性

描述

toString()

把布尔值转换为字符串，并返回结果。

valueOf()

返回 Boolean 对象的原始值。

三.Math（算数） 对象

Math（算数）对象的作用是：执行常见的算数任务。

Math 对象提供多种算数值类型和函数

1.Math 对象属性

属性

描述

E

返回算术常量 e，即自然对数的底数（约等于2.718）。

LN2

返回 2 的自然对数（约等于0.693）。

LN10

返回 10 的自然对数（约等于2.302）。

LOG2E

返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。

LOG10E

返回以 10 为底的 e 的对数（约等于0.434）。

PI

返回圆周率（约等于3.14159）。

SQRT1_2

返回 2 的平方根的倒数（约等于 0.707）。

SQRT2

返回 2 的平方根（约等于 1.414）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Math（算数） 对象</title>
		<script type="text/javascript">
			alert(Math.E);//2.718281828459045
			alert(Math.PI);//3.141592653589793
			alert(Math.LN2);//0.6931471805599453
			alert(Math.LN10);//2.302585092994046
			alert(Math.LOG2E);//1.4426950408889634
			alert(Math.LOG10E);//0.4342944819032518
			alert(Math.SQRT1_2);//0.7071067811865476
			alert(Math.SQRT2);//1.4142135623730951
			alert(Math.max(12,32,46,441,8));//441最大值
			alert(Math.min(12,32,46,441,8));//8最小值
		</script>
	</head>
	<body>
	</body>
</html>

2. Math 对象方法

方法

描述

abs(x)

返回 x 的绝对值。

acos(x)

返回 x 的反余弦值。

asin(x)

返回 x 的反正弦值。

atan(x)

以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

atan2(y,x)

返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。

ceil(x)

对数进行上舍入。

cos(x)

返回数的余弦。

exp(x)

返回 Ex 的指数。

floor(x)

对 x 进行下舍入。

log(x)

返回数的自然对数（底为e）。

max(x,y,z,...,n)

返回 x,y,z,...,n 中的最高值。

min(x,y,z,...,n)

返回 x,y,z,...,n中的最低值。

pow(x,y)

返回 x 的 y 次幂。

random()

返回 0 ~ 1 之间的随机数。

round(x)

四舍五入。

sin(x)

返回数的正弦。

sqrt(x)

返回数的平方根。

tan(x)

返回角的正切。

 round()四舍五入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//round(x)	四舍五入。
			alert(Math.round(-11.8));   //-11
			alert(Math.round(-2.3));   //-3
			alert(Math.round(3.4));   //3
			alert(Math.round(5.6));   //6
		</script>
	</head>
	<body>
	</body>
</html>

双斜杠后面为四舍五入的值。

0-1之间随机一个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			alert(Math.random());//0-1之间随机一个数
		</script>
	</head>
	<body>
	</body>
</html>

 0-10之间随机一个整数......

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num=parseInt(Math.random()*10+1);//parseInt他使字符串变成整数，但是99.99的值为99。
			alert(num);//0-10之间随机一个整数
			var num1=parseInt(Math.random()*100+1);
			alert(num1);//0-100之间随机一个整数
		</script>
	</head>
	<body>
	</body>
</html>

四.RegExp 对象

RegExp：是正则表达式（regular expression）的简写。

1.什么是 RegExp？

正则表达式描述了字符的模式对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

2.语法格式

var patt=new RegExp(pattern,modifiers);  

或者更简单的方式:

var patt=/pattern/modifiers; 

  • pattern（模式） 描述了表达式的模式
  • modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

 3.修饰符

修饰符用于执行区分大小写和全局匹配:

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

 4.方括号

方括号用于查找某个范围内的字符：

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

 5.元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符

描述

\

将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\\n”匹配\n。“\n”匹配换行符。序列“\\”匹配“\”而“\(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。

^

匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。

$

匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。

*

匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于{0,}。

+

匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。

?

匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。?等价于{0,1}。

{n}

n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。

{n,}

n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。

{n,m}

m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o为一组，后三个o为一组。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。

?

当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少地匹配所搜索的字符串，而默认的贪婪模式则尽可能多地匹配所搜索的字符串。例如，对于字符串“oooo”，“o+”将尽可能多地匹配“o”，得到结果[“oooo”]，而“o+?”将尽可能少地匹配“o”，得到结果 ['o', 'o', 'o', 'o']

.点

匹配除“\n”和"\r"之外的任何单个字符。要匹配包括“\n”和"\r"在内的任何字符，请使用像“[\s\S]”的模式。

(pattern)

匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“\(”或“\)”。

(?:pattern)

非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分时很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。

(?=pattern)

非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

(?!pattern)

非获取匹配，正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。

(?<=pattern)

非获取匹配，反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。

*python的正则表达式没有完全按照正则表达式规范实现，所以一些高级特性建议使用其他语言如java、scala等

(?<!pattern)

非获取匹配，反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。

*python的正则表达式没有完全按照正则表达式规范实现，所以一些高级特性建议使用其他语言如java、scala等

x|y

匹配x或y。例如，“z|food”能匹配“z”或“food”(此处请谨慎)。“[z|f]ood”则匹配“zood”或“food”。

[xyz]

字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。

[^xyz]

负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”任一字符。

[a-z]

字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。

注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.

[^a-z]

负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。

\b

匹配一个单词的边界，也就是指单词和空格间的位置（即正则表达式的“匹配”有两种概念，一种是匹配字符，一种是匹配位置，这里的\b就是匹配位置的）。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”；“\b1_”可以匹配“1_23”中的“1_”，但不能匹配“21_3”中的“1_”。

\B

匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。

\cx

匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。

\d

匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持

\D

匹配一个非数字字符。等价于[^0-9]。grep要加上-P，perl正则支持

\f

匹配一个换页符。等价于\x0c和\cL。

\n

匹配一个换行符。等价于\x0a和\cJ。

\r

匹配一个回车符。等价于\x0d和\cM。

\s

匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

\S

匹配任何可见字符。等价于[^ \f\n\r\t\v]。

\t

匹配一个制表符。等价于\x09和\cI。

\v

匹配一个垂直制表符。等价于\x0b和\cK。

\w

匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。

\W

匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。

\xn

匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。

\num

匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。

\n

标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。

\nm

标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。

\nml

如果n为八进制数字（0-7），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。

\un

匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（&copy;）。

\p{P}

小写 p 是 property 的意思，表示 Unicode 属性，用于 Unicode 正表达式的前缀。中括号内的“P”表示Unicode 字符集七个字符属性之一：标点字符。

其他六个属性：

L：字母；

M：标记符号（一般不会单独出现）；

Z：分隔符（比如空格、换行等）；

S：符号（比如数学符号、货币符号等）；

N：数字（比如阿拉伯数字、罗马数字等）；

C：其他字符。

*注：此语法部分语言不支持，例：javascript。

\<

\>

匹配词（word）的开始（\<）和结束（\>）。例如正则表达式\<the\>能够匹配字符串"for the wise"中的"the"，但是不能匹配字符串"otherwise"中的"the"。注意：这个元字符不是所有的软件都支持的。

( )

将( 和 ) 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用 \1 到\9 的符号来引用。

|

将两个匹配条件进行逻辑“或”（or）运算。例如正则表达式(him|her) 匹配"it belongs to him"和"it belongs to her"，但是不能匹配"it belongs to them."。注意：这个元字符不是所有的软件都支持的。

6. 量词

量词描述
n+

匹配任何包含至少一个 n 的字符串。

例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。

n*

匹配任何包含零个或多个 n 的字符串。

例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。

n?

匹配任何包含零个或一个 n 的字符串。

例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。

n{X}

匹配包含 X 个 n 的序列的字符串。

例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。

n{X,}

X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。

例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。

n{X,Y}

X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。

例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。

n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

7.RegExp 对象方法

方法描述
compile在 1.5 版本中已废弃。 编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。
toString返回正则表达式的字符串。

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

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

9.RegExp 对象属性

属性描述
constructor返回一个函数，该函数是一个创建 RegExp 对象的原型。
global判断是否设置了 "g" 修饰符
ignoreCase判断是否设置了 "i" 修饰符
lastIndex用于规定下次匹配的起始位置
multiline判断是否设置了 "m" 修饰符
source返回正则表达式的匹配模式

 五.常用的正则表达式

1.校验数字的表达式

  • 数字：^[0-9]*$
  • n位的数字：^\d{n}$
  • 至少n位的数字：^\d{n,}$
  • m-n位的数字：^\d{m,n}$
  • 零和非零开头的数字：^(0|[1-9][0-9]*)$
  • 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
  • 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
  • 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
  • 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
  • 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
  • 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
  • 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
  • 非负整数：^\d+$ 或 ^[1-9]\d*|0$
  • 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
  • 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
  • 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
  • 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
  • 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
  • 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

2.校验字符的表达式

  • 汉字：^[\u4e00-\u9fa5]{0,}$
  • 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
  • 长度为3-20的所有字符：^.{3,20}$
  • 由26个英文字母组成的字符串：^[A-Za-z]+$
  • 由26个大写英文字母组成的字符串：^[A-Z]+$
  • 由26个小写英文字母组成的字符串：^[a-z]+$
  • 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
  • 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
  • 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
  • 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
  • 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+ 12 禁止输入含有~的字符：[^~\x22]+

3.特殊需求表达式

  • Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  • 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
  • InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
  • 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
  • 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
  • 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
  • 身份证号(15位、18位数字)：^\d{15}|\d{18}$
  • 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
  • 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
  • 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
  • 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
  • 日期格式：^\d{4}-\d{1,2}-\d{1,2}
  • 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
  • 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
  • 钱的输入格式：
  • 有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
  • 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
  • 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
  • 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
  • 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
  • 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
  • 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
  • 到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
  • 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
  • xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
  • 中文字符的正则表达式：[\u4e00-\u9fa5]
  • 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
  • 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
  • HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
  • 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
  • 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
  • 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
  • IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
  • IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

实例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>RegExp 对象</title>
		<script type="text/javascript">
		//正则表达式查询手机号
			var patt=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
			alert(patt.test("18700654318"));//true
			alert(patt.test("11200654318"));//false
		</script>
	</head>
	<body>
	</body>
</html>

 实例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>RegExp 对象</title>
		<script type="text/javascript">
		//正则表达式查询身份证
			var patt=new RegExp(/^\d{15}|\d{18}$/);
			alert(patt.test("610522200008192318"));//true
			alert(patt.test("6105222000081"));//false
		</script>
	</head>
	<body>
	</body>
</html>

实例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>RegExp 对象</title>
		<script type="text/javascript">
		// 汉字：^[\u4e00-\u9fa5]{0,}$
			var patt=new RegExp(/^[\u4e00-\u9fa5]{0,}$/);
			alert(patt.test("阿斯顿飞过"));//true
			alert(patt.test("l_love_you12#3"));//false
		</script>
	</head>
	<body>
	</body>
</html>

注册实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//点击事件
			function shao() {
				//得到文本框中输入的账号
				var phone1 = document.getElementById("input1").value;
				//得到密码框的密码
				var phone2 = document.getElementById("input2").value;
				//创建正则表达式对象
				var patt = new RegExp(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/);
				//匹配手机号码
				if (patt.test(phone1)) {
					//创建正则表达式对象
					var patt = new RegExp(/^[a-zA-Z]\w{5,17}$/);
					//匹配手机号码
					if (patt.test(phone2)) {
						alert("注册成功");
					} else {
						alert("密码不合法!");
					}
				} else {
					alert("账号不合法!");
				}
				
				
			}
		</script>
	</head>
	<body>
		<input type="text" id="input1" /><br>
		<input type="password" id="input2" /><br>
		<input type="button" value="注册" onclick="shao();" />
	</body>
</html>

当注册账号不和规范时：

 当注册密码不和规范时：

 当账号密码都符合规范时：

 

WildKingxue
关注
专栏目录
js 乱码 反斜杠_js 转义字符及URI编码详解
weixin_39531761的博客
02-26 2017
URL中的转义字符当URL的参数中出现诸如+，空格，/，?，%，#，&，=等特殊字符串符号时，因为上述字符有特殊含义，导致服务器端无法正确解析参数，如何处理？解决办法：将这些字符转化成服务器可以识别的字符。如果要在URL中传递特殊符号的原本意义，要对他们进行编码。编码的格式为：%加字符的ASCII码(16进制)，例如空格的编码值是"%20"。URL中特殊符号的用途及普通意义的编码+URL ...
java中关于indexOf()函数和lastIndexOf()函数的使用方法
weixin_44035979的博客
12-21 1169
indexOf(String str) 函数和 lastIndexOf(String str) 函数都是String类中的函数，都是查找函数，查找str在字符串中出现的位置 一、indexOf(String str) 函数用法： public class T { public static void main(String[] args) { String m = "Iamastudent"...
javaScript——‘\’转义
songshuguowang的专栏
01-14 7779
转义 反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。 需要用反斜杠转义的特殊字符，主要有下面这些。 \0 ：null（\u0000） \b ：后退键（\u0008） \f ：换页符（\u000C） \n ：换行符（\u000A） \r ：回车键（\u000D） \t ：制表符（\u0009） \v ：垂直制表符（\u000B） \' ：单引号（\u0...
JS中的反斜杠 (\)是什么意思
清华大咖
08-27 8353
JS中的反斜杠 (\)是什么意思 在js中我们经常能看到“\”。让人有一种看不懂的错觉。那么，为什么本来正常的代码，要加上反斜杠呢，他的作用是什么呢 我们先来看一段代码 "<input id=\"countCost\" name=\"countCost\" class=\"mini-textbox\" value=\"" + countCost + "\" allowInput=\...
js 字符串处理\\n和\\\
偏执的小男孩儿
04-18 1871
js 字符串处理\\n和\\\
Javascript高级笔记总结.pdf
04-03
JavaScript是Web开发中不可或缺的一部分，它负责为网页添加动态效果和交互性。在JavaScript中，ES6（ECMAScript 2015）引入了许多新特性，极大地提升了开发效率和代码质量。本篇笔记主要围绕ES6中创建变量的新方法...
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
10-28
在深入探讨JavaScript编程语言之前，...在《JavaScript高级程序设计》这本书中，作者深入探讨了这些概念，并提供了一系列实用的编程技巧和最佳实践，这对于任何希望深化JavaScript知识的开发者来说都是一份宝贵的资源。
基于JavaScript、CSS、HTML和Java的MySQL高级深度总结设计源码
最新发布
10-04
该项目是一款综合运用HTML、JavaScript、CSS和Java的高级MySQL深度总结设计源码，汇集2041个文件，涵盖656个PNG图片、576个JavaScript文件、327个CSS文件、218个HTML文件、49个Java文件以及少量XML、JSON、Map等其他...
JavaScript中常用的简洁高级技巧总结
10-17
在JavaScript编程中，掌握一些简洁而高级的技巧可以极大地提高代码的可读性和效率。本文将探讨几个常用的数据类型检测方法以及其他的实用技巧。 一、数据类型检测 1.1 `typeof` 操作符 `typeof` 是JavaScript中最...
JavaScript高级程序设计学习总结
02-23
在《JavaScript高级程序设计》这本书中，作者深入浅出地讲解了这门语言的高级概念和技术，帮助开发者提升技能水平。以下是我对这本书学习的总结： 1. **变量与数据类型** JavaScript中的变量是动态类型的，可以...
js将字符串中所有反斜杠\替换成正斜杠/
热门推荐
java群210698865的专栏
01-16 2万+
js将字符串中所有反斜杠\替换成正斜杠/ 区分正斜杠与反斜杠： 正斜杠：http：//。http紧跟着的斜杠，离手输入最近的斜杠，shift中间斜杠。45度角斜杠。正斜杠不需要转义 反斜杠：回车与空格之间。程序表示时需要转义成\\。 str.replace(/\\/,/); 1》要想定义字符串a\b\c需要这样写var str = "a\\b\\c"; 2》alert(
JS用正则把双反斜杠\\转换成正斜杠/
打杂人
01-25 2万+
webosName = "webos\\", tempPath = path.substring(path.indexOf(webosName) + 6); tempPath = "webos\s07549e09be07417c@-1\jreport-webstudio\webreport\s07549e09c33ec190\Link.pdf"; 把 反斜杠\转换成正斜杠
JavaScript 替换字符串中的反斜杠
且听风吟的博客
07-15 2439
const str = str.replace(/\\/g, '') 替换前： 替换后：
JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解
01-19
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。很早就接触过闭包这个概念了，但是一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，今天在网上...
前端JavaScript总结
06-19
JavaScript还有许多高级特性，如Promise和async/await用于处理异步操作，模块系统（CommonJS、ES6模块）用于组织代码，以及Set、Map等新的数据结构。ES6及以后的版本带来了更多的语法糖，如解构赋值、默认参数、剩余...
JavaScript 特殊字符（二十一）
mzoy的专栏
07-29 846
  你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。插入特殊字符反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。请看下面的 JavaScript 代码：var txt="We are the so-called "Vikings" from the north."document.write(txt)在 JavaScript
关于反斜杠问题记录
ABestRookie的博客
04-01 738
关于反斜杠问题记录一 问题引入二 解决方法 在一次偶然测试中, 发现了一个关于反斜杠的小问题, 因对此类特殊字符,平常使用较少,所以花了一些时间去解决问题, 并且觉得此问题比较有趣, 故整理记录一下,方便后续解决同类问题. 一 问题引入 在一些特殊的应用场景中,需要对数据进行过滤,将一些非法的字符进行拦截,过滤,替换等等, 常见的场景如一些敏感的词语过滤,比如一些游戏ID等不允许特殊词语和字符等,甚至应用在某些项目为防止xss攻击等. 如下Demo案例展示, 要求将请求参数即reqStr字符串中的特殊字符替
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值