一个匹配URL的正则表达式例子(带详细解释)

可处理正则表达式的方法有regexp.exec、regexp.test、string、match、string.replace、string.search和string.split。正则表达式相较于等下的字符串处理有显著的性能优势。

举个例子:下面是一个匹配URL的正则表达式(注意JavaScript中正则表达式必须写在一行中,由于浏览器窗口大小有限这里可能会显示为两行):

var parse_url = /^(?:(A-Za-z+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;

接下来调用parse_url的exec方法。如果能成功匹配传给它的字符串,就会返回一个数组,该数组包含了从这个url中提取出来的片段:

var url = 'http://www.bbc.com:8088/goodparts?q#fragment';
var result = parse_url.exec(url);
var names = ['url','scheme','slash','host','port','path','query','hash'];
var blanks = '    ';
var len = names.length;
var i;

for(i=0; i < len;i += 1) {
    document.writeln(names[i] + ':' + blanks.substring(names[i].length), result[i]);
}

上面这段代码产生的结果如下:

url:    http://www.bbc.com:8088/goodparts?q#fragment 
scheme:    http
slach:    //
host:    www.bbc.com
port:    8088
path:    goodparts
query:    q
hash:    fragment

分解parse_url的各个部分,看它是怎么工作的:

^

^字符表示此字符串的开始。它是一个锚,指引exec不要跳过那些不像URL的前缀,只匹配那些从开头就像URL一样的字符串;

(?:(A-Za-z)+):)?

这个因子匹配一个协议名,但仅当它后面跟随一个 : (冒号)的时候才匹配。(?: …) 表示一个非捕获型分组。后缀 ? 表示这个分组是可选的。它表示重复0次或者1次。( … )表示一个捕获型分组。一个捕获型分组会复制它所有匹配的文本,并把其放到result数组里。每个捕获型分组都会被指定一个编号。第一个捕获型分组的编号是1,所以该分组所匹配的文本副本会出现在result[1]中。[ … ]表示一个字符类。A-Za-z这个字符类包含26个大写字母和26个小写字母。连字符( - )表示范围从A到Z。后缀 + 表示这个字符类会匹配一次或多次。这个组后面跟着字符 : ,它将会按照字面进行匹配;

(\/{0,3})

下一个因子是捕获型分组2。\ /表示应该匹配 / (斜杠)。用 \ (反斜杠)来进行转义,就不会被错误地理解为这个正则表达式的结束符。后缀{0,3}表示 / 会被匹配0次,或者1-3次;

([0-9.\-A-Za-z]+)

下一个因子是捕获型分组3。它会匹配一个主机名,由一个或者多个数字、字面,以及 . 或 - 字符组成。- 会被转义为 \ -以防与表示范围的连字符混淆;

(?::(\d+))?

下一个可选的因子匹配端口号,它是一个前置 : 加上一个或者多个数字而组成的序列。\d表示一个数字字符。一个或者多个数字组成的数字串会被捕获型分组4捕获;

(?:\/([^?#]*))?

接下来的可选的分组以一个 / 开始。之后的字符类[^?#]以一个^开始表示这个类包含除 ? 和 # 之外的所有字符。 * 表示这个字符类会被匹配0次或多次;

(?:\?([^#]*))?

接下来是一个以 ? 开始的可选分组。它包含捕获型分组6,这个分组包含0个或多个非 # 字符;

(?:#(.*))?

最后一个可选分组是以 # 开始。 . 会匹配除行结束符以外的所有字符。

$

$表示这个字符串的介绍。它保证在这个URL的尾部没有其他内容了。
以上便是正则表达式parse_url的所有因子。

你可能感兴趣的:(web前端,javascript,正则表达式,url,javascript)