当前位置:首页 > 系列课程 > JS高级设计 > 正文内容

6、第五章--引用类型(Date类型、RegExp类型)

binadmin2020-06-29JS高级设计157

5.3 Date 类型
ECMAScript 中的 Date 类型是在早期 Java 中的 java.util.Date 类基础上构建的。为此,Date类型使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 1 月 1 日午夜(零时)开始经过的毫秒数来保存日期。在使用这种数据存储格式的条件下,Date 类型保存的日期能够精确到 1970 年 1月 1 日之前或之后的 285 616 年。
要创建一个日期对象,使用 new 操作符和 Date 构造函数即可,如下所示。

var now = new Date();

在调用 Date 构造函数而不传递参数的情况下,新创建的对象自动获得当前日期和时间。如果想根据特定的日期和时间创建日期对象,必须传入表示该日期的毫秒数(即从 UTC 时间 1970 年 1 月 1 日午夜起至该日期止经过的毫秒数)。为了简化这一计算过程,ECMAScript 提供了两个方法:Date.parse()和 Date.UTC()。

其中,Date.parse()方法接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数。ECMA-262 没有定义 Date.parse()应该支持哪种日期格式,因此这个方法的行为因实现而异,而且通常是因地区而异。将地区设置为美国的浏览器通常都接受下列日期格式:

 “月/日/年”,如 6/13/2004;
 “英文月名 日,年”,如 January 12,2004;
 “英文星期几 英文月名 日 年 时:分:秒 时区”,如 Tue May 25 2004 00:00:00 GMT-0700。
 ISO 8601 扩展格式 YYYY-MM-DDTHH:mm:ss.sssZ(例如 2004-05-25T00:00:00)。只有兼容ECMAScript 5 的实现支持这种格式。
例如,要为 2004 年 5 月 25 日创建一个日期对象,可以使用下面的代码:

var someDate = new Date(Date.parse("May 25, 2004"));

如果传入 Date.parse()方法的字符串不能表示日期,那么它会返回 NaN。实际上,如果直接将表示日期的字符串传递给 Date 构造函数,也会在后台调用 Date.parse()。换句话说,下面的代码与前面的例子是等价的:

var someDate = new Date("May 25, 2004");

这行代码将会得到与前面相同的日期对象。


日期对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超出范围的值替换成当前的值,以便生成输出。例如,在解析"January 32, 2007"时,有的浏览器会将其解释为"February 1, 2007"。而 Opera 则倾向于插入当前月份的当前日期,返回"January 当前日期,2007"。也就是说,如果在 2007 年 9 月21 日运行前面的代码,将会得到"January 21, 2007"(都是 21 日)。


Date.UTC()方法同样也返回表示日期的毫秒数,但它与 Date.parse()在构建值时使用不同的信息。Date.UTC()的参数分别是年份、基于 0 的月份(一月是 0,二月是 1,以此类推)、月中的哪一天(1 到 31)、小时数(0 到 23)、分钟、秒以及毫秒数。在这些参数中,只有前两个参数(年和月)是必需的。如果没有提供月中的天数,则假设天数为 1;如果省略其他参数,则统统假设为 0。以下是两个使用 Date.UTC()方法的例子:

// GMT 时间 2000 年 1 月 1 日午夜零时
var y2k = new Date(Date.UTC(2000, 0)); 
// GMT 时间 2005 年 5 月 5 日下午 5:55:55 
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));

这个例子创建了两个日期对象。第一个对象表示 GMT 时间 2000 年 1 月 1 日午夜零时,传入的值一个是表示年份的 2000,一个是表示月份的 0(即一月份)。因为其他参数是自动填充的(即月中的天数为 1,其他所有参数均为 0),所以结果就是该月第一天的午夜零时。第二个对象表示 GMT 时间 2005年 5 月 5 日下午 5:55:55,即使日期和时间中只包含 5,也需要传入不一样的参数:月份必须是 4(因为月份是基于 0 的)、小时必须设置为 17(因为小时以 0 到 23 表示),剩下的参数就很直观了。
如同模仿 Date.parse()一样,Date 构造函数也会模仿 Date.UTC(),但有一点明显不同:日期和时间都基于本地时区而非 GMT 来创建。不过,Date 构造函数接收的参数仍然与 Date.UTC()相同因此,如果第一个参数是数值,Date 构造函数就会假设该值是日期中的年份,而第二个参数是月份,以此类推。据此,可以将前面的例子重写如下。

