数组&对象&正则表达式
1 数组
- 数组的概念 ：JavaScript数组是指将多个数据对象编码存储、提供一致的存取方式的集合
- 数组元素：是指存储在数组中并赋予唯一索引号的数据段 。
- 与其它程序语言不同的是，JavaScript的数组元素的数据类型可以不相同
- 各元素的数据类型可以是任意有效的JavaScript数据类型，元素按添加进数组的顺序存储于数组中。
实际开发中，总是面临大量数据存储的问题。JavaScript语言不像C/C++那样合适用于数据结构的设计，因此需要系统内部提供针对大量数据存储的工具，数组因此而产生。JavaScript数组的目标是能组织存储各种各样的数据，并且访问方式和其它语言一样，特点是能混合存储类型不相同的数据。
一维数组
多维数组
1.1 数组对象
- 数组是一组变量的有序集合
- 通过数组索引来使用一个变量
1.2 创建数组
1.2.1 创建一个空数组
- 数组在创建时可以不包含任何元素数据，即空数组。创建后返回一个数组对象，使用该对象可以往数组中添加元素。数组长度不固定，赋值即可改变长度（动态）。
var Obj = new Array();
- 上述语句将创建一个空数组。变量Obj引用创建后的数组对象，通过此变量可以操作数组，Array()为数组对象的构造函数。
1.2.2 通过指定数组长度创建数组
- 在创建数组时可以指定数组的元素长度，通过这种方式可以创建一个有指定元素个数的数组对象 。
var Obj = new Array(Size);
- Size指明新建的数组有多少个元素。数组对象的length将被设置为Size，仅指定长度但没有实际填充元素及其数据的数组将得不到数据存储空间
1.2.3 通过指定数组元素创建数组
- 新建的数组将包含创建时指定的元素，通常用在数据已经准备就绪的场合。
var Obj = new Array("Peter","Tom","Vicky","Jet");
- 创建数组：数组善于将每个独立的数据组织起来，提供一致的访问方式。
1.2.4 直接创建数组
- JavaScript创建数组的另一种简便的方式是使用“[]”运算符直接创建，数组的元素也是创建时被指定。
var Obj = ["Peter","Tom","Vicky","Jet"];
- 注意：JavaScript中的数组可以随意增加长度，只要赋值了就可以；按照下面方法创建数组，则长度为5,其中myArra[3]的值为undefined。
JavaScript的数组下标也是从0开始的
var myArray = new Array(1,2,3);
myArray[4]=4;
1.3 使用数组
- 读取数组元素
- 使用“[]”运算符可以一次读取一个数组元素
- 目标元素通常由下标索引号决定，例如读取第一个元素为“数组名[0]”，依此类推
- 赋值
- 直接赋值：这样一次只能给一个元素赋值
- 通过for循环赋值：这样可以一次给多个元素赋值
- 数组的主要属性length
- 返回数组长度的整数值
- 数组对象的length（长度）属性指示了数组元素的个数。
- 通过设定length属性可以指定数组的长度。
- 尽管指定了数组的length属性，真正的有效元素只包含已经存入数据的元素，其它没有真正填充数据的元素仍然为空。
- 取值
- 直接使用：用下标直接指定元素
- 通过for循环取值
- 同赋值的的for循环
- for-in循环
1.4 Array对象的常用方法
concat：返回一个新数组；由两个或者更多数组组合而成
join：返回字符串；由数组中的所有元素连接到一起，元素间的间隔符由参数指定，省略参数则用逗号分隔
reverse：返回一个新数组；由原来的数组反转而成
pop：移除数组中的最后一个元素并返回该元素
push：给数组中增加新元素，并返回数组的新长度
shift：移除数组中的第一个元素并返回该元素
-
slice：返回一个新数组，为原数组中的一段
- start 开始元素是从零开始计算的下标。
- end 结束元素是从零开始计算的下标。
- slice方法一直复制到end所指定的元素，但是不包括该元素。
- 如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。
- 如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。
- 如果省略 end ，那么 slice 方法将一直复制到数组的结尾。
- 如果 end 出现在 start 之前，不复制任何元素到新数组中。
-
sort：返回一个排序后的新数组。sort函数的参数是一个函数，这个函数用来确定元素顺序。如果这个参数被省略，那么元素将按照 ASCII 字符顺序进行升序排列。sort方法在执行过程中并不会创建新的Array对象。
如果提供了参数，那么该函数必须返回下列值之一：- 负值，如果所传递的第一个参数比第二个参数小。
- 零，如果两个参数相等。
- 正值，如果第一个参数比第二个参数大。
toString：返回将Array中的元素转为由逗号分隔的字符串
-
splice：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
- start 指定从数组中移除元素的开始位置，这个位置是从 0 开始计算的。
- deleteCount 要移除的元素的个数。
- item1, item2,. . .,itemN 要在所移除元素的位置上插入的新元素
arr.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var list1 = new Array();
var list2 = new Array(5);
var list3 = new Array("Peter","Tom","Vicky","Jet");
list1[0] = "laijie";
list1[1] = 1;
list1[2] = 3;
console.log(typeof list1[1]);
console.log(list2);
console.log(list3);
var list2 = new Array(30);
var list4 = [7,5,3,2];
console.log(list4[2]);
list2[0] = 19;
for(var i=0;i<30;i++){
list2[i] = i+10;
}
// for(var i=0;i<30;i++){
// console.log(list2[i]);
// }
for(var i in list2){
console.log(i);
console.log(list2[i]);
}
function ascsort(x,y){
return x == y ? 0:(x > y ? 1 : -1);
}
var list3 = new Array(10,5,7,6,8);
console.log(list3[1]);
list8 = list3.sort(ascsort);
list8[1] = 999;
console.log(list8);
console.log(list3);
var list5 = [1,2,3,4,5];
var str1 = list5.toString();
console.log(str1);
console.log(list5.slice(1,3));
console.log(list5.reverse())
console.log(list5.join("."));
console.log(list5.concat(list4,list3));
console.log(list4.pop());
console.log(list4.push(1));
console.log(list4.shift());
console.log(list4);
console.log(list4.slice(1,3));
var list6 = [1,2,3,4,5,6];
var list7 = list6.splice(2,3,9,9,9,9);
console.log(list6);
console.log(list7);
</script>
</head>
<body>
</body>
</html>
效果1
效果2
效果3
2 对象
什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。引用类型是一种数据结构，用于将数据和功能组织在一起。
- JavaScript对象
- 属性（properties）
- 描述对象的属性
- 用“.”把属性和对象连接起来
- 方法（methods）
- 描述对象的行为动作
- 用“.”连接
- 属性（properties）
- Object类型
- 最常用的引用类型
- 创建Object类型
- 使用new运算符：new关键字可以省略
- 字面量表示法：属性字段也可以使用字符串
- 属性字段的输出方式
- 点表示法
- 中括号表示法
- 给对象创建方法：
- 在对象中直接定义方法
- 函数原型法[1]
- 使用delete删除对象属性
2.1 with语句
- with语句的作用是将代码的作用域设置到一个特定的对象中。
- 在with语句体内，任何对变量的引用都被认为是这个对象的属性
2.2 对象废除
- JavaScript不必专门销毁对象来释放内存
- 当再没有针对某对象的引用时，该对象被废除
- 把对象的所有引用设置为null，可以强制废除对象
- 当运行无用存储单元收集程序时，所有废除对象都被销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var obj1 = new Object();
var obj2 = Object();
var obj3 = {
"stuid":10001,
"stuname":"张三"
}
obj1.stuid = 10002;
obj1.stuname = "李四";
obj2.stuid = 10002;
obj2.stuname = "王五";
console.log(obj1.stuid);
console.log(obj2.stuname);
console.log(obj3["stuname"]);
//-----------------------------------------------------------------
function Person(firstName,age){
this.firstName = firstName;
this.age = age;
}
// function Person(firstName){
// this.firstName = firstName;
// }
Person.prototype.f1 = function(){
console.log("f111111111111111111");
}
var p1 = new Person("zhangsan",21);
console.log(p1.firstName,p1.age);
var p2 = new Person("zhangsan",31);
p2.f1();
//--------------继承------------------
function Student(firstName,stuid){
Person.call(this,firstName);
this.stuid = stuid;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.f2 = function(){
console.log("sayhello");
}
var stu1 = new Student("李明",10005);
stu1.f2();
stu1.f1();
console.log(stu1.firstName);
//----------------------判断对象所属的类-----------------------
console.log(stu1 instanceof Student);
console.log(stu1 instanceof Person);
stu1 = null;
console.log(stu1);
var s = '//张三';
console.log(encodeURI(s));
console.log(encodeURIComponent(s));
console.log(decodeURI(encodeURI(s)));
console.log(decodeURIComponent(encodeURIComponent(s)));
</script>
</head>
<body>
</body>
</html>
效果4
2.3 常用的内部对象
2.3.1 Array对象
Array在第一节中已经讲得很详细了，所以这里不再赘述。
2.3.2 Global对象
- Global(全局)对象是ECMAScript中一个特别的对象，因为这个对象是不存在的
- 在ECMAScript中不属于任何其他对象的属性和方法，都属于它的属性和方法。
- Global对象有一些内置的属性和方法：
- URI编码方法
- eval()方法
2.3.2.1 URI编码方式
- URI编码可以对链接进行编码，以便发送给浏览器。
- 采用特殊的UTF-8编码替换所有无效字符，从而让浏览器能够接受和理解。
- encodeURI()方法不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和#号；
- encodeURIComponent()则会对它发现的任何非标准字符进行编码
- decodeURI()和decodeURIComponent()方法，用来进行解码
2.3.2.1 eval()方法
- eval()方法主要担当一个字符串解析器的作用
- 只接受一个参数，而这个参数就是要执行的JavaScript代码的字符串
2.3.3 Date对象
- 可以用来表示任意的日期和时间，获取当前系统日期以及计算两个日期的间隔
- 给出星期、月份、天数、年份、小时、分钟和秒表示的时间
- 要使用new运算符创建一个新的Date对象
Date对象的构造方法
-
Date没有直接访问的属性，只有获取和设置的方法，
- 获取日期和时间的方法
- getYear()：返回年数；（小于2000年返回两位）
- getFullYear()：返回年数；
- getMonth()：返回当月号数；（比实际小1）
- getDate()：返回当日号数；
- getDay()：返回星期几；（0表示星期日）
- getHours()：返回小时数；
- getMinutes()：返回分钟数；
- getSeconds()：返回秒数；
- getTime()：返回毫秒数；
- 设置日期和时间的方法
- setYear()：设置年数；
- setMonth()：设置当月号数；（set7表示8月）
- setDate()：设置当日号数；
- setDay()：设置星期几；
- setHours()：设置小时数；
- setMinutes()：设置分钟数；
- setSeconds()：设置秒数；
- setTime()：设置毫秒数；
- 获取日期和时间的方法
JavaScript自1970年1月1日以来一直以毫秒的形式在内部存储日期
在读取当前日期和时间时，代码依赖的是客户机的时钟，如果客户机的时间有误，代码会如实反映
星期的天数以及年的月数是从0开始的。因此，第0天是星期日，第6天是星期六；第0月是1月。但是每月的天数是从1开始计数的
Date对象的setDate、setMonth方法的参数可以为负值，会导致从年或者月借位
2.3.3.1 Date的其他方法
- to方法
to方法
- parse和UTC方法
- parse()方法
- 解析一个包含日期的字符串，并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数。
- 注意:
- 短日期可以使用“/”或“-”作为日期分隔符，但是必须用月/日/年的格式来表示，例如"7/20/96"。
- 年份值可以用 2 位数字表示也可以用 4 位数字表示。如果使用 2 位数字来表示年份，那么该年份必须大于或等于 70。
- 如果传递给parse的参数不能解析成不能转换成字符串，则返回NaN
- parse()方法
- UTC()方法
- Date.UTC() 方法的参数指定日期和时间，它们都是 UTC 时间，处于 GMT 时区。指定的 UTC 时间将转换成毫秒的形式，这样构造函数 Date() 和方法 Date.setTime() 就可以使用它了。
- Date.UTC(year,month,date[,hours][,minutes][,seconds][,ms])
- year 必选项。完整的年份，比如，1976（而不是 76）。
- month 必选项。表示的月份，是从 0 到 11 之间的整数（ 1 月至 12 月）。
- date 必选项。表示日期，是从 1 到 31 之间的整数。
- hours 可选项。 如果提供了 minutes 则必须给出。表示小时，是从 0 到 23 的整数（午夜到 11pm）。
- minutes 可选项。 如果提供了 seconds 则必须给出。表示分钟，是从 0 到 59 的整数。
- seconds 可选项。 如果提供了 milliseconds 则必须给出。表示秒钟，是从 0 到 59 的整数。
- ms 可选项。 表示毫秒，是从 0 到 999 的整数。
Parse和UTC方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var dd = new Date();
var dd2 = new Date(2020,2,1,8,0,0);
console.log(dd2.getDay());
console.log(dd2.getFullYear());
console.log(dd2.getMonth());
console.log(dd2.getDate());
console.log(dd2.getHours());
console.log(dd2.getMinutes());
console.log(dd2.getSeconds());
console.log(dd2.getTime());
</script>
</head>
<body>
</body>
</html>
效果5
2.3.4 Math对象
Math对象是全局对象，使用时不需要创建实例
Math对象属性
Math对象方法
2.3.5 String对象
和原始字符串类型对应的内置对象
- 属性
- constructor：表示创建对象的函数
- length：返回String对象的长度
- 方法
charAt 方法：返回指定索引位置处的字符。
charCodeAt 方法：返回一个整数，代表指定位置上字符的 Unicode 编码。
concat 方法：连接字符串
indexOf 方法：返回 String 对象内第一次出现子字符串的字符位置。
lastIndexOf 方法：返回 String 对象中子字符串最后出现的位置。
-
match 方法：使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。如果 match 方法没有找到匹配，返回 null。
- match 方法返回的数组有两个属性：input、index。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。（全局模式下不提供）
- 如果没有设置全局标志 (g)，数组的0元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素0到n中包含所有匹配。
replace方法：返回根据正则表达式进行文字替换后的字符串的复制
search 方法：返回与正则表达式查找内容匹配的第一个子字符串的位置。如果找到一个匹配，search 方法将返回一个整数值。如果没有找到匹配，则返回 -1
slice 方法：类似与vb的mid函数，截取字符串。
split 方法：分隔字符串，该方法的第二个参数，可以限制返回数组的元素个数，如果第一个参数为空字符串，则返回字符串中的字符序列组成的数组。如果split方法没有任何参数，则返回仅包含字符串本身，仅有一个元素的数组。
substr 方法：返回一个从指定位置开始的指定长度的子字符串
substring 方法：返回一个从指定位置开始的指定长度的子字符串
toLowerCase 方法：返回一个字符串，该字符串中的字母被转换为小写字母
toUpperCase 方法：返回一个字符串，该字符串中的字母被转换为大写字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var s1 = "abcdefgef";
console.log(s1.length);
console.log(s1.charAt(2));
var s2 = "Aijklmn";
console.log(s1.concat(s2));
console.log(s1.indexOf("nn"));
s3 = s2.replace("ij","mn");
console.log(s3)
console.log(s1.split("e"));
console.log(s1.substr(3,3))
console.log(s1.substring(3,5));
console.log(s1.toUpperCase());
console.log(s2.toLowerCase());
var d1 = new Date("2025-11-11");
var d2 = new Date();
console.log(d1.getDay());
var ms = d1 - d2;
console.log(ms);
var days = Math.round(ms/(1000*60*60*24));
console.log(days);
function de_space(str1){
var start = 0;
var end = str1.length-1;
for(var i=0;i<str1.length;i++){
if(str1[i] != " "){
start = i;
break;
}
}
for(var i=str1.length-1;i>=0;i--){
if(str1[i] != " "){
end = i;
break;
}
}
return str1.substring(start,end+1);
}
console.log(de_space(" abc def g "));
</script>
</head>
<body>
</body>
</html>
效果6
2.3.6 Number对象
Array已经讲过了，所以这里不再赘述。
2.3.7 Boolean对象
Boolean很简单，所以不需要过多讲解。
2.4 定义类或者对象的方法
2.4. 1 工厂方法
function createCar(sColor){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.showColor = function (){
alert(this.color);
}
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();
- 调用此函数时，将创建新对象，并赋予它所有必要的属性。使用此方法将创建car对象的两个版本（oCar1和oCar2），他们的属性完全一样。
- 使用此方法存在的问题：
- 语义上看起来不像使用带有构造函数的new运算符那么正规。
- 使用这种方式必须创建对象的方法。每次调用createCar()，都要创建showColor()，意味着每个对象都有自己的showColor()版本，事实上，每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法，然后通过属性指向该方法。
function createCar1(sColor1){
var oTempCar1 = new Object;
oTempCar1.color = sColor1;
oTempCar1.showColor = showColor1;
return oTempCar1;
}
function showColor1(){
alert(this.color);
}
var oCar3 = createCar1();
var oCar4 = createCar1();
在这段重写的代码中，在函数createCar()外定义了函数showColor()。在createCar()内部，赋予对象一个已经指向已经存在的showColor()函数的指针。从功能上来讲，这样解决了重复创建对象的问题，但该函数看起来不像对象的方法。
所有这些问题引发了开发者定义的构造函数的出现。
2.4.2 构造函数方式
function Car(sColor){
this.color = sColor;
this .showColor1 = function(){
alert(this.color);
}
}
var oCar5 = new Car('red');
var oCar6 = new Car('blue');
你可能已经注意到第一个差别了，在构造函数内部无创建对象，而是使用this关键字。使用new运算符调用构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用return运算符）。这种方式在管理函数方面与工厂方法一样都存在相同的问题。
2.4.3 原型方式
function Car1(){
}
Car1.prototype.color = 'blue';
var oCar1 = new Car1();
var oCar2 = new Car1();
调用new Car()时，原型的所有属性都被立即赋予要创建的对象，意味着所有的Car实例存放的都是指向showColor()函数的指针。从语义上看起来都属于一个对象，因此解决了前面两种方式存在的两个问题。此外使用该方法，还能用instanceof运算符检查给定变量指向的对象类型。
这个方式看起来很不错，遗憾的是，它并不尽如人意。
- 首先这个构造函数没有参数。使用原型方式时，不能给构造函数传递参数初始化属性的值，因为car1和car2的属性都等于“red”。
- 真正的问题出现在属性指向的是对象，而不是函数时。函数共享不会造成任何问题，但是对象却很少被多个实例共享的。
2.4.4 混合的构造函数/原型方式
function Car(sColor){
this.color = sColor;
this.drives = new Array("Mike","Sue");
}
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar7 = new Car("red");
var oCar8 = new Car("blue");
oCar7.drives.push("Matt");
alert(oCar7.drives);
alert(oCar8.drives);
联合使用构造函数和原型方式，就可像用其他程序设计语言一样创建对象。这种概念非常简单，即用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。
2.4.5 动态原型方式
对于习惯使用其他语言的开发者来说，使用混合的构造函数/原型方式感觉不那么和谐。批评混合的构造函数/原型方式的人认为，在构造函数内找属性，在外部找方法的做法很不合理。所以他们设计了动态原型方式，以提供更友好的编码风格。
动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。
function Car(sColor){
this.color = sColor;
this.drives = new Array("Mike","Sue");
if(typeof Car._initialized =="undefined"){
Car.prototype.showColor = function(){
alert(this.color);
}
}
Car._initialized = true;
}
var oCar9 = new Car("red");
var oCar10 = new Car("blue");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//工厂方式
// function createCar(sColor){
// var oTempCar = new Object;
// oTempCar.color = sColor;
// oTempCar.showColor = function (){
// alert(this.color);
// }
// return oTempCar;
// }
// var oCar1 = createCar(1);
// var oCar2 = createCar(2);
// oCar1.showColor();
// oCar2.showColor();
// function createCar1(sColor1){
// var oTempCar1 = new Object;
// oTempCar1.color = sColor1;
// oTempCar1.showColor = showColor1;
// return oTempCar1;
// }
// function showColor1(){
// alert(this.color);
// }
// var oCar3 = createCar1(3);
// var oCar4 = createCar1(4);
// oCar3.showColor();
// oCar4.showColor();
//构造函数方式
// function Car(sColor){
// this.color = sColor;
// this .showColor1 = function(){
// alert(this.color);
// }
// }
// var oCar5 = new Car('red');
// var oCar6 = new Car('blue');
// oCar5.showColor1();
// oCar6.showColor1();
//原型方式
// function Car1(){
// }
// Car1.prototype.color = 'blue';
// var oCar1 = new Car1();
// var oCar2 = new Car1();
// console.log(oCar1.color);
// console.log(oCar2.color);
//混合的构造函数/原型方式
// function Car(sColor){
// this.color = sColor;
// this.drives = new Array("Mike","Sue");
// }
// Car.prototype.showColor = function(){
// alert(this.color);
// }
// var oCar7 = new Car("red");
// var oCar8 = new Car("blue");
// oCar7.drives.push("Matt");
// alert(oCar7.drives);
// alert(oCar8.drives);
//动态原型方式
// function Car(sColor){
// this.color = sColor;
// this.drives = new Array("Mike","Sue");
// if(typeof Car._initialized =="undefined"){
// Car.prototype.showColor = function(){
// alert(this.color);
// }
// }
// Car._initialized = true;
// }
// var oCar9 = new Car("red");
// var oCar10 = new Car("blue");
// oCar9.drives.push("Matt");
// alert(oCar9.drives);
// alert(oCar10.drives);
</script>
</head>
<body>
</body>
</html>
3 正则表达式
- 正则表达式(regular expression)是一个描述字符模式的对象。
- ECMAScript的RegExp类表示正则表达式
- String和RegExp都定义了使用正则表达式进行模式匹配和文本检索与替换的函数
- 正则表达式主要用来验证客户端的输入数据。
3.1 创建正则表达式
- 参数字符串方式
- 直接在两个反斜杠中间写
参数模式
3.2 RegExp对象的方法
- test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false。
- exec()方法也用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null
RegExp对象的方法
3.3 RegExp对象的静态属性
RegExp的静态属性
3.4 RegExp对象的实例属性
RegExp对象的实例属性
3.5 RegExp对象中的正则表达式方法
RegExp对象的正则表达式方法
3.6 常用的元字符
| 元字符 | 匹配项 |
|---|---|
| ^ | 匹配输入字符串的开始位置。要匹配 "^" 字符本身，请使用 "^"。 |
| $ | 匹配输入字符串的结尾位置。要匹配 "$" 字符本身，请使用 "$" |
| ( ) | 标记一个子表达式的开始和结束位置。要匹配小括号，请使用 "(" 和 ")" |
| [ ] | 用来自定义能够匹配 '多种字符' 的表达式。要匹配中括号，请使用 "[" 和 "]" |
| { } | 修饰匹配次数的符号。要匹配大括号，请使用 "{" 和 "}“ |
| . | 匹配除了换行符（\n）以外的任意一个字符。要匹配小数点本身，请使用 "." |
| + | 表示前面的字符或者组合项必须在目标对象中连续出现一次或多次。要匹配 "+" 字符本身，请使用 "+" |
| * | 表示前面的字符或者组合项必须在目标对象中出现零次或连续多次。要匹配 "*" 字符本身，请使用 "*" |
| ? | 表示前面的字符或者组合项必须在目标对象中连续出现零次或一次。要匹配 "?" 字符本身，请使用 "?" |
| | | 左右两边表达式之间 "或" 关系。匹配 "|" 本身，请使用 "|” |
| \d | 匹配一个数字字符。等价于 [0-9]。 |
| \D | 匹配一个非数字字符。等价于 [^0-9]。 |
| \w | 用于匹配字母，数字或下划线字符。 |
| \W | W大写，可以匹配任何一个字母或者数字或者下划线以外的字符 |
| [a-z] | 字符范围。匹配指定范围内的任意字符。 |
| [^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符。 |
| x | y 匹配 x 或 y |
| {n} | 表示前面的字符或者组合项连续出现n次 |
| {n,} | 表示前面出现的字符或者组合项，至少出现n次 |
| {n,m} | 表示前面出现的字符或者组合项，至少出现n次，至多出现m次，（n<＝m） |
| \d{4} | 4个任意的数字 |
常用的正则表达式有很多，需要时直接在网上找即可，不必全部背下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var pattern = new RegExp("box","ig");
var str1 = "saaskBOXljdsfsdj asboxdaBox sda";
console.log(pattern.test(str1));
console.log(pattern.exec(str1));
console.log(RegExp.input);
console.log(RegExp.leftContext);
console.log(RegExp.rightContext);
console.log(RegExp.$_);
console.log(str1.match(pattern));
console.log(pattern.lastIndex);
console.log(str1.replace(pattern,"rrrr"),2222222222222222222222222222222222);
console.log(str1.search(pattern));
console.log(str1.split(pattern));
var pattern1 = new RegExp("^box","ig");
var str2 = "bOxsaaskBOXljdsfsdj asdaBox sda";
console.log(str2.match(pattern1));
var pattern2 = new RegExp("box","ig");
var str3 = "saaskoOXljdsfsdj asdaBox sdabox";
console.log(str3.match(pattern2));
var pattern3 = new RegExp("b[a-z]x","ig");
var str4 = "buxsaaskBaXljdsfsdj asdaBsx sdabOx";
console.log(str4.match(pattern3));
var pattern4 = new RegExp("b{2,5}x","ig");
var str5 = "bbxuxsaaskBaXljdsfsdj asdaBbbbBx sdabOx";
console.log(str5.match(pattern4));
var pattern5 = new RegExp("(abc){2,5}x","ig");
var str6 = "buxsaAbCabcxskBaXljdsfsdj asdaBsx sdabOx";
console.log(str6.match(pattern5));
var pattern6 = new RegExp("b.{1,5}x","ig");
var str7 = "buxsaAbCabcxxskBassXljdsfsdj asdaBssxsx sdabOx";
console.log(str7.match(pattern6));
var pattern8 = new RegExp("b(sd)?x","ig");
var str8 = "bsdxsdsdbxsaAbCabcsdkxxskBassXljdsfsdj asdaBssxsx sdabOx";
console.log(str8.match(pattern8));
var pattern8 = new RegExp("b(sd)+x","ig");
var str8 = "bsdsdsdxsaAbCabcsdkxbxskBassbsdXljdsfsdj asdaBssxsx sdabOx";
console.log(str8.match(pattern8));
var pattern8 = new RegExp("b(sd)*x","ig");
var str8 = "bsdxsdsdxsaAbCabcsdkxxskBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str8.match(pattern8));
//console.clear()
var pattern9 = new RegExp("\\d{4}","ig");
var str9 = "bsdxsdsdxsaAbCabcsdkxxs2020kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str9.match(pattern9));
var pattern10 = new RegExp("\\D{4}","ig");
var str10 = "bsdxsdsdxsaAbCabcsdkxxs2020kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str10.match(pattern10));
var pattern11 = new RegExp("[a-z]{8}","ig");
var str11 = "bsdxsdsdxsaAbCabcsdkxxs2020kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str11.match(pattern11));
var pattern12 = new RegExp("[^a-z]{8,}","ig");
var str12 = "bsdxsdsdxsaAbCabcsdkxxs2020#$%^&0kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str12.match(pattern12));
var pattern13 = new RegExp("[a|b|s|d]{4,10}","ig");
var str13 = "bsdxsdsdxsaAbCabcsdkxxs2020#$%^&0kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str13.match(pattern13));
var pattern14 = new RegExp("\\w{8}","ig");
var str14 = "bsdxsdsdxsaAbCabcsdkxxs2020#$%^&0kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str14.match(pattern14));
var pattern15 = new RegExp("\\W{4,}","ig");
var str15 = "bsdxsdsdxsaAbCabcsdkxxs2020#$%^&0kBxassXljdsfsdj asdaBssxsx sdabOx";
console.log(str15.match(pattern15));
//console.clear()
var pattern16 = new RegExp("^[0-9]{17}([0-9]|x|X)$","ig");
var str16 = "360732199810250119";
console.log(pattern16.test(str16));
//console.clear()
var pattern16 = new RegExp("-","ig");
var str16 = "36073-2199810250119";
console.log(pattern16.test(str16));
var pattern17 = new RegExp("^[a-zA-Z0-9]{6,}(.[a-zA-Z0-9]+)*\@[a-zA-Z0-9]+\.(net|org|com)$","ig");
var str17 = "laijie1015@163.com";
console.log(pattern17.test(str17));
</script>
</head>
<body>
</body>
</html>
效果7
效果8
