正则里的捕获
先来一道面试题
//说出以下函数的作用，并填写空格内容
//define
(function(window){
function fn(str){
this.str=str;
}
fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
});
};
window.fn = fn;
})(window);
//use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.futu5.com','FutuSecurites','Welcome'));
})();
这里就涉及到正则的捕获组，也就是说使用小括号指定一个子表达式后，匹配这个子表达式的文本（也就是此分组捕获的内容）可以在表达式或其它的程序中作进一步的处理
捕获组
语法：
|
字符 |
描述 |
示例 |
|
(pattern) |
匹配pattern并捕获结果，自动设置组号。 |
(abc)+d 匹配abcd或者abcabcd |
|
(?<name>pattern) 或 (?'name'pattern) |
匹配pattern并捕获结果，设置name为组名。 |
|
|
\num |
对捕获组的反向引用。其中 num 是一个正整数。 |
(\w)(\w)\2\1 匹配abba |
|
\k< name > 或 \k' name ' |
对命名捕获组的反向引用。其中 name 是捕获组名。 |
(?<group>\w)abc\k<group> 匹配xabcx |
使用小括号指定一个子表达式后，匹配这个子表达式的文本（也就是此分组捕获的内容）可以在表达式或其它程序中作进一步的处理。默认情况下，每个捕获组会自动拥有一个组号，规则是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推。
例如：
(\d{4})-(\d{2}-(\d{2}))
1 1 2 3 32
下面的数字对应的括号的顺序
非捕获组，语法如下
|
字符 |
描述 |
示例 |
|
(?:pattern) |
匹配pattern，但不捕获匹配结果。 |
'industr(?:y|ies) 匹配'industry'或'industries'。 |
|
(?=pattern) |
零宽度正向预查，不捕获匹配结果。 |
'Windows (?=95|98|NT|2000)' 匹配 "Windows2000" 中的 "Windows" 不匹配 "Windows3.1" 中的 "Windows"。 |
|
(?!pattern) |
零宽度负向预查，不捕获匹配结果。 |
'Windows (?!95|98|NT|2000)' 匹配 "Windows3.1" 中的 "Windows" 不匹配 "Windows2000" 中的 "Windows"。 |
|
(?<=pattern) |
零宽度正向回查，不捕获匹配结果。 |
'2000 (?<=Office|Word|Excel)' 匹配 " Office2000" 中的 "2000" 不匹配 "Windows2000" 中的 "2000"。 |
|
(?<!pattern) |
零宽度负向回查，不捕获匹配结果。 |
'2000 (?<!Office|Word|Excel)' 匹配 " Windows2000" 中的 "2000" 不匹配 " Office2000" 中的 "2000"。 |
非捕获组只匹配结果，但不捕获结果，也不会分配组号，当然也不能在表达式和程序中做进一步处理。
首先(?:pattern)与(pattern)不同之处只是在于不捕获结果。
接下来的四个非捕获组用于匹配pattern（或者不匹配pattern）位置之前（或之后）的内容。匹配的结果不包括pattern。
这样显而易见，答案就很明显了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//说出以下函数的作用，并填写空格内容
//define
'use strict';
(function(window){
function fn(str){
this.str=str;
}
fn.prototype.format = function(){
var arg = arguments;
//var arg = [].slice.call(arguments);
// console.log(arg instanceof Array,arg)
return this.str.replace(/\{(\d+)\}/g,function(a,b){
console.log(a,b) //{0} 0 {1} 1 {2} 2
//a为匹配的内容，b为捕获的内容
return arg[b]||"";
});
};
window.fn = fn;
})(window);
//use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.futu5.com','FutuSecurites','Welcome'));
})();
</script>
</body>
</html>