// 本地时间 2000 年 1 月 1 日午夜零时
var y2k = new Date(2000, 0); 
// 本地时间 2005 年 5 月 5 日下午 5:55:55 
var allFives = new Date(2005, 4, 5, 17, 55, 55);

以上代码创建了与前面例子中相同的两个日期对象,只不过这次的日期都是基于系统设置的本地时区创建的。
ECMAScript 5 添加了 Data.now()方法,返回表示调用这个方法时的日期和时间的毫秒数。这个方法简化了使用 Data 对象分析代码的工作。例如:

//取得开始时间
var start = Date.now(); 
//调用函数
doSomething(); 
//取得停止时间
var stop = Date.now(), 
 result = stop – start;

支持 Data.now()方法的浏览器包括 IE9+、Firefox 3+、Safari 3+、Opera 10.5 和 Chrome。在不支持它的浏览器中,使用+操作符把 Data 对象转换成字符串,也可以达到同样的目的。

//取得开始时间
var start = +new Date(); 
//调用函数
doSomething(); 
//取得停止时间
var stop = +new Date(), 
 result = stop - start;

5.3.1 继承的方法
与其他引用类型一样,Date 类型也重写了 toLocaleString()、toString()和 valueOf()方法;但这些方法返回的值与其他类型中的方法不同。Date 类型的 toLocaleString()方法会按照与浏览器设置的地区相适应的格式返回日期和时间。这大致意味着时间格式中会包含 AM 或 PM,但不会包含时区信息(当然,具体的格式会因浏览器而异)。而 toString()方法则通常返回带有时区信息的日期和时间,其中时间一般以军用时间(即小时的范围是 0 到 23)表示。下面给出了在不同浏览器中调用toLocaleString()和 toString()方法,输出 PST(Pacific Standard Time,太平洋标准时间)时间 2007年 2 月 1 日午夜零时的结果。

Internet Explorer 8 
toLocaleString() — Thursday, February 01, 2007 12:00:00 AM 
toString() — Thu Feb 1 00:00:00 PST 2007 
toLocaleString() — Thursday, February 01, 2007 12:00:00 AM 
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 
Safari 4 
toLocaleString() — Thursday, February 01, 2007 00:00:00 
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 
Chrome 4 
toLocaleString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 
toString() — Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 
Opera 10 
toLocaleString() — 2/1/2007 12:00:00 AM 
toString() — Thu, 01 Feb 2007 00:00:00 GMT-0800

显然,这两个方法在不同的浏览器中返回的日期和时间格式可谓大相径庭。事实上,toLocaleString()和 toString()的这一差别仅在调试代码时比较有用,而在显示日期和时间时没有什么价值。
至于 Date 类型的 valueOf()方法,则根本不返回字符串,而是返回日期的毫秒表示。因此,可以方便使用比较操作符(小于或大于)来比较日期值。请看下面的例子。

var date1 = new Date(2007, 0, 1); //"January 1, 2007" 
var date2 = new Date(2007, 1, 1); //"February 1, 2007" 
alert(date1 < date2); //true 
alert(date1 > date2); //false

从逻辑上讲,2007 年 1 月 1 日要早于 2007 年 2 月 1 日,此时如果我们说前者小于后者比较符合常理。而表示 2007 年 1 月 1 日的毫秒值小于表示 2007 年 2 月 1 日的毫秒值,因此在首先使用小于操作符比较日期时,返回的结果是 true。这样,就为我们比较日期提供了极大方便。
5.3.2 日期格式化方法
Date 类型还有一些专门用于将日期格式化为字符串的方法,这些方法如下。
 toDateString()——以特定于实现的格式显示星期几、月、日和年;
 toTimeString()——以特定于实现的格式显示时、分、秒和时区;
 toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年;
 toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
 toUTCString()——以特定于实现的格式完整的 UTC 日期。

