14.2.5 匹配一个模式
14.2.1 节介绍的search()方法是查看一个字符串是否包含一个特定的正则表达式模式的一种方式。match()方法则是另一种方式。对一个字符串使用它,你不仅可以查看字符串中是否存在一个模式,而且可以捕获该模式,以便稍后在自己的脚本中使用它。例如,假设表单上有一个文本字段,供访问者添加对你的站点的评论。可能你想要看看评论是否包含一个URL,如果是这样的话,获取该URL以供进一步处理。
如下的代码使用match()查找并捕获一个URL:
//get the contents of the text area
var text='my website is www.missingmanuals.com';
//create a regular expression
var urlRegex=/((\bhttps?:\/\/)|(\bwww.))\S*/
//find a match for the regular expression in the string
var url=text.match(urlRegex);
alert(url[0]);//www.missingmanuals.com
首先,这段代码创建了一个变量,它包含了一个字符串,该字符串包含了URL www.missingmanuals.com。这个变量在这里只是用于测试的目的(以便你可以看到match()方法做了些什么)。如果你实际上想要测试表单上的一个文本区域的内容,可以像下面这样使用这段代码:
var text=$('#comments'). val();
接下来,这段代码创建了匹配URL的一个正则表达式(参见14.2.4节了解正则表达式的更多细节)。最终,它在该字符串上运行match()方法。match()函数是一个字符串方法,因此,你可以从包含字符串的一个变量的名称开始,添加一个句点,后面跟着match()。传递给match()方法一个正则表达式以供匹配。
在上面的例子中,变量url保存了匹配的结果。如果在字符串中没有找到正则表达式模式,那么,结果是一个叫做null的特殊的JavaScript值。如果有匹配,脚本返回一个数组,数组的第一个值就是匹配的文本。例如,在这个例子中,变量url包含了一个数组,第一个数组元素是匹配上的文本。在这个例子中,url[0]包含了www.missingmanuals.com(参见本书2.8节对数组的介绍)。
注意:在JavaScript中,一个null值当做false一样对待,因此,你可以像下面这样测试看看match()方法是否真正匹配了某些内容:
var url=text.match(urlRegex);
if(!url){
//no match
}else{
//match
}
匹配一个模式的每个实例
根据如何设置正则表达式,match()方法以两种方式工作。在上面的示例中,该方法返回带有第一个匹配的文本的数组。因此,如果你有一个长字符串包含了多个URL,只有第一个URL会找到。然而,你也可以开启一个正则表达式的全局搜索属性,以便在一个字符串中搜索多个匹配。
我们可以通过创建正则表达式的时候在其末尾添加一个g,从而使其进行全局搜索(就像是14.2.3节所介绍的,添加一个i用来进行不区分大小写的搜索):
var urlRegex=/((\bhttps?:\/\/)|(\bwww.))\S*/g
注意,g放在了结束/(该符号用来结束实际的模式)之外。这个正则表达式执行全局搜索,当和match()方法一起使用时,它搜索字符串中的每一个匹配并且将返回所有匹配的文本的一个数组,这是在一个博客条目中找出每一个URL的一种很好的方法,例如,在长长的一段文本中找出一个单词的每一个实例。
我们可以使用一个全局搜索来重新编写14.2.5节的代码,如下所示:
//create a variable containing a string with a URL
var text='there are a lot of great websites like↵
www.missingmanuals.com and http://www.oreilly.com';
//create a regular expression with global search
var urlRegex=/((\bhttps?:\/\/)|(\bwww.))\S*/g
//find a match for the regular expression in the string
var url=text.match(urlRegex);
alert(url[0]);//www.missingmanuals.com
alert(url[1]);//http://www.oreilly.com
我们可以通过访问结果数组的length属性来确定匹配的数目:url.length。这个示例将返回数字2,因为我们在测试字符串中找到了两个URL。此外,我们通过使用数组的索引编号(参见2.8.2节来访问每一个匹配的字符串,因此,在这个例子中,url[0]是第一个匹配,而url[1]是第二个匹配。