String.replace高级用法详解

String.replace( ) 简介

语法：

string.replace(regexp, replacement)

regexp ：您要执行替换操作的正则表达式，如果传入的是一个字符串，那就会当作普通字符来处理，并且只会执行一次替换操作；如果是正则表达式，并且带有 global (g) 修饰符，则会替换所有出现的目标字符，否则，将只执行一次替换操作。

replacement ：您要替换成的字符。

返回值是执行替换操作后的字符串。

基本用法

1.基本替换

var text = "你是大帅哥！";

text.replace(/帅哥/, "美女");

// 返回：你是大美女！ 

2.结合正则表达式flag是实现全局替换：

var text= "帅哥，你是大帅哥！";

text.replace(/帅哥/g, "美女");

// 返回：美女，你是大美女！

子表达式

正则表达式中以括号()为子表达式，可以在替换字符串中或者RegExp对象下用$加序号的方式获取子表达式匹配到的字符串，如：

1.下面的例子用来获取url的两个参数，并返回urlRewrite之前的真实Url

var reg=new RegExp("(http://www.test.com/)(\\d+),(\\d+).jsp","gmi");

var url="http://www.test.com/1017141,20361055.jsp";

var rep=url.replace(reg,"$1ShowBook.jsp?bookId=$2&chapterId=$3");

//结果：rep=http://www.test.com/ShowBook.jsp?bookId=1017141&chapterId=20361055

2.通过RegExp对象方式

使用上述例子的定义

reg.test(url);

rep= RegExp .$1+"ShowBook.jsp?bookId="+ RegExp .$2+"&chapterId="+RegExp.$3;

//结果与上述例子一致

回调函数

replace可以接受回调函数，形如replace(regexp, replaceFunc),替换结果是function的返回值，例如：

//将所有字符首字母大写

var text = 'a journey of a thousand miles begins with single step.';

text.replace(/\b\w+\b/g, function(word) {

                           return word.substring(0,1).toUpperCase( ) +

                                  word.substring(1);

                         });

 

// 返回：A Journey Of A Thousand Miles Begins With Single Step.

其中，回调函数的参数规则如下：

replaceFunc(match[,$1,$2...],index, originalStr)

match 为匹配到的字符串; 

$n(中括号里参数)可以有0-N个,为第一个参数中匹配到一个子表达式的字符串,括号有几组,则参数有几个; 

index 为第一个参数中匹配到的字符串所在位置;

originalStr 为用来匹配的原字符串

例如：

var str="<div><%=this.name%></div>";

str=str.replace(/<%=this\.([^%>]+)%>/g,function(){

console.log(arguments);

return "hui";

})

console.log(str)

//结果：

["<%=this.name%>", "name", 5, "<div><%=this.name%></div>"] test.html:11

<div>hui</div> 

模板函数

稍加处理，我们可以得到一个基本的模板函数：

function compile(template,data){

return template.replace(/<%=this\.([^%>]+)%>/g,function(){

return data[arguments[1]];

})

}

var str="<div><%=this.name%>:<%=this.value%></div>";

var data={name:"性别",value:"男"}

console.log(compile(str,data));

//结果：

<div>性别:男</div>