var date = new Date();
console.log(date)
console.log(date.toDateString())
console.log(date.toTimeString())
console.log(date.toLocaleDateString())
console.log(date.toLocaleTimeString())
console.log(date.toUTCString())
Tue Jun 16 2020 17:00:20 GMT+0800 (中国标准时间)
Tue Jun 16 2020
17:00:20 GMT+0800 (中国标准时间)
2020/6/16
下午5:00:20
Tue, 16 Jun 2020 09:00:20 GMT


与 toLocaleString()和 toString()方法一样,以上这些字符串格式方法的输出也是因浏览器而异的,因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。除了前面介绍的方法之外,还有一个名叫 toGMTString()的方法,这是一个与toUTCString()等价的方法,其存在目的在于确保向后兼容。不过,ECMAScript 推荐现在编写的代码一律使用 toUTCString()方法。


5.3.3日期/时间组件方法
到目前为止,剩下还未介绍的 Date 类型的方法(如下表所示),都是直接取得和设置日期值中特定部分的方法了。需要注意的是,UTC 日期指的是在没有时区偏差的情况下(将日期转换为 GMT 时间)的日期值。

方 法 说 明方 法 说 明
getTime()返回表示日期的毫秒数;与valueOf()方法返回的值相同setTime(毫秒) 以毫秒数设置日期,会改变整个日期
getFullYear() 取得4位数的年份(如2007而非仅07)getUTCFullYear()返回UTC日期的4位数年份
setFullYear(年)设置日期的年份。传入的年份值必须是4位数字(如2007而非仅07)setUTCFullYear(年)设置UTC日期的年份。传入的年份值必须是4位数字(如2007而非仅07)
getMonth()返回日期中的月份,其中0表示一月,11表示十二月getUTCMonth() 返回UTC日期中的月份,其中0表示一月,11表示十二月
setMonth(月)设置日期的月份。传入的月份值必须大于0,超过11则增加年份setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0,超过11则增加年份
getDate() 返回日期月份中的天数(1到31)getUTCDate() 返回UTC日期月份中的天数(1到31)
setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份
getDay() 返回日期中星期的星期几(其中0表示星期日,6表示星期六)getUTCDay() 返回UTC日期中星期的星期几(其中0表示星期日,6表示星期六)
getHours() 返回日期中的小时数(0到23)getUTCHours() 返回UTC日期中的小时数(0到23)
setHours(时) 设置日期中的小时数。传入的值超过了23则增加月份中的天数setUTCHours(时)设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
getMinutes()返回日期中的分钟数(0到59)getUTCMinutes()返回UTC日期中的分钟数(0到59)
setMinutes(分) 设置日期中的分钟数。传入的值超过59则增加小时数setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过59则增加小时数
getSeconds() 返回日期中的秒数(0到59)getUTCSeconds() 返回UTC日期中的秒数(0到59)
setSeconds(秒)设置日期中的秒数。传入的值超过了59会增加分钟数setUTCSeconds(秒)设置UTC日期中的秒数。传入的值超过了59会增加分钟数
getMilliseconds() 返回日期中的毫秒数getUTCMilliseconds() 返回UTC日期中的毫秒数
setMilliseconds(毫秒) 设置日期中的毫秒数setUTCMilliseconds(毫秒) 设置UTC日期中的毫秒数
getTimezoneOffset() 返回本地时间与UTC时间相差的分钟数。例如,美国东部标准时间返回300。在某地进入夏令时的情况下,这个值会有所变化

5.4 RegExp 类型

ECMAScript 通过 RegExp 类型来支持正则表达式。使用下面类似 Perl 的语法,就可以创建一个正则表达式。

var expression = / pattern / flags ;

其中的模式(pattern)部分可以是任何简单或复杂的正则表达式,可以包含字符类、限定符、分组、向前查找以及反向引用。每个正则表达式都可带有一或多个标志(flags),用以标明正则表达式的行为。正则表达式的匹配模式支持下列 3 个标志。
 g:表示全局(global)模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
 i:表示不区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;
 m:表示多行(multiline)模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
因此,一个正则表达式就是一个模式与上述 3 个标志的组合体。不同组合产生不同结果,如下面的例子所示。

/* 
* 匹配字符串中所有"at"的实例
*/ 
var pattern1 = /at/g; 
/* 
* 匹配第一个"bat"或"cat",不区分大小写
*/ 
var pattern2 = /[bc]at/i; 
/* 
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写(.表示兼容所有)
*/ 
var pattern3 = /.at/gi;

与其他语言中的正则表达式类似,模式中使用的所有元字符都必须转义。正则表达式中的元字符包括:

( [ { \ ^ $ | ) ? * + .]}
特别字符描述
$匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身,请使用 \$。
( )标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符,请使用 \( 和 \)。
*匹配前面的子表达式零次或多次。要匹配 * 字符,请使用 \*。
+匹配前面的子表达式一次或多次。要匹配 + 字符,请使用 \+。
.匹配除换行符 \n 之外的任何单字符。要匹配 . ,请使用 \. 。
[标记一个中括号表达式的开始。要匹配 [,请使用 \[。
?匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 \?。
\将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如, 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\\' 匹配 "\",而 '\(' 则匹配 "("。
^匹配输入字符串的开始位置,除非在方括号表达式中使用,当该符号在方括号表达式中使用时,表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身,请使用 \^。
{标记限定符表达式的开始。要匹配 {,请使用 \{。
|指明两项之间的一个选择。要匹配 |,请使用 \|。

这些元字符在正则表达式中都有一或多种特殊用途,因此如果想要匹配字符串中包含的这些字符,就必须对它们进行转义。下面给出几个例子。

/* * 匹配第一个"bat"或"cat",不区分大小写*/ 
var pattern1 = /[bc]at/i; 
/* 
* 匹配第一个" [bc]at",不区分大小写
*/ 
var pattern2 = /\[bc\]at/i; 
/* 
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
*/ 
var pattern3 = /.at/gi; 
/* 
* 匹配所有".at",不区分大小写
*/ 
var pattern4 = /\.at/gi;

在上面的例子中,pattern1 匹配第一个"bat"或"cat",不区分大小写。而要想直接匹配"[bc]at"的话,就需要像定义 pattern2 一样,对其中的两个方括号进行转义。对于 pattern3 来说,句点表示位于"at"之前的任意一个可以构成匹配项的字符。但如果想匹配".at",则必须对句点本身进行转义,如 pattern4 所示。

前面举的这些例子都是以字面量形式来定义的正则表达式。另一种创建正则表达式的方式是使用RegExp 构造函数,它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串。可以使用字面量定义的任何表达式,都可以使用构造函数来定义,如下面的例子所示。

/* 
* 匹配第一个"bat"或"cat",不区分大小写
*/ 
var pattern1 = /[bc]at/i; 
/* 
* 与 pattern1 相同,只不过是使用构造函数创建的
*/ 
var pattern2 = new RegExp("[bc]at", "i");

在此,pattern1 和 pattern2 是两个完全等价的正则表达式。要注意的是,传递给 RegExp 构造函数的两个参数都是字符串(不能把正则表达式字面量传递给 RegExp 构造函数)。由于 RegExp 构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义。所有元字符都必须双重转义,那些已经转义过的字符也是如此,例如\n(字符\在字符串中通常被转义为\\,而在正则表达式字符串中就会变成\\\\)。下表给出了一些模式,左边是这些模式的字面量形式,右边是使用 RegExp 构造函数定义相同模式时使用的字符串。

字面量模式等价的字符串
/\[bc\]at/"\\[bc\\]at" 
/\.at/"\\.at" 
/name\/age/"name\\/age" 
/\d.\d{1,2}/ "\\d.\\d{1,2}" 
/\w\\hello\\123/ "\\w\\\\hello\\\\123" 

使用正则表达式字面量和使用 RegExp 构造函数创建的正则表达式不一样。在 ECMAScript 3 中,正则表达式字面量始终会共享同一个 RegExp 实例,而使用构造函数创建的每一个新 RegExp 实例都是一个新实例。来看下面的例子。

var re = null, 
 i; 
for (i=0; i < 10; i++){ 
 re = /cat/g; 
 re.test("catastrophe"); 
} 
for (i=0; i < 10; i++){ 
 re = new RegExp("cat", "g"); 
 re.test("catastrophe"); 
}

在第一个循环中,即使是循环体中指定的,但实际上只为/cat/创建了一个 RegExp 实例。由于实例属性(下一节介绍实例属性)不会重置,所以在循环中再次调用 test()方法会失败。这是因为第一次调用 test()找到了"cat",但第二次调用是从索引为 3 的字符(上一次匹配的末尾)开始的,所以就找不到它了。由于会测试到字符串末尾,所以下一次再调用 test()就又从开头开始了。

第二个循环使用 RegExp 构造函数在每次循环中创建正则表达式。因为每次迭代都会创建一个新的RegExp 实例,所以每次调用 test()都会返回 true。

ECMAScript 5 明确规定,使用正则表达式字面量必须像直接调用 RegExp 构造函数一样,每次都创建新的 RegExp 实例。IE9+、Firefox 4+和 Chrome 都据此做出了修改。

5.4.1 RegExp实例属性

RegExp 的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息。

 global:布尔值,表示是否设置了 g 标志。

 ignoreCase:布尔值,表示是否设置了 i 标志。

 lastIndex:整数,表示开始搜索下一个匹配项的字符位置,从 0 算起。

 multiline:布尔值,表示是否设置了 m 标志。

 source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。

通过这些属性可以获知一个正则表达式的各方面信息,但却没有多大用处,因为这些信息全都包含在模式声明中。例如:

var pattern1 = /\[bc\]at/i; 
alert(pattern1.global); //false 
alert(pattern1.ignoreCase); //true 
alert(pattern1.multiline); //false 
alert(pattern1.lastIndex); //0 
alert(pattern1.source); //"\[bc\]at" 
var pattern2 = new RegExp("\\[bc\\]at", "i"); 
alert(pattern2.global); //false 
alert(pattern2.ignoreCase); //true 
alert(pattern2.multiline); //false 
alert(pattern2.lastIndex); //0 
alert(pattern2.source); //"\[bc\]at"

我们注意到,尽管第一个模式使用的是字面量,第二个模式使用了 RegExp 构造函数,但它们的source 属性是相同的。可见,source 属性保存的是规范形式的字符串,即字面量形式所用的字符串。

5.4.2 RegExp实例方法

RegExp 对象的主要方法是 exec(),该方法是专门为捕获组而设计的。exec()接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null。返回的数组虽然是 Array 的实例,但包含两个额外的属性:index 和 input。其中,index 表示匹配项在字符串中的位置,而 input 表示应用正则表达式的字符串。在数组中,第一项是与整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串(如果模式中没有捕获组,则该数组只包含一项)。请看下面的例子。

var text = "mom and dad and baby"; 
var pattern = /mom( and dad( and baby)?)?/gi; 
var matches = pattern.exec(text); 
alert(matches.index); // 0 
alert(matches.input); // "mom and dad and baby" 
alert(matches[0]); // "mom and dad and baby" 
alert(matches[1]); // " and dad and baby" 
alert(matches[2]); // " and baby"

这个例子中的模式包含两个捕获组。最内部的捕获组匹配"and baby",而包含它的捕获组匹配"and dad"或者"and dad and baby"。当把字符串传入 exec()方法中之后,发现了一个匹配项。因为整个字符串本身与模式匹配,所以返回的数组 matchs 的 index 属性值为 0。数组中的第一项是匹配的整个字符串,第二项包含与第一个捕获组匹配的内容,第三项包含与第二个捕获组匹配的内容。

对于 exec()方法而言,即使在模式中设置了全局标志(g),它每次也只会返回一个匹配项。在不设置全局标志的情况下,在同一个字符串上多次调用 exec()将始终返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用 exec()则都会在字符串中继续查找新匹配项,如下面的例子所示。

var text = "cat, bat, sat, fat"; 
var pattern1 = /.at/; 
var matches = pattern1.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern1.lastIndex); //0 
matches = pattern1.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern1.lastIndex); //0 
var pattern2 = /.at/g; 
var matches = pattern2.exec(text); 
alert(matches.index); //0 
alert(matches[0]); //cat 
alert(pattern2.lastIndex); //3  
matches = pattern2.exec(text); 
alert(matches.index); //5 
alert(matches[0]); //bat 
alert(pattern2.lastIndex); //8

这个例子中的第一个模式 pattern1 不是全局模式,因此每次调用 exec()返回的都是第一个匹配项("cat")。而第二个模式 pattern2 是全局模式,因此每次调用 exec()都会返回字符串中的下一个匹配项,直至搜索到字符串末尾为止。此外,还应该注意模式的 lastIndex 属性的变化情况。在全局匹配模式下,lastIndex 的值在每次调用 exec()后都会增加,而在非全局模式下则始终保持不变。


IE 的 javascript 实现在 lastIndex 属性上存在偏差,即使在非全局模式下,lastIndex 属性每次也会变化。


正则表达式的第二个方法是 test(),它接受一个字符串参数。在模式与该参数匹配的情况下返回true;否则,返回 false。在只想知道目标字符串与某个模式是否匹配,但不需要知道其文本内容的情况下,使用这个方法非常方便。因此,test()方法经常被用在 if 语句中,如下面的例子所示。

var text = "000-00-0000"; 
var pattern = /\d{3}-\d{2}-\d{4}/; -------正则表达式元字符见文章底部表格
if (pattern.test(text)){ 
 alert("The pattern was matched."); 
}

在这个例子中,我们使用正则表达式来测试了一个数字序列。如果输入的文本与模式匹配,则显示一条消息。这种用法经常出现在验证用户输入的情况下,因为我们只想知道输入是不是有效,至于它为什么无效就无关紧要了。

RegExp 实例继承的 toLocaleString()和 toString()方法都会返回正则表达式的字面量,与创建正则表达式的方式无关。例如:

var pattern = new RegExp("\\[bc\\]at", "gi"); 
alert(pattern.toString()); // /\[bc\]at/gi 
alert(pattern.toLocaleString()); // /\[bc\]at/gi

即使上例中的模式是通过调用 RegExp 构造函数创建的,但 toLocaleString()和 toString()方法仍然会像它是以字面量形式创建的一样显示其字符串表示。

正则表达式的 valueOf()方法返回正则表达式本身。

5.4.3 RegExp构造函数属性

RegExp 构造函数包含一些属性(这些属性在其他语言中被看成是静态属性)。这些属性适用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。关于这些属性的另一个独特之处,就是可以通过两种方式访问它们。换句话说,这些属性分别有一个长属性名和一个短属性名(Opera 是例外,它不支持短属性名)。下表列出了 RegExp 构造函数的属性。

长属性名 短属性名 说 明
input $_最近一次要匹配的字符串。Opera未实现此属性
lastMatch$&最近一次的匹配项。Opera未实现此属性
lastParen$+最近一次匹配的捕获组。Opera未实现此属性
leftContext$`input字符串中lastMatch之前的文本
multiline$*布尔值,表示是否所有表达式都使用多行模式。IE和Opera未实现此属性
rightContext$' Input字符串中lastMatch之后的文本

使用这些属性可以从 exec()或 test()执行的操作中提取出更具体的信息。请看下面的例子。

var text = "this has been a short summer"; 
var pattern = /(.)hort/g; 
/* 
 * 注意:Opera 不支持 input、lastMatch、lastParen 和 multiline 属性
 * Internet Explorer 不支持 multiline 属性
 */ 
if (pattern.test(text)){ 
 alert(RegExp.input); // this has been a short summer 
 alert(RegExp.leftContext); // this has been a 
 alert(RegExp.rightContext); // summer 
 alert(RegExp.lastMatch); // short 
 alert(RegExp.lastParen); // s 
 alert(RegExp.multiline); // false 
}

以上代码创建了一个模式,匹配任何一个字符后跟 hort,而且把第一个字符放在了一个捕获组中。RegExp 构造函数的各个属性返回了下列值:

 input 属性返回了原始字符串;

 leftContext 属性返回了单词 short 之前的字符串,而 rightContext 属性则返回了 short之后的字符串;

 lastMatch 属性返回最近一次与整个正则表达式匹配的字符串,即 short;

 lastParen 属性返回最近一次匹配的捕获组,即例子中的 s。

如前所述,例子使用的长属性名都可以用相应的短属性名来代替。只不过,由于这些短属性名大都不是有效的 ECMAScript 标识符,因此必须通过方括号语法来访问它们,如下所示。

var text = "this has been a short summer"; 
var pattern = /(.)hort/g; 
/* 
 * 注意:Opera 不支持 input、lastMatch、lastParen 和 multiline 属性
 * Internet Explorer 不支持 multiline 属性
 */ 
if (pattern.test(text)){ 
 alert(RegExp.$_); // this has been a short summer 
 alert(RegExp["$`"]); // this has been a 
 alert(RegExp["$'"]); // summer 
 alert(RegExp["$&"]); // short 
 alert(RegExp["$+"]); // s 
 alert(RegExp["$*"]); // false 
}

除了上面介绍的几个属性之外,还有多达 9 个用于存储捕获组的构造函数属性。访问这些属性的语法是 RegExp.$1、RegExp.$2…RegExp.$9,分别用于存储第一、第二……第九个匹配的捕获组。在调用 exec()或 test()方法时,这些属性会被自动填充。然后,我们就可以像下面这样来使用它们。

var text = "this has been a short summer"; 
var pattern = /(..)or(.)/g; 
 
if (pattern.test(text)){ 
 alert(RegExp.$1); //sh 
 alert(RegExp.$2); //t 
}

这里创建了一个包含两个捕获组的模式,并用该模式测试了一个字符串。即使 test()方法只返回一个布尔值,但 RegExp 构造函数的属性$1 和$2 也会被匹配相应捕获组的字符串自动填充。

5.4.4 模式的局限性

尽管 ECMAScript 中的正则表达式功能还是比较完备的,但仍然缺少某些语言(特别是 Perl)所支持的高级正则表达式特性。下面列出了 ECMAScript 正则表达式不支持的特性(要了解更多相关信息,请访问 www.regular-expressions.info)。

 匹配字符串开始和结尾的\A 和\Z 锚①

 向后查找(lookbehind)②

 并集和交集类

 原子组(atomic grouping)

 Unicode 支持(单个字符除外,如\uFFFF)

 命名的捕获组③

 s(single,单行)和 x(free-spacing,无间隔)匹配模式

 条件匹配

 正则表达式注释

即使存在这些限制,ECMAScript 正则表达式仍然是非常强大的,能够帮我们完成绝大多数模式匹配任务。

—————————— 

① 但支持以插入符号(^)和美元符号($)来匹配字符串的开始和结尾。

② 但完全支持向前查找(lookahead)。

③ 但支持编号的捕获组。


正则表达式 - 元字符

下表包含了元字符的完整列表以及它们在正则表达式上下文中的行为:


字符描述
\

将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。

^

匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。

$

匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 之前的位置。

*

匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。

+

匹配前面的子表达式一次或多次。例如,'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{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

?

当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。

.

匹配除换行符(\n、\r)之外的任何单个字符。要匹配包括 '\n' 在内的任何字符,请使用像"(.|\n)"的模式。

(pattern)

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

(?:pattern)

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

(?=pattern)

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

(?!pattern)

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

(?<=pattern)反向(look behind)肯定预查,与正向肯定预查类似,只是方向相反。例如,"(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows",但不能匹配"3.1Windows"中的"Windows"。
(?<!pattern)反向否定预查,与正向否定预查类似,只是方向相反。例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows",但不能匹配"2000Windows"中的"Windows"。
x|y

匹配 x 或 y。例如,'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

[xyz]

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

[^xyz]

负值字符集合。匹配未包含的任意字符。例如, '[^abc]' 可以匹配 "plain" 中的'p'、'l'、'i'、'n'。

[a-z]

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

[^a-z]

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

\b

匹配一个单词边界,也就是指单词和空格间的位置。例如, 'er\b' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。

\B

匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er',但不能匹配 "never" 中的 'er'。

\cx

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

\d

匹配一个数字字符。等价于 [0-9]。

\D

匹配一个非数字字符。等价于 [^0-9]。

\f

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

\n

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

\r

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

\s

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

\S

匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。

\t

匹配一个制表符。等价于 \x09 和 \cI。键盘上的tab键

\v

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

\w

匹配字母、数字、下划线。等价于'[A-Z

a-z0-9_]'。

\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-3),且 m 和 l 均为八进制数字 (0-7),则匹配八进制转义值 nml。

\un

匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (?)。

字符类和它相反的字符类加在一起就可以匹配所有字符

正则表达式 - 运算符优先级

正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。

相同优先级的从左到右进行运算,不同优先级的运算先高后低。下表从最高到最低说明了各种正则表达式运算符的优先级顺序:


运算符描述
\转义符
(), (?:), (?=), []圆括号和方括号
*, +, ?, {n}, {n,}, {n,m}限定符
^, $, \任何元字符、任何字符定位点和序列(即:位置和顺序)
|                替换,"或"操作
字符具有高于替换运算符的优先级,使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food",请使用括号创建子表达式,从而产生"(m|f)ood"。


非打印字符

非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列:

字符描述
\cx匹配由x指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。
\f匹配一个换页符。等价于 \x0c 和 \cL。
\n匹配一个换行符。等价于 \x0a 和 \cJ。
\r匹配一个回车符。等价于 \x0d 和 \cM。
\s匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t匹配一个制表符。等价于 \x09 和 \cI。
\v匹配一个垂直制表符。等价于 \x0b 和 \cK。

正则表达式在线测试工具:http://c.runoob.com/front-end/854

当然也可以自己写一个测试工具


String对象和正则表达式相关的方法

1、search(正则或字符串),返回索引值。类似indexOf()

2、match(正则),返回捕获组。类似exec(),但又有区别。

match:非全局的情况下才会返回分组中匹配到的内容,全局匹配只能匹配到所有匹配到的字符。

exec:无论是否全局匹配都会返回分组中匹配到的内容,都只会返回当前匹配到的一个内容,而不是全部返回。

3、split(正则或字符串),返回数组。

4、replace(正则或字符串),返回新的字符串


    var str1 = '/[\\\\a\tb]/';
    console.log(str1.search('\a'))

    var str2 = 'html   ,   csss   ,  js'
    var pattern = /\s*,\s*/
    console.log(str2.split(pattern))

    var str3='1 love js js'
    var pattern = /js/g
    console.log(str3.replace(pattern))

    var str4 = 'i love js';
    var pattern =/(js)/
    document.write(str.replace(pattern,'<strong style="color:red">$1</strong>'))
    
    var str5 = '中国军队和阿扁一起打群架'
    var pattern =/国军|阿扁|打群架/g
    console.log(str5.replace(pattern,function($0){
        var result= '';
        for(var i = 0; i<$0.length;i++){
            result += '*'
        }
        return result
    }))


标签: javascript
分享给朋友:

相关文章

9、第六章--面向对象的程序设计(理解对象、创建对象)(1)

9、第六章--面向对象的程序设计(理解对象、创建对象)(1)

面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。前面提到过,ECMAScript 中没有类的概念,因此它的对...

2、第三章--JavaScript基本概念(操作符)

2、第三章--JavaScript基本概念(操作符)

5. 操作符ECMA-262 描述了一组用于操作数据值的操作符,包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。ECMAScript 操作符的与众不同之处在于,它...

7、第五章--引用类型(Function类型、基本包装类型)

7、第五章--引用类型(Function类型、基本包装类型)

5.5 Function 类型说起来 ECMAScript 中什么最有意思,我想那莫过于函数了——而有意思的根源,则在于函数实际上是对象。每个函数都是 ...

9、第六章--面向对象的程序设计(理解对象、创建对象)(2)

9、第六章--面向对象的程序设计(理解对象、创建对象)(2)

接  9、第六章--面向对象的程序设计(理解对象、创建对象)(1)6.2.3 原型模式我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象...

8、第五章--引用类型(单体内置对象)

8、第五章--引用类型(单体内置对象)

5.7 单体内置对象ECMA-262 对内置对象的定义是:“由 ECMAScript 实现提供的、不依赖于宿主环境的对象,这些对象在 ECMAScri...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信